Antora UI styling

1. Colours

1.1. Interface

primary

primary container

secondary

secondary container

tertiary

tertiary container

surface

surface-variant

outline

outline-variant

1.2. Admonitions

important

important container

tip

tip container

note

note container

error

error container

warning

warning container

caution

caution container

2. Typography

2.1. Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

2.2. Paragraphs

Lead paragraph (preamble). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin ac mauris eget imperdiet. Etiam vulputate nunc eget volutpat aliquam. Nulla quis luctus ex. Morbi varius lorem pharetra justo convallis blandit. Nullam lobortis, justo at sodales rhoncus, leo neque iaculis orci, ac mattis elit tellus ac magna.

Normal paragraph. Phasellus porttitor mi at ante convallis ultrices. Pellentesque ultricies risus a lacus facilisis, id suscipit nisl tincidunt. Integer viverra mi in augue sollicitudin auctor. Nullam vel dolor quis turpis consectetur pulvinar. Nulla ut arcu et turpis tempor tincidunt at ac odio. Nullam magna sem, cursus non leo et, semper placerat tellus. Nam diam lectus, porttitor vel eros in, aliquet venenatis ipsum.

2.3. Text formatting

Bold: Fusce at lectus elementum ex ornare volutpat eu sit amet leo.
Italic: Nullam a urna eget risus facilisis ultrices ut ut turpis.
Monospace: Integer eget aliquam urna, a viverra dolor.
Highlight: Maecenas commodo euismod mauris, at dignissim augue.
Subscript, superscript: Maecenas _nec sem ^metus.
Curved quotation marks and apostrophes: Praesent “sapien” nisi, ‘rutrum’ in justo ’sit amet, inter’dum molestie’ dui.
Underline and strikethrough: Nullam id urna sed dui aliquet varius.
Keyboard, button, menu

`Shift`+`F10`	Vestibulum blandit ullamcorper sollicitudin.
`Ctrl`+`Alt`+`Del`	Nam vel nibh ultricies, mattis tellus vitae, cursus dolor.
`Ctrl`+`C`, `Ctrl`+`V`	Fusce blandit ante orci.
OK	Vestibulum sit amet tincidunt ipsum.
Proin tincidunt	Proin sit amet libero in nulla consequat tincidunt non sit amet mi.

2.4. Links

With URI scheme: Nunc dignissim https://asciidoctor.org risus nec convallis laoreet. Nunc porttitor eleifend sodales.
Open in new tab or window: Duis ut velit in lorem vulputate porta. Nam eget https://asciidoctor.org facilisis felis.

Without URI scheme: Mauris cursus asciidoctor.org sed ligula in porta. Vivamus vehicula asciidoctor.org justo eget nisl semper hendrerit.

Mauris elit orci, venenatis id luctus ac, fermentum ac eros. Pellentesque nec facilisis ex, sollicitudin consectetur dolor.

3. Lists

3.1. Unordered list

Unordered list title

Morbi sit amet arcu vitae lacus sollicitudin pretium nec quis leo.
Fusce consequat faucibus nisi, ut elementum erat semper non.
Cras euismod eleifend rutrum.
Proin condimentum metus ut tellus mattis pellentesque.
- Sed interdum ac nibh at dapibus.
- Pellentesque at mattis sapien.
- Praesent at nisi vitae libero convallis malesuada imperdiet sed velit.
  - Suspendisse potenti.
  - Proin ultricies sem urna, a sagittis purus viverra vitae.
Phasellus ultricies erat nec sem volutpat, a vulputate orci vulputate.

3.2. Ordered list

Ordered list title

Quisque a porta odio.
Phasellus non ultricies ante, et condimentum orci.
Praesent hendrerit, erat nec aliquam hendrerit, neque odio facilisis diam, nec sollicitudin dui diam sit amet sem.
Morbi sed sagittis ante, eget tristique sem.
1. Vestibulum tincidunt suscipit orci, sed faucibus massa dignissim vel.
2. Aliquam placerat at est vel luctus.
3. Donec ut nulla vitae urna egestas semper a in tortor.
  1. Mauris tempus facilisis nisl, facilisis scelerisque dui bibendum vel.
  2. Praesent volutpat, enim nec sollicitudin sollicitudin, ante metus dictum odio, egestas interdum nibh leo sit amet sapien.
