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="69f0d178d1c08" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d178d1c9f" 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="69f0d178d1d16" data-component="typography">
Frej Karlsson
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d178d1d65" 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="69f0d178d2130" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="69f0d178d218b" 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="69f0d178d21ca" 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="69f0d178d25c7" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d178d2619" 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="69f0d178d265a" data-component="typography">
Nikolas
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d178d2694" 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="69f0d178d2a0b" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d178d2a58" 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="69f0d178d2a97" 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="69f0d178d2bc7" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="69f0d178d2b7f" 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="69f0d178d2c43" data-component="typography">
Updated: <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="69f0d178d2c0d" 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="69f0d178d2f24" 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="69f0d178d2ffb" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="69f0d178d2fbc" 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="69f0d178d3072" data-component="typography">
Updated: <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="69f0d178d303d" 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="69f0d178d3356" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d178d3399" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Frej Karlsson" data-uid="69f0d178d3417" 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="69f0d178d34df" data-component="typography">
Frej Karlsson
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d178d3517" 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="69f0d178d3594" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="69f0d178d355c" 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="69f0d178d3861" 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="69f0d178d38a0" data-component="typography">
Frej Karlsson
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d178d38e9" 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="69f0d178d3bab" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d178d3bf3" 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="69f0d178d3c2e" 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="69f0d178d3cc1" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="69f0d178d3c75" 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.
|
