Source of file typography.php
Size: 15,295 Bytes - Last Modified: 2021-12-24T07:20:59+00:00
/var/www/docs.ssmods.com/process/src/public/typography.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327 | <? include("header.php")?> <div class="page secondary"> <div class="page-header"> <div class="page-header-content"> <h1>Typography<small>demo</small></h1> <a href="/" class="back-button big page-back"></a> </div> </div> <div class="page-region"> <div class="page-region-content"> <h1>H1. Heading 1</h1> <h2>H2. Heading 2</h2> <h3>H3. Heading 3</h3> <h4>H4. Heading 4</h4> <h5>H5. Heading 5</h5> <h6>H6. Heading 6</h6> <p>All HTML headings, <code><h1></code> through <code><h6></code> are available.</p> <a class="navigation-text" href="#">Navigation</a> <p class="tertiary-text">use navigation-text class for creating menu <code><a class="navigation-text" /></code></p> <a href="#">Link</a> <h2>body-text and default paragraph</h2> <pre class="prettyprint linenums"> <p>...</p> <div class="body-text">...</div> </pre> <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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <h2>body-secondary-text</h2> <pre class="prettyprint linenums"> <p class="body-secondary-text">...</p> </pre> <p class="body-secondary-text"> Pellentesque laoreet molestie lacus sit amet tempor. Quisque eget felis augue, non egestas dui. Curabitur id nulla tortor, nec tincidunt libero. Donec placerat diam sed massa commodo quis auctor mauris consectetur. In luctus pharetra rhoncus. Etiam tristique arcu eget neque dignissim suscipit. In hac habitasse platea dictumst. </p> <h2>long-text</h2> <small>Use this class to display large amounts of text, such as the contents of books or magazines.</small> <pre class="prettyprint linenums"> <p class="long-text">...</p> </pre> <p class="long-text"> Regular Pellentesque laoreet molestie lacus sit amet tempor. Quisque eget felis augue, non egestas dui. Curabitur id nulla tortor, nec tincidunt libero. Donec placerat diam sed massa commodo quis auctor mauris consectetur. In luctus pharetra rhoncus. Etiam tristique arcu eget neque dignissim suscipit. In hac habitasse platea dictumst. </p> <h2>paragraph with .indent class</h2> <pre class="prettyprint linenums"> <p class="indent">...</p> </pre> <p class="indent"> Aenean porttitor, purus eget egestas pellentesque, sapien mi feugiat massa, quis malesuada ante nisl ac orci. Curabitur at lacus mauris. Sed tincidunt scelerisque tortor, id convallis enim auctor a. Mauris pharetra, lectus nec rutrum venenatis, neque nunc elementum libero, at feugiat justo ipsum at orci. </p> <p class="indent"> Sed iaculis quam a nisl porttitor et cursus mauris porttitor. Vestibulum gravida posuere lacus id tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum blandit, nibh ac molestie viverra, libero orci venenatis felis, ornare facilisis magna leo at ligula. </p> <h2>tertiary-text</h2> <pre class="prettyprint linenums"> <p class="tertiary-text">...</p> </pre> <p class="tertiary-text"> Integer tempor molestie aliquet. Aliquam erat volutpat. Praesent in ultricies erat. Vivamus dolor purus, posuere quis accumsan ac, hendrerit sit amet lorem. Phasellus non risus mi. Integer libero metus, egestas ut tincidunt sit amet, auctor eget nisl. Sed tortor massa, adipiscing sed aliquet tempor, cursus quis est. Proin id neque pharetra arcu consequat laoreet. Nullam pretium faucibus congue. In erat mauris, viverra in tempus vestibulum, dictum ac nibh. Integer ullamcorper velit vitae lacus semper ut mollis mauris tincidunt. Phasellus malesuada urna et augue bibendum viverra. Curabitur dui nulla, luctus eu vulputate eget, congue at metus. </p> <h2>tertiary-secondary-text</h2> <pre class="prettyprint linenums"> <p class="tertiary-secondary-text">...</p> </pre> <p class="tertiary-secondary-text"> Suspendisse eu magna tellus, sit amet facilisis tortor. Aliquam posuere placerat rhoncus. Donec egestas lectus vitae mauris volutpat et imperdiet neque fringilla. Cras dictum dui ac turpis vestibulum et posuere nibh ornare. Donec mattis odio quis mi dictum malesuada eu a tellus. Praesent nisl magna, pellentesque ac pharetra vel, varius ac est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Praesent consequat sem commodo tortor facilisis quis consectetur urna varius. </p> <div class="grid"> <div class="row"> <div class="span3"> <h2>Small text</h2> <pre class="prettyprint linenums"> <small>...</small> </pre> <p> <small>This is a small text</small>. </p> </div> <div class="span4"> <h2>Bold text</h2> <pre class="prettyprint linenums"> <strong>...</strong> </pre> <p> <strong>This is a strong text</strong>. </p> </div> <div class="span3"> <h2>Italic text</h2> <pre class="prettyprint linenums"> <em>...</em> </pre> <p> <em>This is a italicized text</em>. </p> </div> </div> </div> <h2>Abbreviations</h2> <pre class="prettyprint linenums"> <abbr title="Title of abbreviation">...</abbr> </pre> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language" class="initialism">html</abbr> is the best thing since sliced bread.</p> <h2>Address</h2> <pre class="prettyprint linenums"> <address> ... </address> </pre> <address> <strong>Company, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@gmail.com</a> </address> <h2>Blockquote</h2> <pre class="prettyprint linenums"> <blockquote> ... </blockquote> </pre> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <h2>Blockquote to left</h2> <pre class="prettyprint linenums"> <blockquote> ... <small>...</small> </blockquote> </pre> <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> <h2>Blockquote to right</h2> <pre class="prettyprint linenums"> <blockquote class="place-right"> ... <small>...</small> </blockquote> </pre> <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> <h2>Lists</h2> <div class="grid"> <div class="row"> <div class="span3"> <h3>Unordered list</h3> <pre class="prettyprint linenums"> <ul> <li>...</li> </ul> </pre> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul> </div> <div class="span3"> <h3>Ordered list</h3> <pre class="prettyprint linenums"> <ol> <li>...</li> </ol> </pre> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ol> </div> <div class="span4"> <h3>Unstyled list</h3> <pre class="prettyprint linenums"> <ul class="unstyled"> <li>...</li> </ul> </pre> <ul class="unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul> </div> </div> <div class="row"> <div class="span10"> </div> </div> </div> <h2>Labels</h2> <table class="bordered striped"> <thead> <tr> <td>Label type</td> <td>Label definition</td> </tr> </thead> <tbody> <tr> <td width="120"><span class="label">Default</span></td> <td><code><span class="label">Default</span></code></td> </tr> <tr> <td><span class="label success">Success</span></td> <td><code><span class="label success">Success</span></code></td> </tr> <tr> <td><span class="label warning">Warning</span></td> <td><code><span class="label warning">Warning</span></code></td> </tr> <tr> <td><span class="label important">Important</span></td> <td><code><span class="label important[error]">Important</span></code></td> </tr> <tr> <td><span class="label info">Info</span></td> <td><code><span class="label info">Info</span></code></td> </tr> <tr> <td><span class="label inverse">Inverse</span></td> <td><code><span class="label inverse">Inverse</span></code></td> </tr> </tbody> </table> <p> <span class="label important">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> </div> </div> <?php include("footer.php")?> |