UNPKG

patternpack-example-library

Version:
197 lines (91 loc) 3.92 kB
<!DOCTYPE html> <html> <head> <link href="../assets/css/patterns.css" rel="stylesheet" /> <link href="../assets/../theme-assets/css/patternpack-theme.css" rel="stylesheet" /> <link href="../assets/../theme-assets/css/github.css" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Article Template</title> </head> <body> <div id="libraryContainer" class="library__container"> <header class="library__header"> <a href="/"> <img src="http://placehold.it/200x60&text=logo" class="library__header__logo"> </span> <span class="library__header__title">Pattern Library</span> </a> <div id="menuToggle" class="library__header__menu-toggle__container"> <div class="library__header__toggle">Menu</div> </div> </header> <div id="libraryContent" class="library__content"> <div class="library__content__open-overlay"></div> <div class="markdown__body"> <h2 id="article-template">Article Template</h2> <p>TODO: Describe what an article template 1 is and how it is used in the application.</p> <h3 id="examples">Examples</h3> <section> <article> <h2>Article title goes here</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla massa velit, mattis sollicitudin augue fringilla eget. Vivamus viverra lectus non dignissim bibendum. Duis ante ex, mollis sed est et, rhoncus sollicitudin tellus. Ut nibh dui, aliquet in rutrum pretium, consequat et ipsum. Morbi ullamcorper arcu vitae eros tempor scelerisque. Curabitur mi libero, accumsan nec lectus sit amet, lacinia porttitor ipsum. Mauris quis elementum lacus, vitae lobortis turpis. Phasellus laoreet lacinia interdum. </p> </article> <footer> By: <a rel="author" href="mailto:johndoe@example.com">Jon Doe</a> <time>1/1/2015 11:00am</time> </footer> </section> <h3 id="code">Code</h3> <pre><code class="language-html">&lt;section&gt; &lt;article&gt; &lt;h2&gt;&lt;/h2&gt; &lt;p&gt; &lt;/p&gt; &lt;article&gt; &lt;footer&gt; By: &lt;a rel=&quot;author&quot; href=&quot;mailto:&quot;&gt;&lt;a&gt; &lt;time&gt;&lt;/time&gt; &lt;/footer&gt; &lt;/section&gt;</code></pre> </div> </div> </div> <nav class="library__nav"> <h2> <a href=" ../atoms/index.html ">Atoms</a> </h2> <ul> <li> <a href="../atoms/buttons.html">Buttons</a> </li> <li> <a href="../atoms/colors.html">Colors</a> </li> <li> <a href="../atoms/forms.html">Forms</a> </li> <li> <a href="../atoms/headings.html">Headings</a> </li> <li> <a href="../atoms/typography.html">Typography</a> </li> </ul> <h2> <a href=" ../molecules/index.html ">Molecules</a> </h2> <ul> <li> <a href="../molecules/nav.html">Navigation</a> </li> </ul> <h2> <a href=" index.html ">Pages</a> </h2> <ul> <li> <a href="article-template.html">Article Template</a> </li> <li> <a href="home-page.html">Home Page</a> </li> </ul> </nav> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="../assets/../theme-assets/js/PatternPack.Global.Navigation.js"></script> </body> </html>