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="6a0be8525561e" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a0be852556b5" 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="6a0be85255733" data-component="typography">
Frej Karlsson
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a0be85255786" 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="6a0be85255820" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="6a0be85255875" 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="6a0be852558af" 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="6a0be85255925" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a0be85255963" 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="6a0be8525599a" data-component="typography">
Nikolas
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a0be852559cf" 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="6a0be85255a43" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a0be85255a7e" 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="6a0be85255ab4" 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="6a0be85255bba" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a0be85255b74" 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="6a0be85255c34" data-component="typography">
Updated: <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="6a0be85255bfd" 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="6a0be85255cb1" 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="6a0be85255d64" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a0be85255d2d" 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="6a0be85255dd6" data-component="typography">
Updated: <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="6a0be85255da2" 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="6a0be85255e4a" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a0be85255e82" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Frej Karlsson" data-uid="6a0be85255ef2" 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="6a0be85255fbb" data-component="typography">
Frej Karlsson
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a0be85255ff2" 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="6a0be8525606d" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a0be85256036" 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="6a0be852560e8" 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="6a0be8525611a" data-component="typography">
Frej Karlsson
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a0be8525614d" 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="6a0be852561be" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a0be852561fb" 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="6a0be85256231" 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="6a0be852562aa" data-component="typography">
Published: <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="6a0be85256272" 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.
|
