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
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>
Details
| Attribute | Type | Description |
|---|---|---|
| .bo-heading-600 | utility | Class used for the heading 600 utility |
| .bo-heading-500 | utility | Class used for the heading 500 utility |
| .bo-heading-400 | utility | Class used for the heading 400 utility |
| .bo-heading-300 | utility | Class used for the heading 300 utility |
| .bo-heading-200 | utility | Class used for the heading 200 utility |
| .bo-heading-100 | utility | Class used for the heading 100 utility |
| .bo-text-500 | utility | Class used for the text 500 utility |
| .bo-text-400 | utility | Class used for the text 400 utility |
| .bo-text-300 | utility | Class used for the text 300 utility |
| .bo-text-200 | utility | Class used for the text 200 utility |
| .bo-text-100 | utility | Class used for the text 100 utility |