Basic Text
The basic text component is used to restrict basic text styles.
Note:
Heading classes can be applied to any heading element to give it the correct size while keeping the correct semantic element. I.E. "I need an h3 but it has to look like an h4".
.basic-text-h2.basic-text-h3.basic-text-h4.basic-text-h5.basic-text-h6
Additional modifier classes:
.basic-text-margin-smBumps the bottom margin down by half.
This is an h2
Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec tristique varius tortor, a rutrum mauris rhoncus venenatis.
- Etiam ac mauris vitae ante vulputate convallis non eu orci.
This is an h3
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.1 Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec tristique varius tortor, a rutrum mauris rhoncus venenatis.
- Etiam ac mauris vitae ante vulputate convallis non eu orci.
This is an h4
Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod2. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor.
This is an h5
SEtiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.
This is an h6
Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
{{ attach_library('h4h_theme/basic-text') }}
<div class="basic-text">
<h2 class="basic-text__heading">{{ heading_2 }}</h2>
<p>{{ paragraph_1 }}</p>
<ul>
{% for item in unordered_list.items %}
<li>{{ item.desc }}</li>
{% endfor %}
</ul>
<h3>{{ heading_3 }}</h3>
<p>{{ paragraph_2 }}</p>
<ol>
{% for item in unordered_list.items %}
<li>{{ item.desc }}</li>
{% endfor %}
</ol>
<h4>{{ heading_4 }}</h4>
<p>{{ paragraph_3 }}</p>
<h5>{{ heading_5 }}</h5>
<p>{{ paragraph_4 }}</p>
<h6>{{ heading_6 }}</h6>
<p>{{ paragraph_1 }}</p>
</div>