styles.scss
, line 4
1.1 typography.headings Headings
Only h1-h3 elements should be used.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup: base/headings/headings.twig
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
base/headings/headings.scss
, line 1
1.2 typography.links Link
Simple link is being used in several places.
Markup: base/links/links.twig
<a href="#" class="{{ modifier_class }}">Link</a>
base/links/links.scss
, line 4
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.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Suspendisse pretium nulla nec enim consectetur, eu lacinia eros dignissim. Aliquam venenatis quis libero ut mattis. Sed pretium, nisi non lacinia laoreet, magna lectus finibus diam, at laoreet turpis est et neque.
Class aptent taciti sociosqu ad litora torquent per conubia nostra
Donec a quam et libero ullamcorper vehicula in quis massa.
Markup: base/body/body.twig
<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>
<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>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p><em>Suspendisse pretium nulla nec enim consectetur, eu lacinia eros dignissim. Aliquam venenatis quis libero ut mattis. Sed pretium, nisi non lacinia laoreet, magna lectus finibus diam, at laoreet turpis est et neque.</em></p>
<p><strong> Class aptent taciti sociosqu ad litora torquent per conubia nostra</strong></p>
<p><strong><em>Donec a quam et libero ullamcorper vehicula in quis massa.</em></strong></p>
base/body/body.scss
, line 1
base/list/list.scss
, line 1
1.4.1 typography.lists.ordered Ordered lists
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Markup: base/list/ordered.twig
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit
<ol>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ol>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
base/list/list.scss
, line 22
1.4.2 typography.lists.unordered Unordered lists
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Markup: base/list/unordered.twig
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</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>
base/list/list.scss
, line 13