Short Code Typography - RARES.ID

  1. Headings

    H1 Heading

    H2 Heading

    H3 Heading

    H4 Heading

    H5 Heading
    H6 Heading

    Use the <h1> to <h6> elements to define your headings. Add the .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 or .uk-h6 class to alter the size of your headings, for example have a h1 look like a h3
    1. <h1>H1 Heading</h1>
    2. <h2>H2 Heading</h2>
    3. <h3>H3 Heading</h3>
    4. <h4>H4 Heading</h4>
    5. <h5>H5 Heading</h5>
    6. <h6>H6 Heading</h6>
    7.  
    8. <span class="uk-h1">H1 Heading</span>
    9. <span class="uk-h2">H2 Heading</span>
    10. <span class="uk-h3">H3 Heading</span>
    11. <span class="uk-h4">H4 Heading</span>
    12. <span class="uk-h5">H5 Heading</span>
    13. <span class="uk-h6">H6 Heading</span>

  2. Body Copy

    Body copy

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

    Marked text

    You can use the mark tag to highlight text.

    Deleted text

    This line of text is meant to be treated as deleted text.

    Underlined text

    This line of text will render as underlined

    Small text

    This line of text is meant to be treated as fine print.

    Bold Text

    The following snippet of text is rendered as bold text.

    Italic Text

    The following snippet of text is rendered as italicized text

    Abbreviation

    An abbreviation of the word attribute is attr.
    To create a paragraph you can use <p> </p> tags. It has a bottom margin of half their computed line-height (10px by default). You can use tags like <mark> </mark> to Highlighted text, <del> </del> for Deleted text, <u> </u> for Underlined text, <small> </small> for small text, <strong> </strong> for Bold text, <em> </em> for Italic text and <abbr title="attribute"> </abbr> to make an Abbreviation
    1. <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    2.  
    3. <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
    4.  
    5. <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    6.  
    7. <p><del>This line of text is meant to be treated as deleted text.</del></p>
    8.  
    9. <p><u>This line of text will render as underlined</u></p>
    10.  
    11. <p><small>This line of text is meant to be treated as fine print.</small></p>
    12.  
    13. <p>The following snippet of text is <strong>rendered as bold text.</strong></p>
    14.  
    15. <p>The following snippet of text is <em>rendered as italicized text</em></p>
    16.  
    17. <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>

  3. Inline Code

    Inline Code

    For example, <section> should be wrapped as inline.

    User input Code

    To switch directories, type cd followed by the name of the directory.
    To edit settings, press ctrl + ,

    Variables Code

    y = mx + b

    Sample output Code

    This text is meant to be treated as sample output from a computer program.

    Basic block Code

    <p>Sample text here...</p>
    To create an Inline Code use <code> </code> tags. To make User Input Code use <kbd> </kbd> tags. To make Variables Code use <var> </var> tags. To make Simple Output Code use <samp> </samp> tags. To make Basic Block Code use <pre> </pre> tags
    1. <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
    2.  
    3. <p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>
    4.  
    5. <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
    6.  
    7. <p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
    8.  
    9. <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

  4. Addresses

    Twitter, Inc.
    795 Folsom Ave, Suite 600
    San Francisco, CA 94107
    P: (123) 456-7890
    Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.
    1. <address>
    2. <strong>Twitter, Inc.</strong><br>
    3. 795 Folsom Ave, Suite 600<br>
    4. San Francisco, CA 94107<br>
    5. <abbr title="Phone">P:</abbr> (123) 456-7890
    6. </address>

  5. Lists

    Unordered list
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Faucibus porta lacus fringilla vel
    Ordered list
    1. Facilisis in pretium nisl aliquet
    2. Nulla volutpat aliquam velit
      1. Phasellus iaculis neque
      2. Purus sodales ultricies
      3. Vestibulum laoreet porttitor sem
      4. Ac tristique libero volutpat at
    3. Faucibus porta lacus fringilla vel
    Unordered List A list of items in which the order does not explicitly matters
    1. <ul>
    2. <li>Facilisis in pretium nisl aliquet</li>
    3. <li>Nulla volutpat aliquam velit
    4. <ul>
    5. <li>Phasellus iaculis neque</li>
    6. <li>Purus sodales ultricies</li>
    7. <li>Vestibulum laoreet porttitor sem</li>
    8. <li>Ac tristique libero volutpat at</li>
    9. </ul>
    10. </li>
    11. <li>Faucibus porta lacus fringilla vel</li>
    12. </ul>
    Ordered List A list of items in which the order does explicitly matters
    1. <ol>
    2. <li>Facilisis in pretium nisl aliquet</li>
    3. <li>Nulla volutpat aliquam velit
    4. <ol>
    5. <li>Phasellus iaculis neque</li>
    6. <li>Purus sodales ultricies</li>
    7. <li>Vestibulum laoreet porttitor sem</li>
    8. <li>Ac tristique libero volutpat at</li>
    9. </ol>
    10. </li>
    11. <li>Faucibus porta lacus fringilla vel</li>
    12. </ol>

  6. Table

    Divider Table
    #Table HeadingTable HeadingTable Heading
    1Table DataTable DataTable Data
    2Table DataTable DataTable Data
    3Table DataTable DataTable Data
    Striped Table
    #Table HeadingTable HeadingTable Heading
    1Table DataTable DataTable Data
    2Table DataTable DataTable Data
    3Table DataTable DataTable Data
    Divider Table A simple table with dividers by adding .uk-table-divider class
    1. <div class="uk-overflow-auto">
    2. <table class="uk-table uk-table-small uk-table-divider">
    3. <thead>
    4. <tr>
    5. <th>#</th>
    6. <th>Table Heading</th>
    7. <th>Table Heading</th>
    8. <th>Table Heading</th>
    9. </tr>
    10. </thead>
    11. <tbody>
    12. <tr>
    13. <th>1</th>
    14. <td>Table Data</td>
    15. <td>Table Data</td>
    16. <td>Table Data</td>
    17. </tr>
    18. <tr>
    19. <th>2</th>
    20. <td>Table Data</td>
    21. <td>Table Data</td>
    22. <td>Table Data</td>
    23. </tr>
    24. <tr>
    25. <th>3</th>
    26. <td>Table Data</td>
    27. <td>Table Data</td>
    28. <td>Table Data</td>
    29. </tr>
    30. </tbody>
    31. </table>
    32. </div>
    Striped Table A simple table with stripped background by adding .uk-table-striped class
    1. <div class="uk-overflow-auto">
    2. <table class="uk-table uk-table-small uk-table-striped">
    3. <thead>
    4. <tr>
    5. <th>#</th>
    6. <th>Table Heading</th>
    7. <th>Table Heading</th>
    8. <th>Table Heading</th>
    9. </tr>
    10. </thead>
    11. <tbody>
    12. <tr>
    13. <th>1</th>
    14. <td>Table Data</td>
    15. <td>Table Data</td>
    16. <td>Table Data</td>
    17. </tr>
    18. <tr>
    19. <th>2</th>
    20. <td>Table Data</td>
    21. <td>Table Data</td>
    22. <td>Table Data</td>
    23. </tr>
    24. <tr>
    25. <th>3</th>
    26. <td>Table Data</td>
    27. <td>Table Data</td>
    28. <td>Table Data</td>
    29. </tr>
    30. </tbody>
    31. </table>
    32. </div>