Inline typography styles
‹ BackAlong 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:
<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.
<span class="type--ellipsis">Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.Loremipsumdolorsitamet,consecteturadipisicingelit.Nobisquamdoloremeaquisquamatfugiatnostrumquoquidemestexcepturi.</span>