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.
Waistcoat portland phlogiston▼ retro organic.
8-bit neutra microdosing cray 3 wolf moon. Before they sold out bespoke hoodie kogi. Keytar poutine health ethical master echo slow-carb▼ Gentrify kitsch lomo thundercats portland chicharrones chia art party. Loko messenger bag keytar gastropub deep v.
Waistcoat portland phlogiston▼ retro organic.<!-- Flow content -->
<h1>
Waistcoat portland phlogiston<sup class="vi-type vi-type--black-triangle">▼</sup>
retro organic.
</h1>
<p>
8-bit neutra microdosing cray 3 wolf moon. Before they sold out bespoke hoodie kogi. Keytar poutine health ethical master echo slow-carb<sup class="vi-type vi-type--black-triangle">▼</sup>
Gentrify kitsch lomo thundercats portland chicharrones chia art party. Loko messenger bag keytar gastropub deep v.
</p>
<!-- Phrasing content -->
<a href="#">
Waistcoat portland phlogiston<sup class="vi-type vi-type--black-triangle">▼</sup>
retro organic.
</a>
<br>
<label>
Waistcoat portland phlogiston<sup class="vi-type vi-type--black-triangle">▼</sup>
retro organic.
</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)