lists.html.twig in Simple Style Guide 8
<a name="lists"></a>
<h3 class="simple-styleguide--sectionhead">{{ default_pattern }}</h3>
<div class="simple-styleguide">
<div>
<p><strong>Unordered List:</strong></p>
<p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<ul>
<li class="first">lacinia</li>
<li>Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</li>
<li>lobortis</li>
<li>lobortis</li>
<li class="last">erat</li>
</ul>
<p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div>
<p><strong>Ordered List:</strong></p>
<p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<ol>
<li class="first">erat</li>
<li>eros</li>
<li>iaculis</li>
<li>in</li>
<li class="last">sed</li>
</ol>
<p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div>
<p><strong>Nested Lists:</strong></p>
<p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three
<ul>
<li>Nested Item One</li>
<li>Nested Item Two</li>
<li>Nested Item Three</li>
</ul>
</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
<li>Item Seven
<ul>
<li>Nested Item One</li>
<li>Nested Item Two
<ul>
<li>Double Nested Item One</li>
<li>Double Nested Item Two</li>
<li>Double Nested Item Three</li>
</ul>
</li>
<li>Nested Item Three</li>
</ul>
</li>
<li>Item Eight</li>
<li>Item Nine</li>
<li>Item Ten</li>
</ul>
<p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three
<ul>
<li>Nested Item One</li>
<li>Nested Item Two</li>
<li>Nested Item Three</li>
</ul>
</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
<li>Item Seven
<ul>
<li>Nested Item One</li>
<li>Nested Item Two
<ul>
<li>Double Nested Item One</li>
<li>Double Nested Item Two</li>
<li>Double Nested Item Three</li>
</ul>
</li>
<li>Nested Item Three</li>
</ul>
</li>
<li>Item Eight</li>
<li>Item Nine</li>
<li>Item Ten</li>
</ol>
<p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
</div>
</div>
File
templates/includes/lists.html.twig
View source
- <a name="lists"></a>
-
- <h3 class="simple-styleguide--sectionhead">{{ default_pattern }}</h3>
-
- <div class="simple-styleguide">
- <div>
- <p><strong>Unordered List:</strong></p>
- <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- <ul>
- <li class="first">lacinia</li>
- <li>Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</li>
- <li>lobortis</li>
- <li>lobortis</li>
- <li class="last">erat</li>
- </ul>
- <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- </div>
-
- <div>
- <p><strong>Ordered List:</strong></p>
- <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- <ol>
- <li class="first">erat</li>
- <li>eros</li>
- <li>iaculis</li>
- <li>in</li>
- <li class="last">sed</li>
- </ol>
- <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
- </div>
-
- <div>
- <p><strong>Nested Lists:</strong></p>
- <p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
- <ul>
- <li>Item One</li>
- <li>Item Two</li>
- <li>Item Three
- <ul>
- <li>Nested Item One</li>
- <li>Nested Item Two</li>
- <li>Nested Item Three</li>
- </ul>
- </li>
- <li>Item Four</li>
- <li>Item Five</li>
- <li>Item Six</li>
- <li>Item Seven
- <ul>
- <li>Nested Item One</li>
- <li>Nested Item Two
- <ul>
- <li>Double Nested Item One</li>
- <li>Double Nested Item Two</li>
- <li>Double Nested Item Three</li>
- </ul>
- </li>
- <li>Nested Item Three</li>
- </ul>
- </li>
- <li>Item Eight</li>
- <li>Item Nine</li>
- <li>Item Ten</li>
- </ul>
- <p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
- <ol>
- <li>Item One</li>
- <li>Item Two</li>
- <li>Item Three
- <ul>
- <li>Nested Item One</li>
- <li>Nested Item Two</li>
- <li>Nested Item Three</li>
- </ul>
- </li>
- <li>Item Four</li>
- <li>Item Five</li>
- <li>Item Six</li>
- <li>Item Seven
- <ul>
- <li>Nested Item One</li>
- <li>Nested Item Two
- <ul>
- <li>Double Nested Item One</li>
- <li>Double Nested Item Two</li>
- <li>Double Nested Item Three</li>
- </ul>
- </li>
- <li>Nested Item Three</li>
- </ul>
- </li>
- <li>Item Eight</li>
- <li>Item Nine</li>
- <li>Item Ten</li>
- </ol>
- <p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
- </div>
- </div>