Pellentesque vestibulum augue dapibus tellus vulputate, id aliquam ante tempor.

3.3. Checklists

Curabitur elementum tempor ex sit amet lacinia.
Sed feugiat diam non neque maximus volutpat at a velit.
- Aenean luctus, mauris sed porta tempor, purus erat porta ex, eget lacinia urna ante vitae dolor.
- Nam dignissim placerat nisi, eget dignissim augue cursus hendrerit.

3.4. Description list

Regular description list

Donec ipsum libero, mattis non tincidunt vel, vulputate non sapien.: Ut auctor turpis id posuere pellentesque.
Sed et tincidunt tellus.: Praesent felis lorem, finibus et eros eget, convallis blandit dolor.
Nulla et facilisis ligula.: Nullam et consequat magna.
Mauris sollicitudin nibh mi, quis vestibulum nisl vestibulum at.: Nulla id porttitor enim.

Compact description list

Nullam leo est	scelerisque a erat et, venenatis pulvinar turpis.
Morbi id purus	eget augue aliquam scelerisque et ut nisl.
Nunc sed	consequat purus, vitae lacinia quam.

3.5. Question and answer list

Nullam id urna sed dui aliquet varius.

Nunc dignissim risus nec convallis laoreet.
Nunc porttitor eleifend sodales.

Duis ut velit in lorem vulputate porta.
Nam eget facilisis felis.

Mauris cursus sed ligula in porta.

4. Blocks

4.1. Admonitions

4.1.1. Tip

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lobortis rhoncus venenatis. Mauris at dolor vel urna tristique mattis. Nam dignissim neque ante, quis tincidunt leo consequat vel.

4.1.2. Note

Curabitur lacinia dolor in nunc consectetur, quis commodo tortor molestie. Suspendisse potenti. Duis euismod est vel tempor rutrum. Ut elementum purus et ligula rhoncus dapibus.

4.1.3. Warning

Nunc nec euismod massa, a porttitor nisl. Nam faucibus fringilla dolor, a sollicitudin urna pretium vel. Nam eu risus convallis purus fringilla imperdiet. Phasellus luctus felis quis lacus scelerisque, eget convallis enim tristique.

4.1.4. Caution

Nulla facilisi. Donec dictum elit et turpis tincidunt mattis. Nullam tempus hendrerit orci at venenatis. Nulla facilisi.

4.1.5. Important

Aenean tincidunt nunc ac dui scelerisque vestibulum non sit amet felis. Mauris sodales turpis at sollicitudin vestibulum. Sed gravida posuere scelerisque. Nam tristique finibus diam eget convallis.

Optional title

Ut dapibus, arcu at facilisis scelerisque, tellus velit posuere odio, at sagittis lorem nisi quis augue. Curabitur rhoncus in quam tempus rhoncus. Curabitur non lacus pellentesque, scelerisque dui sit amet, aliquet velit.

Praesent consectetur ultricies justo, at gravida massa commodo non. Suspendisse potenti. Vivamus lectus urna, gravida vitae aliquam eget, vestibulum id magna.

4.3. Example

Optional title

Duis egestas scelerisque dapibus. Praesent feugiat feugiat ullamcorper. Donec ex neque, viverra et commodo sit amet, eleifend ac quam.

Curabitur ut sollicitudin quam, nec maximus nisi. Mauris mollis sollicitudin elementum. Sed dolor tellus, posuere nec tortor non, dignissim ullamcorper est.

4.4. Quote

Optional title

Phasellus gravida, nunc sed congue dictum, massa nisi rutrum ligula, sed commodo libero diam non nibh. Fusce risus tortor, dapibus a varius quis, mattis ut nulla. Aenean et risus id ex ornare ultricies.

— Quisque sit amet congue urna.
Donec laoreet vehicula neque, porttitor vulputate libero lobortis semper.

4.5. Verse

Optional title

Proin at bibendum dolor.
Nam rutrum pulvinar finibus.
Nam at lacinia purus.
Pellentesque posuere cursus ligula, vitae auctor mi euismod sit amet.
Morbi pulvinar auctor mauris vulputate viverra.

