Signature
The Signature component provides a reusable pattern for signature in the interface.
Signature Component
The signature component allows you to display credits and dates
<div class="c-signature c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<svg class="c-avatar__initials" aria-label="Frej Karlsson" viewbox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">
FK
</text></svg>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Frej Karlsson</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-component="typography">Author</span>
</div>
</div>
</div>
@signature(['author' => 'Frej Karlsson', 'authorRole' => 'Author'])
@endsignature
Signature Component - Small Avatar
Give credit to someone that barely deserves it.
<div class="c-signature c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-sm" data-component="avatar">
<svg class="c-avatar__initials" aria-label="Frej Karlsson" viewbox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">
FK
</text></svg>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Frej Karlsson</span>
</div>
</div>
</div>
@signature(['author' => 'Frej Karlsson', 'avatar_size' => 'sm'])
@endsignature
Linked Signature Component
Give credit, with a link.
<a class="c-signature c-signature--space-0" href="https://getmunicipio.com" data-component="signature"><!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<svg class="c-avatar__initials" aria-label="Nikolas" viewbox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">
N
</text></svg>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Nikolas</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-component="typography">Zlatan</span>
</div>
</div></a>
@signature(['author' => 'Nikolas', 'authorRole' => 'Zlatan', 'link' => 'https://getmunicipio.com'])
@endsignature
Signature Component - With dates
Give credit, with dates.
Frej Karlsson
Published:
Updated:
<div class="c-signature c-signature--space-2" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<svg class="c-avatar__initials" aria-label="Frej Karlsson" viewbox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">
FK
</text></svg>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Frej Karlsson</span>
</div>
<div class="c-signature__dates c-signature__dates--aligned">
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-component="typography">Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime=
"2020-01-01T00:00:00" data-component="date">Wed 01 Jan 2020</time></span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-component="typography">Updated: <time class="c-date" data-date="2020-02-01T00:00:00" datetime=
"2020-02-01T00:00:00" data-component="date">Sat 01 Feb 2020</time></span>
</div>
</div>
</div>
@signature(['author' => 'Frej Karlsson', 'published' => '2020-01-01','updated' => '2020-02-01'])
@endsignature
Signature Component - Without a name
Do not give credit, just some dates.
Published:
Updated:
<div class="c-signature c-signature--space-2" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-signature__author-box">
<div class="c-signature__dates">
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-component="typography">Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime=
"2020-01-01T00:00:00" data-component="date">Wed 01 Jan 2020</time></span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-component="typography">Updated: <time class="c-date" data-date="2020-02-01T00:00:00" datetime=
"2020-02-01T00:00:00" data-component="date">Sat 01 Feb 2020</time></span>
</div>
</div>
</div>
@signature(['published' => '2020-01-01','updated' => '2020-02-01'])
@endsignature
Signature Component - With Avatar
Displays the author with a real avatar image instead of the generated placeholder.
Frej Karlsson
Author
Published:
<div class="c-signature c-signature--space-1" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Frej Karlsson" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://picsum.photos/id/64/200/200" alt="Frej Karlsson" loading="lazy" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Frej Karlsson</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-component="typography">Author</span>
</div>
<div class="c-signature__dates c-signature__dates--aligned">
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-component="typography">Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime=
"2020-01-01T00:00:00" data-component="date">Wed 01 Jan 2020</time></span>
</div>
</div>
</div>
@signature([
'author' => 'Frej Karlsson',
'authorRole' => 'Author',
'avatar' => 'https://picsum.photos/id/64/200/200',
'published' => '2020-01-01',
])
@endsignature
Signature Component - No Avatar
Renders the author name and role without any avatar by disabling the placeholder.
<div class="c-signature c-signature--space-0 c-signature--no-avatar" data-component="signature">
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Frej Karlsson</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-component="typography">Author</span>
</div>
</div>
</div>
@signature([
'author' => 'Frej Karlsson',
'authorRole' => 'Author',
'placeholderAvatar' => false,
])
@endsignature
Signature Component - Published Date Only
Shows a single published date alongside the author, without an updated date.
Frej Karlsson
Published:
<div class="c-signature c-signature--space-1" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<svg class="c-avatar__initials" aria-label="Frej Karlsson" viewbox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">
FK
</text></svg>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-component="typography">Frej Karlsson</span>
</div>
<div class="c-signature__dates c-signature__dates--aligned">
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-component="typography">Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime=
"2020-01-01T00:00:00" data-component="date">Wed 01 Jan 2020</time></span>
</div>
</div>
</div>
@signature([
'author' => 'Frej Karlsson',
'published' => '2020-01-01',
])
@endsignature
API
|
Parameter
|
Default
|
Type
|
Description
|
|
author
|
|
string
|
-
|
|
authorRole
|
|
string
|
-
|
|
avatar
|
|
string
|
-
|
|
avatar_size
|
md
|
string
|
-
|
|
published
|
|
string
|
-
|
|
updated
|
|
string
|
-
|
|
link
|
|
string
|
-
|
|
updatedLabel
|
Updated
|
string
|
-
|
|
publishedLabel
|
Published
|
string
|
-
|
|
placeholderAvatar
|
true
|
boolean
|
-
|
CSS API
|
Variable
|
Default
|
Type
|
Values
|
Description
|
|
--c-signature--space
|
var(--space)
|
range
|
-
|
Base spacing unit. Used for padding and margin inside components.
|
|
--c-signature--color--background-contrast-muted
|
var(--color--background-contrast-muted)
|
color
|
-
|
Derived muted contrast for text and icons on background surfaces.
|
|
--c-signature--font-size-100
|
var(--font-size-100)
|
range
|
-
|
Base font size.
|
