Typography
The Typography component provides a limited set of type sizes that work well together for a consistent layout.
Headers
Body
Heading 600
Heading 500
Heading 400
Heading 300
Heading 200
Heading 100
Text 500
Text 400
Text 300
Text 200
Text 100
Code
<!-- Headers -->
<h1 class="bo-heading-600">Heading 600</h1>
<h2 class="bo-heading-500">Heading 500</h2>
<h3 class="bo-heading-400">Heading 400</h3>
<h4 class="bo-heading-300">Heading 300</h4>
<h5 class="bo-heading-200">Heading 200</h5>
<h6 class="bo-heading-100">Heading 100</h6>
<!-- Body -->
<p class="bo-text-500">Text 500</p>
<p class="bo-text-400">Text 400</p>
<p class="bo-text-300">Text 300</p>
<p class="bo-text-200">Text 200</p>
<p class="bo-text-100">Text 100</p>
| Class name | type | |
|---|---|---|
| bo-text-100 | modifier | Text variant |
| bo-text-200 | modifier | Text variant |
| bo-text-300 | modifier | Text variant |
| bo-text-400 | modifier | Text variant |
| bo-text-500 | modifier | Text variant |
| bo-heading-100 | modifier | Heading variant |
| bo-heading-200 | modifier | Heading variant |
| bo-heading-300 | modifier | Heading variant |
| bo-heading-400 | modifier | Heading variant |
| bo-heading-500 | modifier | Heading variant |
| bo-heading-600 | modifier | Heading variant |