Typography

    The BoF theme comes with formatting for all common typographic elements and special elements like inline lists and footnotes.

    With Kirby you can use Markdown and Markdown Extra to format your pages. On top of that it has been extended with Kirbytext and you can use regular HTML also.

    Headings

    You can combine any inline HTML element within Markdown formatted text. In this case the small tag can be used for optional hierarchy within a heading. For some inline elements you can use special Markdown formatting.

    Heading 1 small

    A BoF session is an informal meeting where people carry out discussions based on a shared interest.

    Heading 2 small

    A BoF session is an informal meeting where people carry out discussions based on a shared interest.

    Heading 3

    A BoF session is an informal meeting where people carry out discussions based on a shared interest.

    Heading 4

    A BoF session is an informal meeting where people carry out discussions based on a shared interest.

    Heading 5

    A BoF session is an informal meeting where people carry out discussions based on a shared interest.

    Heading 6

    A BoF session is an informal meeting where people carry out discussions based on a shared interest.

    # Heading 1 <small>small</small>
    A BoF session is an informal meeting …
    ## Heading 2 <small>small</small> A BoF session is an informal meeting …
    ### Heading 3 A BoF session is an informal meeting …
    #### Heading 4 A BoF session is an informal meeting …
    ##### Heading 5 A BoF session is an informal meeting …
    ###### Heading 6 A BoF session is an informal meeting …

    Structure

    Headings are used to give your document structure, to create a hierarchy. Please don’t use headings to make text stand out. A heading 2 should follow heading 1. Heading 3 follows heading 2 etc.
    The title on your page (like ‘Typography’ at the top of this page) is marked up as a heading 1, so in general you’ll will only use the other headings (2–6) to format your text.

    Lists

    • This is an unordered list
    • A list item
      • A nested unordered list
      • A nested unordered list item
    • A list item
    1. This is an ordered list
    2. A list item
      1. A nested ordered list
      2. A nested unordered list item
    3. A list item
    A definition list term
    Definition list description
    A definition list term
    Definition list description
    -   This is an unordered list
    -   A list item
        -   A nested unordered list
        -   A nested unordered list item
    -   A list item
    1. This is an ordered list 2. A list item 1. A nested ordered list 2. A nested unordered list item 3. A list item
    A definition list term : Definition list description A definition list term : Definition list description

    Inline Lists

    You can use Markdown within a <div> tag by adding markdown="1".
    The inline lists are created by adding class: inline.

    • This is an inline list
    • An inline list item
    • Another inline item
    • This is an inline list
    • An inline list item
    • Another inline item
    • This is an inline list
    • An inline list item
    • Another inline item
    <div class="inline" markdown="1">
        - This is an inline list
        - An inline list item
        - Another inline item
    </div>
    <div class="inline pipe" markdown="1"> - This is an inline list - An inline list item - Another inline item </div>
    <div class="inline bullit" markdown="1"> - This is an inline list - An inline list item - Another inline item </div>

    Blockquotes

    Unclose your mind. You are not a prisoner. You are a bird in flight, searching the skies for dreams. Haruki Murakami

    > Unclose your mind. You are not a prisoner. 
    You are a bird in flight, searching the skies for dreams.
    <cite>Haruki Murakami</cite>
    

    Inline text formatting

    For abbreviations, computer code, emphasized and important text you can use Markdown formatting. Other inline elements can be formatted with regular HTML tags.

    1. This is the ABBR tag
      indicates an abbreviation or acronym
    2. This is the cite tag
      defines the title of a work (book, film or painting etc.)
    3. This is the `code` tag
      defines a piece of computer code
    4. This is the del tag
      defines text that has been deleted
    5. This is the dfn tag
      defines a definition term
    6. This is the *em* tag
      renders as emphasized text (italic)
    7. This is the ins tag
      defines a text that has been inserted
    8. This is the kbd tag
      defines keyboard input
    9. This is the mark tag
      highlights text
    10. This is the samp tag
      sample output from a computer program
    11. This is the small tag
      defines smaller text and other side comments
    12. This is the **strong** tag
      defines important text (bold)
    13. This is the sub tag
      subscript text
    14. This is the sup tag
      superscript text
    15. This is the q tag
      defines a short quotation
    *[ABBR]: Abbreviation (Define once before/after the text)
    
        1. This is the ABBR tag (see above)
    
        2. This is the <cite>cite</cite> tag
    
        3. This is the `code` tag (backticks)
    
        4. This is the <del>del</del> tag
    
        5. This is the <dfn>dfn</dfn> tag
    
        6. This is the *em* tag
    
        7. This is the <ins>ins</ins> tag
    
        8. This is the <kbd>kbd</kbd> tag
    
        9. This is the <mark>mark</mark> tag
    
        10. This is the <samp>samp</samp> tag
    
        11. This is the <small>small</small> tag
    
        12. This is the **strong** tag
    
        13. This is the <sub>sub</sub> tag
    
        14. This is the <sup>sup</sup> tag
    
        15. This is the <q>q</q> tag
    

    Tables

    This is a Markdown Extra feature. For left aligning text, leave out the wrapping <div> (see code).

    Heading Heading Heading
    Row Table data Table data Table data
    Row Table data Table data Table data
    Row Table data Table data Table data
    Row Table data Table data Table data
    <div class="table-right" markdown="1">
    
    |         | Heading    | Heading    | Heading    |
    | ------- | ---------- | ---------- | ---------- |
    | **Row** | Table data | Table data | Table data |
    | **Row** | Table data | Table data | Table data |
    | **Row** | Table data | Table data | Table data |
    | **Row** | Table data | Table data | Table data |
    
    </div>
    

    Code blocks

    Simply indent every line with at least four spaces to create a code block. You can also use three backticks ```.

    <a href="http://www.coko.nl">Confrey/Koedam</a>
    
       Check our &lpar;link:http://www.coko.nl text:website&rpar;
    
    ``` Check our &lpar;link:http://www.coko.nl text:website&rpar; ```

    Horizontal rules

    Place three or more hyphens, asterisks, or underscores on a line to produce a horizontal rule; you can also use spaces in between.


    *** or * * * 
    --- or - - -
    

    Footnotes

    Fred is a funny 1 Cacatua Galerita 2.

    This is a Markdown Extra feature. The footnote definition will automatically be placed at the bottom of the body text. Start numbering from zero onwards.

    Fred is a funny [^0] *Cacatua Galerita* [^1].
    
    [^0]: Remember the seventies tv series Baretta?
    [^1]: Sulphur-crested Cockatoo

    1. Remember the seventies tv series Baretta? 

    2. Sulphur-crested Cockatoo