Municipio Styleguide

Typography

The Typography component provides a reusable pattern for typography in the interface.

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   original: p -->
<p class="c-typography c-typography__variant--h1" data-uid="69f0d0c306c3b" data-component="typography">
    Variant h1
</p>

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  (hasSeenH1)  original: h1 -->
<h1 class="c-typography c-typography__variant--h1" data-uid="69f0d0c306f5c" data-component="typography">
    Element h1
</h1>

Heading Variants

Standard HTML heading levels from h1 to h6. These are semantic elements that define the document structure and hierarchy.

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="69f0d0c307340" data-component="typography">
    Variant: h1
</h2>        <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="69f0d0c30738a" data-component="typography">
    Variant: h2
</h2>        <!-- typography.blade.php  (hasSeenH1)  original: h3 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="69f0d0c3073c3" data-component="typography">
    Variant: h3
</h3>        <!-- typography.blade.php  (hasSeenH1)  original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="69f0d0c3073f7" data-component="typography">
    Variant: h4
</h4>        <!-- typography.blade.php  (hasSeenH1)  original: h5 -->
<h5 class="c-typography c-typography__variant--h5" data-uid="69f0d0c307429" data-component="typography">
    Variant: h5
</h5>        <!-- typography.blade.php  (hasSeenH1)  original: h6 -->
<h6 class="c-typography c-typography__variant--h6" data-uid="69f0d0c307458" data-component="typography">
    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

Large display text variants including headline, title, and subtitle. These are used for prominent text that needs visual emphasis.

Variant: headline

Variant: title

Variant: subtitle

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--headline" data-uid="69f0d0c307828" data-component="typography">
    Variant: headline
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--title" data-uid="69f0d0c30786d" data-component="typography">
    Variant: title
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--subtitle" data-uid="69f0d0c3078a3" data-component="typography">
    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

Standard body text variants including body, paragraph (p), and bold. These are the primary text styles for content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

<!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--body" data-uid="69f0d0c307bc1" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
    <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--p" data-uid="69f0d0c307c05" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
    <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--bold" data-uid="69f0d0c307c3a" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
    <!-- typography.blade.php  (hasSeenH1)  original: p -->
<p class="c-typography c-typography__variant--lead" data-uid="69f0d0c307c6b" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>

{{-- Document body text variants (body, p, bold) --}}
@typography(["variant" => "body"])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

@typography(["variant" => "p"])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

@typography([ "variant" => "bold", ])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

@typography([ "variant" => "lead", ])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, a efficitur ligula. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
@endtypography

Small Text Variants

Smaller text variants including caption, byline, and meta. These are used for secondary information and annotations.

Variant: caption

Variant: byline

Variant: meta

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--caption" data-uid="69f0d0c307f9f" data-component="typography">
    Variant: caption
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--byline" data-uid="69f0d0c307fe3" data-component="typography">
    Variant: byline
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--meta" data-uid="69f0d0c30801a" data-component="typography">
    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

Specialized text variants for specific use cases such as marketing and email content.

Variant: marketing

Variant: email

<!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--marketing" data-uid="69f0d0c308339" data-component="typography">
    Variant: marketing
</div>        <!-- typography.blade.php  (hasSeenH1)  original: div -->
<div class="c-typography c-typography__variant--email" data-uid="69f0d0c30837d" data-component="typography">
    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

API

Parameter	Default	Description
element	p	What element the markup will use.
variant	false	Headings (h1, h2...) can only be set to other headings. If left empty it will default to the given element.
slot		The content
autopromote	false	Upgrade element to h1 (from h3 and above), if seen first on page.
useHeadingsContext	true	If a heading should be based off of the context its in.

CSS API

Variable	Default	Type	Values	Description
--c-typography--font-family-base	var(--font-family-base)	font	-	Body Font
--c-typography--font-family-heading	var(--font-family-heading)	font	-	Falls back to body font if not set.
--c-typography--font-weight-normal	var(--font-weight-normal)	select	100, 200, 300, 400, 500, 600	Normal Weight
--c-typography--font-weight-medium	var(--font-weight-medium)	select	400, 500, 600, 700	Medium Weight
--c-typography--font-weight-bold	var(--font-weight-bold)	select	600, 700, 800, 900	Bold Weight
--c-typography--font-weight-heading	var(--font-weight-heading)	select	400, 500, 600, 700, 800, 900	Heading Weight
--c-typography--line-height-base	var(--line-height-base)	range	-	Body Line Height
--c-typography--line-height-heading	var(--line-height-heading)	range	-	Heading Line Height
--c-typography--letter-spacing-base	var(--letter-spacing-base)	range	-	Letter Spacing
--c-typography--base-font-size	var(--base-font-size)	select	16px, 18px	Root font size. All typographic sizes derive from this.
--c-typography--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-typography--font-size-scale-ratio	var(--font-size-scale-ratio)	select	1.067, 1.125, 1.200, 1.250, 1.333	Multiplier that generates all font sizes from the base.
--c-typography--font-size-90	var(--font-size-90)	range	-	One step below base in the type scale.
--c-typography--font-size-200	var(--font-size-200)	range	-	One step above base in the type scale. Equivalent to h6/subtitle.
--c-typography--font-size-300	var(--font-size-300)	range	-	Two steps above base in the type scale. Equivalent to h5.
--c-typography--font-size-400	var(--font-size-400)	range	-	Three steps above base in the type scale. Equivalent to h4.
--c-typography--font-size-500	var(--font-size-500)	range	-	Four steps above base in the type scale. Equivalent to h3.
--c-typography--font-size-600	var(--font-size-600)	range	-	Five steps above base in the type scale. Equivalent to h2.
--c-typography--font-size-700	var(--font-size-700)	range	-	Six steps above base in the type scale. Equivalent to h1.
--c-typography--font-size-800	var(--font-size-800)	range	-	Seven steps above base in the type scale. Larger than h1.

Similar components

Progressbar Logotype Grid Group