Style Guide

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus urna neque viverra justo nec ultrices. Congue nisi vitae suscipit tellus. Massa tincidunt dui ut ornare lectus sit amet est placerat. Amet risus nullam eget felis eget nunc.

Bookmark Card

In hac habitasse platea dictumst vestibulum rhoncus. Sed odio morbi quis commodo odio aenean sed. Dictum non consectetur a erat nam at lectus urna duis.

Ghost Handlebars Themes - Building a custom Ghost theme - Docs

Our handlebars theme templating framework works with the Ghost API to build flexible publishing websites. Get all the tools you need to start building your custom theme here!

Ghost - The Professional Publishing Platform

Images

Consequat interdum varius sit amet mattis vulputate enim. Accumsan sit amet nulla facilisi. Auctor neque vitae tempus quam pellentesque nec nam. In aliquam sem fringilla ut morbi tincidunt. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. In vitae turpis massa sed.

Gifs

Tape /gif and Enter

Wide

Regular

Proin nibh nisl condimentum id venenatis. Pretium lectus quam id leo in vitae turpis massa. Nisl pretium fusce id velit ut tortor pretium. Volutpat ac tincidunt vitae semper quis. Purus in mollis nunc sed id semper risus in hendrerit. In hac habitasse platea dictumst vestibulum rhoncus. Sed odio morbi quis commodo odio aenean sed. Dictum non consectetur a erat nam at lectus urna duis.

Lorem dolor sed viverra ipsum. Vitae tortor condimentum lacinia quis vel eros. Elementum facilisis leo vel fringilla. Quis eleifend quam adipiscing vitae proin sagittis. Porttitor massa id neque aliquam. In pellentesque massa placerat duis ultricies lacus sed. Nulla porttitor massa id neque aliquam vestibulum morbi. Egestas sed tempus urna et pharetra pharetra.

Gallery Images

Diam sollicitudin tempor id eu nisl nunc. Nullam eget felis eget nunc lobortis mattis aliquam. Mauris vitae ultricies leo integer malesuada nunc vel. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Posuere lorem ipsum dolor sit amet consectetur. Potenti nullam ac tortor vitae purus faucibus. Eget sit amet tellus cras adipiscing enim eu turpis. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Faucibus turpis in eu mi bibendum neque egestas congue.

Lists

Unordored

• Euismod elementum nisi
• Quis eleifend quam adipiscing
• Vitae proin sagittis
• Nibh sit amet commodo

Ordered

1. Euismod elementum nisi
2. Quis eleifend quam adipiscing
3. Vitae proin sagittis
4. Nibh sit amet commodo

Dictum varius duis at consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Sagittis nisl rhoncus mattis rhoncus urna. Tincidunt id aliquet risus feugiat in ante metus. In dictum non consectetur. Euismod quis viverra nibh cras. Morbi enim nunc faucibus a pellentesque sit. Ac auctor augue mauris augue neque gravida in fermentum et. Amet consectetur adipiscing elit duis tristique. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus.

Toggle

Cards

Button

Callout

Header

Video

Audio

Pack1 ElectricGuitar Mood 1 F Minor 85BPM

0:00

/0:14

1×

Product

Product title

Description

Buttin text

Alerts

> ...

> [note] Note
> ...

> [info] Imporant
> ...

> [success] Tip
> ...

> [warning] Warning
> ...

> [danger] Error
> ...

Default alert

[note]Note

Note alert

[info]Important

Important / info alert

[success]Tip

Success / tip alert

[warning]Warning

Warning alert

[danger]Error

Danger alert

Code highlight

The Highlight.js Framework is used to highlight snippet code parts into posts and pages directly.

An additional script allows adding the header that displays the code language and a Copy button

Connect-PnPOnline -Url https://contoso.sharepoint.com/sites/project -Credential $userCreds

function sayHello(name) {
	return 'Hello World !! By ' + name;
}
console.log(sayHello('Fluent UI'));

Basically, the inline code is supported as well:

You can highlight `inline code` like this

In addition to the code highlight, the theme supports the keyboard actions such as CMD + C

<kbd>C</kbd>

Fluent UI Styles