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-uid="6a44f1af5c090" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a44f1af5c26c" 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-uid="6a44f1af5c309" data-component="typography">Frej Karlsson</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a44f1af5c35b" 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-uid="6a44f1af5c6cb" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="6a44f1af5c72b" 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-uid="6a44f1af5c77b" 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-uid="6a44f1af5ea6c" data-component="signature"><!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a44f1af5eacd" 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-uid="6a44f1af5eb1b" data-component="typography">Nikolas</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a44f1af5eb65" 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-uid="6a44f1af5eea7" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a44f1af5ef04" 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-uid="6a44f1af5ef55" 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-uid="6a44f1af5f0b1" data-component="typography">Published: <time class="c-date" data-date=
"2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a44f1af5f059" 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-uid="6a44f1af5f162" data-component="typography">Updated: <time class="c-date" data-date="2020-02-01T00:00:00"
datetime="2020-02-01T00:00:00" data-uid="6a44f1af5f117" 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-uid="6a44f1af5f477" 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-uid="6a44f1af5f58f" data-component="typography">Published: <time class="c-date" data-date=
"2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a44f1af5f544" 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-uid="6a44f1af5f63d" data-component="typography">Updated: <time class="c-date" data-date="2020-02-01T00:00:00"
datetime="2020-02-01T00:00:00" data-uid="6a44f1af5f5f3" 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-uid="6a44f1af5f9d7" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a44f1af5fa33" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Frej Karlsson" data-uid="6a44f1af5facd" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://picsum.photos/id/64/200/200" alt="Frej Karlsson" />
</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-uid="6a44f1af5fbce" data-component="typography">Frej Karlsson</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a44f1af5fc1b" 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-uid="6a44f1af5fcd1" data-component="typography">Published: <time class="c-date" data-date=
"2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a44f1af5fc77" 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-uid="6a44f1af5fffd" 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-uid="6a44f1af6004d" data-component="typography">Frej Karlsson</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a44f1af60098" 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-uid="6a44f1af603c9" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a44f1af60423" 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-uid="6a44f1af60473" 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-uid="6a44f1af60522" data-component="typography">Published: <time class="c-date" data-date=
"2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a44f1af604d8" data-component="date">Wed 01 Jan 2020</time></span>
</div>
</div>
</div>
@signature([
'author' => 'Frej Karlsson',
'published' => '2020-01-01',
])
@endsignature
API
|
Parameter
|
Default
|
Description
|
|
author
|
|
The name of the author
|
|
authorRole
|
|
Byline of the aythors name. Usally what role the user has related to the page.
|
|
avatar
|
|
Link to an image
|
|
avatar_size
|
md
|
Size of the avatar
|
|
published
|
|
A formatted published date
|
|
updated
|
|
A formatted update date
|
|
link
|
|
Links the whole component to another place.
|
|
updatedLabel
|
Updated
|
Label text updated.
|
|
publishedLabel
|
Published
|
Label text published.
|
|
placeholderAvatar
|
true
|
If there should be a placeholder avatar.
|
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.
|
