Type
The Type component contains classes to style textual elements according to the type sheet definition and contains other typographic elements (e.g. Black Triangle).
Type sheet
The type sheet modifiers only define size and line-height.
Colors are set with color utility classes:
.text-dominant.text-accent-1.text-accent-2.text-white.text-neutral-50
Font-weight set by font-weight utility class .font-weight-bold
Following modifiers are defined:
--header-large--header-big--header-medium--header-regular--header-small--header-tiny--text-big--text-regular--text-small--text-tiny--text-micro--text-nano
Following examples show modifiers in the allowed colors.
Header Large
Header Large
<!-- Type (mods: --header-large) -->
<p class="text-dominant vi-type vi-type--header-large">Header Large
</p>
<!-- Type (mods: --header-large) -->
<p class="text-white vi-type vi-type--header-large">Header Large
</p>Header Big
Header Big
<!-- Type (mods: --header-big) -->
<p class="text-dominant vi-type vi-type--header-big">Header Big
</p>
<!-- Type (mods: --header-big) -->
<p class="text-white vi-type vi-type--header-big">Header Big
</p>Header Medium
Header Medium
<!-- Type (mods: --header-medium) -->
<p class="text-dominant vi-type vi-type--header-medium">Header Medium
</p>
<!-- Type (mods: --header-medium) -->
<p class="text-white vi-type vi-type--header-medium">Header Medium
</p>Header Regular
Header Regular
<!-- Type (mods: --header-regular) -->
<p class="text-dominant vi-type vi-type--header-regular">Header Regular
</p>
<!-- Type (mods: --header-regular) -->
<p class="text-white vi-type vi-type--header-regular">Header Regular
</p>Header Small
Header Small
<!-- Type (mods: --header-small) -->
<p class="text-dominant vi-type vi-type--header-small">Header Small
</p>
<!-- Type (mods: --header-small) -->
<p class="text-white vi-type vi-type--header-small">Header Small
</p>Header Tiny
Header Tiny
Header Tiny
Header Tiny
<!-- Type (mods: --header-tiny) -->
<p class="text-dominant vi-type vi-type--header-tiny">Header Tiny
</p>
<!-- Type (mods: --header-tiny) -->
<p class="text-accent-1 vi-type vi-type--header-tiny">Header Tiny
</p>
<!-- Type (mods: --header-tiny) -->
<p class="text-accent-2 vi-type vi-type--header-tiny">Header Tiny
</p>
<!-- Type (mods: --header-tiny) -->
<p class="text-white vi-type vi-type--header-tiny">Header Tiny
</p>Text Big
<!-- Type (mods: --text-big) -->
<p class="text-dominant vi-type vi-type--text-big">Text Big
</p>Text Regular
Text Regular
Text Regular
Text Regular
Text Regular
<!-- Type (mods: --text-regular) -->
<p class="text-dominant vi-type vi-type--text-regular">Text Regular
</p>
<!-- Type (mods: --text-regular) -->
<p class="text-accent-2 vi-type vi-type--text-regular">Text Regular
</p>
<!-- Type (mods: --text-regular) -->
<p class="text-white vi-type vi-type--text-regular">Text Regular
</p>
<!-- Type (mods: --text-regular) -->
<p class="text-dominant font-weight-bold vi-type vi-type--text-regular">Text Regular
</p>
<!-- Type (mods: --text-regular) -->
<p class="text-accent-2 font-weight-bold vi-type vi-type--text-regular">Text Regular
</p>Text Small
Text Small
Text Small
Text Small
<!-- Type (mods: --text-small) -->
<p class="text-dominant vi-type vi-type--text-small">Text Small
</p>
<!-- Type (mods: --text-small) -->
<p class="text-accent-1 vi-type vi-type--text-small">Text Small
</p>
<!-- Type (mods: --text-small) -->
<p class="text-accent-2 vi-type vi-type--text-small">Text Small
</p>
<!-- Type (mods: --text-small) -->
<p class="text-white vi-type vi-type--text-small">Text Small
</p>Text Tiny
Text Tiny
Text Tiny
<!-- Type (mods: --text-tiny) -->
<p class="text-accent-2 vi-type vi-type--text-tiny">Text Tiny
</p>
<!-- Type (mods: --text-tiny) -->
<p class="text-white vi-type vi-type--text-tiny">Text Tiny
</p>
<!-- Type (mods: --text-tiny) -->
<p class="text-neutral-50 vi-type vi-type--text-tiny">Text Tiny
</p>Text Micro
<!-- Type (mods: --text-micro) -->
<p class="text-accent-2 vi-type vi-type--text-micro">Text Micro
</p>Text Nano
<!-- Type (mods: --text-nano) -->
<p class="text-accent-2 vi-type vi-type--text-nano">Text Nano
</p>Other
Other typographic elements
Black Triangle #
The black triangle appearing after the trade name of a British medicine (or vaccine) indicates that the medication is new to the market, or that an existing medicine (or vaccine) is being used for a new reason or by a new route of administration.
Flannel goth semiotics▼ pour-over kickstarter.
Helvetica pitchfork brunch ennui tousled blue bottle tilde. Roof occupy single-origin coffee tilde plaid before they sold out photo booth mixtape. Direct trade hoodie etsy 90's offal. Mumblecore muggle magic flannel heirloom fingerstache. Narwhal messenger bag synth swag paleo neutra kogi▼ Single-origin coffee tumblr yuccie banjo offal banh mi. Disrupt health helvetica kale chips craft beer celiac green juice. Jean shorts echo before they sold out ennui readymade.
Flannel goth semiotics▼ pour-over kickstarter.<!-- Flow content -->
<h1>
Flannel goth semiotics<sup class="vi-type vi-type--black-triangle">▼</sup>
pour-over kickstarter.
</h1>
<p>
Helvetica pitchfork brunch ennui tousled blue bottle tilde. Roof occupy single-origin coffee tilde plaid before they sold out photo booth mixtape. Direct trade hoodie etsy 90's offal. Mumblecore muggle magic flannel heirloom fingerstache. Narwhal messenger bag synth swag paleo neutra kogi<sup class="vi-type vi-type--black-triangle">▼</sup>
Single-origin coffee tumblr yuccie banjo offal banh mi. Disrupt health helvetica kale chips craft beer celiac green juice. Jean shorts echo before they sold out ennui readymade.
</p>
<!-- Phrasing content -->
<a href="#">
Flannel goth semiotics<sup class="vi-type vi-type--black-triangle">▼</sup>
pour-over kickstarter.
</a>
<br>
<label>
Flannel goth semiotics<sup class="vi-type vi-type--black-triangle">▼</sup>
pour-over kickstarter.
</label>Stylesheets #
The following stylesheet is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Changed
- Black rectangular to better fit Teva Sans
Added
- Initial draft
Fix
- 6 Dec 2022 - Black triangle must work in gradient text environments. (text-fill-color)