— Curabitur sollicitudin efficitur elit et sagittis.
Aenean pellentesque convallis quam nec mollis.

4.6. Source code

plain text

Optional title

require 'sinatra' (1)

ORDERED_LIST_KEYWORDS = {
  'loweralpha' => 'a',
  'lowerroman' => 'i',
  'upperalpha' => 'A',
  'upperroman' => 'I',
}

get '/hi' do
  "Hello World!" (2)
end

1	Callout. Proin at feugiat ante, sagittis feugiat massa. Phasellus lectus nisl, dignissim quis pellentesque eget, sodales eget ligula.
2	Proin mi libero, varius nec laoreet ac, ultrices et urna.

4.7. Listing

Optional title

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Morbi dui enim, fringilla sit amet sollicitudin ut, sodales quis lorem.
Ut at semper dolor.
In hac habitasse platea dictumst.

4.8. Command line

$ ls -la && echo "done."

4.9. Collapsible blocks

Click to open/close the details (default closed)

Click to open/close the details (default open)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin ac mauris eget imperdiet. Etiam vulputate nunc eget volutpat aliquam.

5. Media

5.1. Images

Figure 1. Optional title

5.2. Video

Video from Vimeo

6. Tables

Optional title
Table header	Phasellus ullamcorper et odio aliquam ornare.	Phasellus finibus placerat tellus, vel pellentesque mauris ornare sed.
Odd row	Sed condimentum vestibulum euismod.	Sed odio sem, accumsan eu tortor quis, porta tincidunt massa.
Even row	Pellentesque quis imperdiet mi.	Maecenas egestas porttitor urna id pulvinar.
Fusce tristique nulla vitae ante mattis, luctus tincidunt eros rhoncus.	Praesent feugiat placerat justo, et dictum ipsum blandit ut.	Proin dictum augue sapien, non convallis dolor ultrices nec.
Suspendisse diam lectus, dignissim vel aliquam eget, lacinia a est.	Curabitur condimentum vehicula dolor, vel aliquam ligula ullamcorper ut.	Nunc erat eros, vehicula sit amet ornare at, auctor vel ligula.
Vivamus semper molestie augue, id semper diam commodo id.	Morbi hendrerit tempor quam, a fermentum nisi tincidunt sed.	Pellentesque rutrum vulputate nisi, ac tincidunt neque euismod in.
Footer	Aenean sollicitudin arcu vestibulum posuere dictum.	Curabitur interdum fringilla purus, vel venenatis nisi iaculis eu.

7. Special document sections

Abstract

Morbi suscipit risus quis rutrum eleifend. Quisque non placerat mi. Quisque venenatis venenatis metus, vitae viverra orci hendrerit vel.

Appendix A: Appendix

Aliquam placerat massa purus, bibendum pellentesque dui rhoncus vel. Sed nec tortor ac ante ultrices eleifend sit amet sed elit. Aenean non est viverra, imperdiet risus quis, auctor ex.

Glossary

Cras efficitur condimentum aliquam. Etiam condimentum turpis sed rhoncus placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet nunc sit amet orci vestibulum porta.

Bibliography

Quisque luctus ultricies libero, in ultricies tellus lacinia quis. Sed volutpat sodales quam. Cras in diam molestie, lobortis mauris eu, dictum ligula. Praesent massa ex, ullamcorper ut convallis non, mattis sed eros.

Antora UI styling

1. Colours

1.1. Interface

1.2. Admonitions

2. Typography

2.1. Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

2.2. Paragraphs

2.3. Text formatting

2.4. Links

3. Lists

3.1. Unordered list

3.2. Ordered list

3.3. Checklists

3.4. Description list

3.5. Question and answer list

4. Blocks

4.1. Admonitions

4.1.1. Tip

4.1.2. Note

4.1.3. Warning

4.1.4. Caution

4.1.5. Important

4.2. Sidebar

4.3. Example

4.4. Quote

4.5. Verse

4.6. Source code

4.7. Listing

4.8. Command line

4.9. Collapsible blocks

5. Media

5.1. Images

5.2. Video

6. Tables

7. Special document sections

Abstract

Appendix A: Appendix

Glossary

Bibliography