Typography

Variant

In this case, variant is set to h1 and element parameter is left untouched. This results in a <p> element that looks like h5 element.

Variant h1

<!-- typography.blade.php  -->
<p id="62bec553a0b29" class="c-typography c-typography__variant--h1" data-uid="62bec553a0b21">
    Variant h1
</p>
@typography([
    "variant" => "h1"
])
    Variant h1
@endtypography

Element

When the parameter element is set and the variant element is not, the result is a p element that looks like a <h1> element.

Element h1

<!-- typography.blade.php  -->
<h1 id="62bec553a0ded" class="c-typography c-typography__variant--p" data-uid="62bec553a0de8">
    Element h1
</h1>
@typography([
    "element" => "h1",
])
    Element h1
@endtypography

Blade component parameters

Key Default value Type Available values Description
variant p string - What element the component should base its looks off of.
element p string - What element the markup will use.
slot string - The content
autopromote false boolean - Upgrade element to h1 (from h3 and above), if seen first on page.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Typography/typography.json