Text
Some useful utility classes relating to text.
Usage
The text utility classes must always be used with a modifier (eg. .c-text--lead), on it's own the base
class .c-text does nothing.
.c-text--lead- Gives increased prominence for the lead paragraph of some copy
.c-text--disabled- Styles text to appear disabled.
.c-text--break- Allow copy to break words in order to fill available space.
.c-text--noWrap- Stops copy from wrapping
.c-text--truncate- Will truncate text with an ellipsis when it exceeds available space.
.c-text--center- Centre aligns text
.c-text--left- Left aligns text
.c-text--right- Right aligns text
.c-text--justify- Justifies text alignment
.c-text--inheritColor- Inherits the color of the parent element
.c-text--resetLink- Overrides link styles to make appear link the parents style
.c-text--kern- Enables font kerning (all supported browsers except Chrome on Windows)
Examples
Text lead
<p class="c-text--lead">Here is some lead text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus augue, euismod venenatis placerat a, volutpat vel nisl. Suspendisse vitae nunc vehicula, iaculis diam ac, lacinia erat.</p>Here is some lead text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus augue, euismod venenatis placerat a, volutpat vel nisl. Suspendisse vitae nunc vehicula, iaculis diam ac, lacinia erat.
Text disabled
<p class="c-text--disabled">This text is disabled</p>This text is disabled
Text break
<div style="width: 40px;">
<p class="c-text--break">Oooooops this extremely long text is too long!</p>
</div>
Oooooops this extremely long text is too long!
Text no-wrap
<div style="width: 40px;">
<p class="c-text--noWrap">Oooooops this extremely long text is too long!</p>
</div>
Oooooops this extremely long text is too long!
Text truncate
<div style="width: 40px;">
<p class="c-text--truncate">Oooooops this extremely long text is too long!</p>
</div>Oooooops this extremely long text is too long!
Align text left
<div style="width: 40px;">
<p class="c-text--left">c-text aligned left</p>
</div>c-text aligned left
Align text center
<div style="width: 40px;">
<p class="c-text--center">c-text aligned center</p>
</div>c-text aligned center
Align text right
<div style="width: 40px;">
<p class="c-text--right">c-text aligned right</p>
</div>c-text aligned right
Justify text
<div style=width:100%; background:#ccc; padding:1rem;">
<p class="c-text--justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis, leo ac iaculis finibus, orci sem sollicitudin sem, ut blandit tellus quam non tortor. Aenean ut libero sagittis, bibendum diam in, aliquam magna. Morbi in vestibulum metus, vel bibendum tortor. In lobortis tellus nec tincidunt porta. Fusce consequat ligula et pulvinar ornare. Curabitur risus tellus, condimentum at lacus eu, tincidunt fermentum metus. Fusce finibus placerat dapibus. Donec imperdiet tempus turpis, in feugiat magna imperdiet vitae.</p>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis, leo ac iaculis finibus, orci sem sollicitudin sem, ut blandit tellus quam non tortor. Aenean ut libero sagittis, bibendum diam in, aliquam magna. Morbi in vestibulum metus, vel bibendum tortor. In lobortis tellus nec tincidunt porta. Fusce consequat ligula et pulvinar ornare. Curabitur risus tellus, condimentum at lacus eu, tincidunt fermentum metus. Fusce finibus placerat dapibus. Donec imperdiet tempus turpis, in feugiat magna imperdiet vitae.
Add font kerning
<div style=width:100%; background:#ccc; padding:1rem;">
<p class="c-text--kern">Add text kerning.</p>
</div>Add text kerning.