Antora UI styling

1. Colours

Colours Application

- - - -

Document text: body, heading, link, hovered link

- - - -

Document text: body, heading, link, hovered link

- - - - -

Content navigation: heading, muted, background, hover, border

- - - -

Navigation bar: text, background, hover, button

- - - -

Navigation menu: text, background, hover, border

- - -

Backgrounds: document, page, panel

- - -

Footer: background, text, link

Important Warning Caution Note Tip

Admonitions: important, warning, caution, note, tip

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.
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

  1. Quisque a porta odio.

  2. Phasellus non ultricies ante, et condimentum orci.

  3. Praesent hendrerit, erat nec aliquam hendrerit, neque odio facilisis diam, nec sollicitudin dui diam sit amet sem.

  4. 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.

  5. 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

  1. Nullam id urna sed dui aliquet varius.

    Nunc dignissim risus nec convallis laoreet.

  2. Nunc porttitor eleifend sodales.

    Duis ut velit in lorem vulputate porta.

  3. 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)

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.

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

Aenean tempus in mauris non pretium.
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.

chevron_left
chevron_right
Twitter LinkedIn Github Gitlab Meetup RSS Miro Trello Zotero Hypothesis