Typography

Variant

Variant h1

<!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h1" data-uid="699cd5263f63d">
    Variant h1
</p>

@typography([
    "variant" => "h1"
])
    Variant h1
@endtypography

Element

Element h1

<!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h1 class="c-typography c-typography__variant--h1" data-uid="699cd5263f6bc">
    Element h1
</h1>

@typography([
    "element" => "h1",
])
    Element h1
@endtypography

Heading Variants

Variant: h1

Variant: h2

Variant: h3

Variant: h4

Variant: h5

Variant: h6

<!-- typography.blade.php  (hasSeenH1)  original: h1 -->
<h2 class="c-typography c-typography__variant--h1" data-uid="699cd5263f73e">
    Variant: h1
</h2>        <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="699cd5263f772">
    Variant: h2
</h2>        <!-- typography.blade.php  (hasSeenH1)  original: h3 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="699cd5263f7a2">
    Variant: h3
</h3>        <!-- typography.blade.php  (hasSeenH1)  original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="699cd5263f7cf">
    Variant: h4
</h4>        <!-- typography.blade.php  (hasSeenH1)  original: h5 -->
<h5 class="c-typography c-typography__variant--h5" data-uid="699cd5263f7fb">
    Variant: h5
</h5>        <!-- typography.blade.php  (hasSeenH1)  original: h6 -->
<h6 class="c-typography c-typography__variant--h6" data-uid="699cd5263f825">
    Variant: h6
</h6>

{{-- Document heading levels (h1-h6) --}}
@php
$variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => $variant,
        "variant" => $variant,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Display Variants

Variant: headline

Variant: title

Variant: subtitle

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--headline" data-uid="699cd5263f888">
    Variant: headline
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--title" data-uid="699cd5263f8b4">
    Variant: title
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--subtitle" data-uid="699cd5263f8de">
    Variant: subtitle
</div>

{{-- Document display text variants (headline, title, subtitle) --}}
@php
$variants = ['headline', 'title', 'subtitle'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => 'div',
        "variant" => $variant,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Body Text Variants

Variant: body

Variant: p

Variant: bold

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--body" data-uid="699cd5263f93e">
    Variant: body
</div>        <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--p" data-uid="699cd5263f96a">
    Variant: p
</p>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--bold" data-uid="699cd5263f994">
    Variant: bold
</div>

{{-- Document body text variants (body, p, bold) --}}
@php
$variants = ['body', 'p', 'bold'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => $variant === 'p' ? 'p' : 'div',
        "variant" => $variant,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Small Text Variants

Variant: caption

Variant: byline

Variant: meta

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--caption" data-uid="699cd5263f9f2">
    Variant: caption
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--byline" data-uid="699cd5263fa1c">
    Variant: byline
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--meta" data-uid="699cd5263fa45">
    Variant: meta
</div>

{{-- Document small text variants (caption, byline, meta) --}}
@php
$variants = ['caption', 'byline', 'meta'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => 'div',
        "variant" => $variant,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Specialized Variants

Variant: marketing

Variant: email

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--marketing" data-uid="699cd5263faa1">
    Variant: marketing
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--email" data-uid="699cd5263facb">
    Variant: email
</div>

{{-- Document specialized text variants (marketing, email) --}}
@php
$variants = ['marketing', 'email'];
@endphp

@foreach($variants as $variant)
    @typography([
        "element" => 'div',
        "variant" => $variant,
    ])
        Variant: {{ $variant }}
    @endtypography
@endforeach

Blade component parameters

Key	Default value	Type	Available values	Description
element	p	string	-	What element the markup will use.
variant	false	boolean	-	Headings (h1, h2...) can only be set to other headings. If left empty it will default to the given element.
slot		string	-	The content
autopromote	false	boolean	-	Upgrade element to h1 (from h3 and above), if seen first on page.
useHeadingsContext	true	boolean	-	If a heading should be based off of the context its in.
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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/typography.json