metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 offers various tools and classes for displaying elements of typography for your site. This includes titles, paragraphs, lists, various text elements and much more."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Typography - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Typography</a></li> <li class="toc-entry"><a href="#_reset">Reset</a></li> <li class="toc-entry"><a href="#_font_stack">Font stack</a></li> <li class="toc-entry"><a href="#_headings">Headings</a></li> <li class="toc-entry"><a href="#_super_headings">Super headings</a></li> <li class="toc-entry"><a href="#_paragraph">Paragraph</a></li> <li> <ul> <li class="toc-entry"><a href="#_paragraph_default">Defaults</a></li> <li class="toc-entry"><a href="#_paragraph_lead">Leader</a></li> <li class="toc-entry"><a href="#_paragraph_secondary">Secondary & Small</a></li> <li class="toc-entry"><a href="#_paragraph_indents">Indents</a></li> </ul> </li> <li class="toc-entry"><a href="#_inline_elements">Inline elements</a></li> <li class="toc-entry"><a href="#_abbr">Abbreviations</a></li> <li class="toc-entry"><a href="#_addr">Address</a></li> <li class="toc-entry"><a href="#_blockquotes">Blockquotes</a></li> <li class="toc-entry"><a href="#_remarks">Remarks</a></li> <li class="toc-entry"><a href="#_lists">Lists</a></li> <li> <ul> <li class="toc-entry"><a href="#_lists_unstyled">Unstyled</a></li> <li class="toc-entry"><a href="#_lists_unordered">Unordered</a></li> <li class="toc-entry"><a href="#_lists_ordered">Ordered</a></li> <li class="toc-entry"><a href="#_lists_inline">Inline</a></li> <li class="toc-entry"><a href="#_lists_desc">Description list</a></li> </ul> </li> <li class="toc-entry"> <a href="#_tally">Code</a> <ul> <li class="toc-entry"><a href="#_code_inline">Inline code</a></li> <li class="toc-entry"><a href="#_code_vars">Variables</a></li> <li class="toc-entry"><a href="#_user_input">User input</a></li> <li class="toc-entry"><a href="#_sample_output">Sample output</a></li> </ul> </li> <li class="toc-entry"><a href="#_ellipsis">Text ellipsis</a></li> <li class="toc-entry"><a href="#_text_transform">Transform</a></li> <li class="toc-entry"><a href="#_text_alignment">Alignment</a></li> <li class="toc-entry"><a href="#_text_weight">Font weight</a></li> <li class="toc-entry"><a href="#_responsive">Responsive</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Typography</h1> <p class="text-leader"> Metro 4 offers various tools and classes for displaying elements of typography for your site. This includes titles, paragraphs, lists, various text elements and much more. </p>  <h3 id="_reset">Reset</h3> <p> In Metro 4 reset method based on Eric Meyer’s <a href="http://meyerweb.com/eric/tools/css/reset/">"Reset CSS" 2.0</a> and include additional rules. </p> <p> The <span class="tally"><html></span> and <span class="tally"><body></span> elements are updated to provide better page-wide defaults. More specifically: </p> <ul> <li> The <span class="tally">box-sizing</span> is globally set on every element—including <span class="tally">*:before</span> and <span class="tally">*:after</span>, to <span class="tally">border-box</span>. This ensures that the declared width of element is never exceeded due to padding or border. </li> <li> The <span class="tally"><body></span> also sets a global <span class="tally">font-family</span> and <span class="tally">line-height</span>. This is inherited later by some form elements to prevent font inconsistencies. </li> <li> For safety, the <span class="tally"><body></span> has a declared <span class="tally">background-color</span>, defaulting to <span class="tally">#fff</span> (white). </li> </ul>  <h3 id="_font_stack">Native font stack</h3> <p> In Metro 4 i use a "native font stack" for optimum text rendering on every device and OS. Read more about native font stacks in this <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">Smashing Magazine article</a>. </p> <pre class=""><code> @fontName: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif; </code></pre> <table class="table row-border"> <thead> <tr> <th colspan="2">Match table for font family and OS</th> </tr> </thead> <tbody> <tr> <td>-apple-system</td> <td>Safari for OS X and iOS (San Francisco)</td> </tr> <tr> <td>system-ui</td> <td>Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android</td> </tr> <tr> <td>BlinkMacSystemFont</td> <td>Chrome < 56 for OS X (San Francisco)</td> </tr> <tr> <td>Segoe UI</td> <td>Windows</td> </tr> <tr> <td>Roboto</td> <td>Android</td> </tr> <tr> <td>Ubuntu</td> <td>Linux</td> </tr> <tr> <td>Helvetica Neue, sans-serif</td> <td>Basic web fallback</td> </tr> </tbody> </table>  <h3 id="_headings">Headings</h3> <p> In Metro 4 You can access all kinds of headings from <span class="tally">h1</span> through <span class="tally">h6</span>. </p> <table class="table row-border"> <tbody> <tr> <td style="width: 150px"><span class="tally"><h1></span></td> <td class="d-none d-block-md"><span class="h1">h1. Metro heading</span></td> <td>48px</td> </tr> <tr> <td><span class="tally"><h2></span></td> <td class="d-none d-block-md"><span class="h2">h2. Metro heading</span></td> <td>32px</td> </tr> <tr> <td><span class="tally"><h3></span></td> <td class="d-none d-block-md"><span class="h3">h3. Metro heading</span></td> <td>28px</td> </tr> <tr> <td><span class="tally"><h4></span></td> <td class="d-none d-block-md"><span class="h4">h4. Metro heading</span></td> <td>24px</td> </tr> <tr> <td><span class="tally"><h5></span></td> <td class="d-none d-block-md"><span class="h5">h5. Metro heading</span></td> <td>20px</td> </tr> <tr> <td><span class="tally"><h6></span></td> <td class="d-none d-block-md"><span class="h6">h6. Metro heading</span></td> <td>18px</td> </tr> </tbody> </table> <p> If you want to create a header element without using tags <span class="tally"><h1> - <h6></span>, Metro 4 present relevant classes: <span class="tally">.h1</span> through <span class="tally">.h6</span>. You can also use the following additional classes: </p> <table class="table row-border"> <thead> <tr> <th>Tag</th> <th>Class</th> <th>Additional</th> </tr> </thead> <tbody> <tr> <td><code><h1></code></td> <td>.h1</td> <td>.leader</td> </tr> <tr> <td><code><h2></code></td> <td>.h2</td> <td>.sub-leader</td> </tr> <tr> <td><code><h3></code></td> <td>.h2</td> <td>.header</td> </tr> <tr> <td><code><h4></code></td> <td>.h4</td> <td>.sub-header</td> </tr> <tr> <td><code><h5></code></td> <td>.h5</td> <td>.alt-header</td> </tr> <tr> <td><code><h6></code></td> <td>.h6</td> <td>.sub-alt-header</td> </tr> </tbody> </table> <h4>Heading secondary text</h4> <p> You can create lighter, secondary text in any heading with a generic <span class="tally"><small></span> tag or the <span class="tally">.small</span> class. </p> <table class="table row-border"> <tbody> <tr> <td><code><h1></code></td> <td><h1>Header <small>Secondary</small></h1></td> </tr> <tr> <td><code><h2></code></td> <td><h2>Header <small>Secondary</small></h2></td> </tr> <tr> <td><code><h3></code></td> <td><h3>Header <small>Secondary</small></h3></td> </tr> <tr> <td><code><h4></code></td> <td><h4>Header <small>Secondary</small></h4></td> </tr> <tr> <td><code><h5></code></td> <td><h5>Header <small>Secondary</small></h5></td> </tr> <tr> <td><code><h6></code></td> <td><h6>Header <small>Secondary</small></h6></td> </tr> </tbody> </table> <pre class=""><code> <h1>Header <small>Secondary</small></h1> </code></pre>  <h3 id="_super_headings">Super headings</h3> <p> Metro 4 support super headings: <span class="tally">.display1</span>, <span class="tally">.display2</span>, <span class="tally">.display3</span>, <span class="tally">.display4</span>. </p> <table class="table row-border"> <tbody> <tr> <td style="width: 150px;"><span class="tally">.display4</span></td> <td class="d-none d-block-md"><span class="display4">Display4</span></td> <td>112px</td> </tr> <tr> <td><span class="tally">.display3</span></td> <td class="d-none d-block-md"><span class="display3">Display3</span></td> <td>56px</td> </tr> <tr> <td><span class="tally">.display2</span></td> <td class="d-none d-block-md"><span class="display2">Display2</span></td> <td>48px</td> </tr> <tr> <td><span class="tally">.display1</span></td> <td class="d-none d-block-md"><span class="display1">Display1</span></td> <td>36px</td> </tr> </tbody> </table>  <h3 id="_paragraph">Paragraph</h3> <p class="text-leader"> Metro 4 provides various classes for creating and working with paragraphs. </p> <h4 id="_paragraph_default">Default paragraph</h4> <p> In Metro 4 default paragraph styled with <span class="tally">line-height</span> <span class="tally">1.5</span> value, <span class="tally">margin-bottom</span> <span class="tally">16px</span> and <span class="tally">font-size</span> <span class="tally">16px</span>. </p> <div class="example"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <pre class=""><code> <p>...</p> </code></pre> <h4 id="_paragraph_lead">Leader text</h4> <p> To make leader paragraph use class: <span class="tally">.text-leader</span> and <span class="tally">.text-leader2</span>. </p> <div class="example"> <p class="text-leader"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p class="text-leader2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <pre class=""><code> <p class="text-leader">...</p> <p class="text-leader2">...</p> </code></pre> <h4 id="_paragraph_secondary">Secondary & Small</h4> <p> To make secondary and small paragraph use classes: <span class="tally">.text-secondary</span> and <span class="tally">.text-small</span>. </p> <div class="example"> <p class="text-secondary"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p class="text-small"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <pre class=""><code> <p class="text-secondary">...</p> <p class="text-small">...</p> </code></pre> <h4 id="_paragraph_indents">Indents</h4> <div class="example"> <p class="indent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p class="indent-letter"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <pre class=""><code> <p class='indent'>...</p> <p class='indent-letter'>...</p> </code></pre> <h3 id="_inline_elements">Inline text elements</h3> <p>Styling for common inline HTML5 elements.</p> <div class="example"> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p> </div> <pre class=""><code> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p> </code></pre> <h3 id="_abbr">Abbreviations</h3> <p> Stylized implementation of HTML’s <span class="tally"><abbr></span> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. </p> <div class="example"> <abbr title="this is a abbreviation">Abbreviation</abbr> </div> <pre class=""><code> <abbr title="this is a abbreviation">Abbreviation</abbr> </code></pre> <h3 id="_addr">Address</h3> <p> Stylized implementation of HTML’s <span class="tally"><addr></span> element for creating address. </p> <div class="example"> <address> <strong>Metro 4</strong><br> Khreschatyk str, Suite 1<br> Kiev, Ukraine 01001<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </div> <pre class=""><code> <address> <strong>Metro 4</strong><br> Khreschatyk str, Suite 1<br> Kiev, Ukraine 01001<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </code></pre> <h3 id="_blockquotes">Blockquotes</h3> <p> For quoting blocks of content from another source within your document. </p> <div class="example clear"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote> <blockquote class="place-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote> </div> <pre class=""><code> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <small>Someone famous <cite title="Source Title">Source Title</cite> </small> </blockquote> <blockquote class="place-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <small>Someone famous <cite title="Source Title">Source Title</cite> </small> </blockquote> </code></pre>  <h3 id="_remarks">Remarks</h3> <p> For quoting blocks of content you can add class <code>.remark</code> to block or paragraph. </p> <div class="example"> <div class="remark"> Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger. </div> </div> <pre class=""><code> <div class="remark"> ... </div> </code></pre> <p> In additional you can add accent colors subclasses to remarks: <span class="tally">.primary</span>, <span class="tally">.secondary</span>, <span class="tally">.success</span>, <span class="tally">.alert</span>, <span class="tally">.warning</span>, <span class="tally">.yellow</span>, <span class="tally">.info</span>, <span class="tally">.dark</span>. </p> <div class="example"> <div class="remark primary"> Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger. </div> <div class="remark warning"> Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger. </div> <div class="remark info"> Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger. </div> <div class="remark alert"> Sunt demissioes transferre festus, fortis fugaes. Cauliflower combines greatly with sticky ginger. </div> </div> <pre class=""><code> <div class="remark primary"> ... </div> </code></pre> <h3 id="_lists">Lists</h3> <h4 id="_lists_unstyled">Unstyled list</h4> <div class="example"> <ul class="unstyled-list"> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> <li>Vortexs resistere in mare! <ul class="unstyled-list"> <li>Resistentias cantare!</li> <li>Lacteas volare in camerarius rugensis civitas!</li> <li>Nunquam manifestum genetrix.</li> </ul> </li> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> </ul> </div> <pre class=""><code> <ul class="unstyled-list"> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> <li>Vortexs resistere in mare! <ul class="unstyled-list"> <li>Resistentias cantare!</li> <li>Lacteas volare in camerarius rugensis civitas!</li> <li>Nunquam manifestum genetrix.</li> </ul> </li> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> </ul> </code></pre> <h4 id="_lists_unordered">Unordered list</h4> <div class="example"> <ul> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> <li>Vortexs resistere in mare! <ul> <li>Resistentias cantare!</li> <li>Lacteas volare in camerarius rugensis civitas!</li> <li>Nunquam manifestum genetrix.</li> <li>Pol, a bene diatria, cotta! <ul> <li>Resistentias cantare!</li> <li>Lacteas volare in camerarius rugensis civitas!</li> <li>Nunquam manifestum genetrix.</li> </ul> </li> </ul> </li> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> </ul> </div> <pre class=""><code> <ul> <li>...</li> <li>... <ul> <li>...</li> <li>...</li> </ul> </li> </ul> </code></pre> <h4 id="_lists_ordered">Ordered list</h4> <div class="example"> <ol> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> <li>Est peritus devatio, cesaris. <ol> <li>Resistentias cantare!</li> <li>Lacteas volare in camerarius rugensis civitas!</li> <li>Nunquam manifestum genetrix.</li> <li>Nunquam vitare ratione. <ol> <li>Resistentias cantare!</li> <li>Lacteas volare in camerarius rugensis civitas!</li> <li>Nunquam manifestum genetrix.</li> </ol> </li> </ol> </li> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> </ol> </div> <pre class=""><code> <ol> <li>...</li> <li>... <ol> <li>...</li> <li>...</li> </ol> </li> </ol> </code></pre> <p> You can specified first level number type with classes: <code>decimal</code>, <code>roman-upper</code>, <code>roman-lower</code>, <code>alpha-upper</code>, <code>alpha-lower</code>, <code>latin-upper</code>, <code>latin-lower</code>. </p> <div class="example"> <ol class="decimal"> <li>Sunt tataes consumere talis, emeritis orgiaes.</li> <li>Nunquam transferre plasmator.</li> <li>Heu, germanus calcaria!</li> <li>Est peritus devatio, cesaris. </ol> </div> <pre class=""><code> <ol class="decimal"> <li>...</li> <li>...</li> <li>...</li> </ol> </code></pre> <h4 id="_lists_inline">Inline list</h4> <div class="example"> <ul class="inline-list"> <li>Home</li> <li>Base</li> <li>Widgets</li> <li>Contacts</li> </ul> </div> <pre class=""><code> <ul class="inline-list"> <li>Home</li> <li>Base</li> <li>Widgets</li> <li>Contacts</li> </ul> </code></pre> <h4 id="_lists_desc">Description list</h4> <div class="example"> <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl> </div> <h6>Horizontal style</h6> <div class="example"> <dl class="horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</dd> </dl> </div> <pre class=""><code> <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl> <dl class="horizontal"> ... </dl> </code></pre> <h3 id="_tally">Code</h3> <p> Documentation and examples for displaying inline and multiline blocks of code with Metro 4. </p> <h4 id="_code_inline">Inline code</h4> <p> Wrap inline snippets of code with <code><code></code> or class <code>.tally</code>. Be sure to escape HTML angle brackets. </p> <div class="example"> <code>code</code> <span class="tally">tally</span> <span class="tally success">success</span> <code class="warning">warning</code> <span class="tally alert">alert</span> <code class="info">info</code> <br /> <br /> <p> Yes, there is chaos, it experiments with core. Pestilence, <code class="info">punishment</code>, and strength. <span class="tally">Sunt</span> zirbuses dignus <code class="alert">superbus</code>, clemens cedriumes. <span class="tally success">Gravy</span> soup is just not the same without nutmeg and chopped small meatloafs. </p> </div> <pre class=""><code> <code>code</code> <span class="tally">tally</span> <span class="tally success">success</span> <code class="warning">warning</code> <span class="tally alert">alert</span> <code class="info">info</code> </code></pre> <h4 id="_code_vars">Variables</h4> <p> To create code variable use <code><var></code>. </p> <div class="example"> <var>y</var> = <var>m</var><var>x</var> + <var>b</var> </div> <pre class=""><code> <var>y</var> = <var>m</var><var>x</var> + <var>b</var> </code></pre> <h4 id="_user_input">User input</h4> <p> Use the <code><kbd></code> to indicate input that is typically entered via keyboard. </p> <div class="example"> 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> </div> <pre class=""><code> 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> </code></pre> <h4 id="_sample_output">Sample output</h4> <p> For indicating sample output from a program use the <code><samp></code> tag. </p> <div class="example"> <samp>Sample output from a computer program.</samp> </div> <pre class=""><code> <samp>Sample output from a computer program.</samp> </code></pre>  <h3 id="_ellipsis">Text ellipsis</h3> <div class="example"> <div style="width: 100px;"> <p class="text-ellipsis">For a salted bloody frittata, add some olive oil and green curry.</p> </div> </div> <pre class=""><code> <div style="width: 100px;"> <p class="text-ellipsis">For a salted bloody frittata.</p> </div> </code></pre> <h3 id="_text_transform">Text transform</h3> <p>Easily transform text with text transform classes.</p> <div class="example"> <p class="text-lower">lowercased text</p> <p class="text-upper">UPPERCASED TEXT</p> <p class="text-cap">Capitalized text</p> </div> <pre class=""><code> <p class="text-lower">lowercased text</p> <p class="text-upper">uppercased text</p> <p class="text-cap">сapitalized text</p> </code></pre> <h3 id="_text_alignment">Text alignment</h3> <p>Easily realign text to components with text alignment classes.</p> <div class="example"> <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> </div> <pre class=""><code> <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> </code></pre> <p>If you need to align the text to the width, you can use the class <span class="tally">.text-just</span></p> <div class="example"> <p class="text-just"> It is a remarkable nuclear flux, sir. Poeta resisteres, tanquam rusticus tus. Not hell or chaos, yearn the acceptance. After smashing the turkey, enamel margerine, strudel and gold tequila with it in a plastic bag. It is a remarkable nuclear flux, sir. Poeta resisteres, tanquam rusticus tus. Not hell or chaos, yearn the acceptance. After smashing the turkey, enamel margerine, strudel and gold tequila with it in a plastic bag. </p> </div> <pre class=""><code> <p class="text-just">...</p> </code></pre> <h4>Vertical alignment</h4> <p> To change vertical alignment you can use predefined classes: <span class="tally">.va-top</span>, <span class="tally">.va-bottom</span>, <span class="tally">.va-baseline</span>, <span class="tally">.va-middle</span>, <span class="tally">.va-sub</span>, <span class="tally">.va-super</span>, <span class="tally">.va-text-top</span>, <span class="tally">.va-text-bottom</span> and their media analogues. </p> <p>Transform and alignment classes you can use with media breakpoints rules. For this feature Metro 4 present special media classes: <span class="tally">.text-center-*</span>, <span class="tally">.text-left-*</span>, <span class="tally">.text-right-*</span>, <span class="tally">.text-just-*</span>, <span class="tally">.text-cap-*</span>, <span class="tally">.text-upper-*</span>, <span class="tally">.text-lower-*</span> Replace the asterisk with the desired point: <span class="tally">sm</span>, <span class="tally">md</span>, <span class="tally">lg</span>, <span class="tally">xl</span>, <span class="tally">xxl</span>. This breakpoints works with <span class="tally">min-width</span> rule. </p> <h3 id="_text_weight">Font weight</h3> <p> You can change font weight with special classes: <span class="tally">.text-ultralight</span>, <span class="tally">.text-light</span>, <span class="tally">.text-normal</span>, <span class="tally">.text-medium</span>, <span class="tally">.text-bold</span>. </p> <table class="table striped bordered"> <thead> <tr> <th>Name</th> <th>Weight</th> </tr> </thead> <tbody> <tr> <td><p class="text-ultralight">Ultralight text</p></td> <td>100</td> </tr> <tr> <td><p class="text-light">Light text</p></td> <td>200</td> </tr> <tr> <td><p class="text-normal">Normal text</p></td> <td>400</td> </tr> <tr> <td><p class="text-medium">Medium text</p></td> <td>500</td> </tr> <tr> <td><p class="text-bold">Bold text</p></td> <td>700</td> </tr> </tbody> </table> <h3 id="_responsive">Responsive</h3> <p> Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Metro 4 <strong>doesn’t do this for you</strong>, but it’s fairly easy to add