Inline typography styles

‹ Back

Along with the content classes above, we have some element styling out of the box to make marking up your document easier. Unlike headings, these tags are usually used in specific-enough situations that styling should be assumed:

Sizing and decorations

Regular text with a link

Small text with a link

Deleted text with a link

Superscript with a link

Subscript with a link

<p>Regular text with <a href="#">a link</a></p>
<p><small>Small text with <a href="#">a link</a></small></p>
<p><del>Deleted text with <a href="#">a link</a></del></p>
<p><sup>Superscript with <a href="#">a link</a></sup></p>
<p><sub>Subscript with <a href="#">a link</a></sub></p>

Colouring

Just like the background helpers, there are text-colour helpers too:

.type--primary with a link

.type--passive with a link

.type--grey with a link

.type--success with a link

.type--error with a link

.type--alert with a link

.type--notice with a link

<p class="type--primary">.type--primary with <a href="#">a link</a></p>
<p class="type--passive">.type--passive with <a href="#">a link</a></p>
<p class="type--grey">.type--grey with <a href="#">a link</a></p>
<p class="type--success">.type--success with <a href="#">a link</a></p>
<p class="type--error">.type--error with <a href="#">a link</a></p>
<p class="type--alert">.type--alert with <a href="#">a link</a></p>
<p class="type--notice">.type--notice with <a href="#">a link</a></p>

Other inline helpers

If you have a crazy long word that is just breaking everything, you can add .type--wrap on the text to force wrap it:

Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi. 
<span class="type--wrap">Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.</span>

Alternatively instead of wrapping it you can truncate it with the .type--ellipsis class.

Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi. 
<span class="type--ellipsis">Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.</span>