Signature

Signature Component

Give credit

The signature component allows you to display credits and dates

FK
Frej Karlsson
<div id="62bed6aea2458" class="c-signature c-signature--space-0" data-uid="62bed6aea2451">
    
            <!-- avatar.blade.php -->
    <div id="62bed6aea29e4" class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="62bed6aea29de">
        
        
                    <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  -->
<span id="62bed6aea2b7f" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="62bed6aea2b7b">
    Frej Karlsson
</span>
                 
                    <!-- typography.blade.php  -->
<span id="62bed6aea2bf0" class="c-typography c-signature__title c-typography__variant--byline" data-uid="62bed6aea2bec">
    Author
</span>                            </div>
        </div>
    
    
    
</div>
@signature(['author' => 'Frej Karlsson', 'authorRole' => 'Author'])
@endsignature

Signature Component - Small Avatar

Give credit to someone that barely deserves it.

FK
Frej Karlsson
<div id="62bed6aea2e4e" class="c-signature c-signature--space-0" data-uid="62bed6aea2e49">
    
            <!-- avatar.blade.php -->
    <div id="62bed6aea2f34" class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="62bed6aea2f2f">
        
        
                    <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  -->
<span id="62bed6aea2f94" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="62bed6aea2f90">
    Frej Karlsson
</span>
                            </div>
        </div>
    
    
    
</div>
@signature(['author' => 'Frej Karlsson', 'avatar_size' => 'sm'])
@endsignature

Linked Signature Component

Give credit, with a link.

<a id="62bed6aea31ef" class="c-signature c-signature--space-0" href="https://helsingborg.se" data-uid="62bed6aea31ea">
    
            <!-- avatar.blade.php -->
    <div id="62bed6aea32c8" class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="62bed6aea32c4">
        
        
                    <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  -->
<span id="62bed6aea331d" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="62bed6aea331a">
    Nikolas
</span>
                 
                    <!-- typography.blade.php  -->
<span id="62bed6aea3367" class="c-typography c-signature__title c-typography__variant--byline" data-uid="62bed6aea3363">
    Zlatan
</span>                            </div>
        </div>
    
    
    
</a>
@signature(['author' => 'Nikolas', 'authorRole' => 'Zlatan', 'link' => 'https://helsingborg.se'])
@endsignature

Signature Component - With dates

Give credit, with dates.

FK
Frej Karlsson
<div id="62bed6aea3608" class="c-signature c-signature--space-2" data-uid="62bed6aea3604">
    
            <!-- avatar.blade.php -->
    <div id="62bed6aea36d8" class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="62bed6aea36d4">
        
        
                    <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  -->
<span id="62bed6aea372b" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="62bed6aea3728">
    Frej Karlsson
</span>
                            </div>
        </div>
    
    
            <div class="c-signature__dates c-signature__dates--aligned">

            <!-- typography.blade.php  -->
<span id="62bed6aea3fbf" class="c-typography c-signature__published c-typography__variant--byline" data-uid="62bed6aea3fba">
    Published: <time class="2020-01-01 00:00">2020-01-01</time>
</span>            
                            <!-- typography.blade.php  -->
<span id="62bed6aea40c1" class="c-typography c-signature__updated c-typography__variant--byline" data-uid="62bed6aea40bd">
    Updated: <time class="2020-02-01 00:00">2020-02-01</time>
</span>                        
        </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.

<div id="62bed6aea438e" class="c-signature c-signature--space-2" data-uid="62bed6aea4389">
    
    
    
            <div class="c-signature__dates ">

            <!-- typography.blade.php  -->
<span id="62bed6aea4508" class="c-typography c-signature__published c-typography__variant--byline" data-uid="62bed6aea4503">
    Published: <time class="2020-01-01 00:00">2020-01-01</time>
</span>            
                            <!-- typography.blade.php  -->
<span id="62bed6aea45ec" class="c-typography c-signature__updated c-typography__variant--byline" data-uid="62bed6aea45e8">
    Updated: <time class="2020-02-01 00:00">2020-02-01</time>
</span>                        
        </div>
    
</div>
@signature(['published' => '2020-01-01','updated' => '2020-02-01'])
@endsignature

Blade component parameters

Key Default value Type Available values Description
author string - The name of the author
authorRole string - Byline of the aythors name. Usally what role the user has related to the page.
avatar string - Link to an image
avatar_size md string - Size of the avatar
published string - A formatted published date
updated string - A formatted update date
link string - Links the whole component to another place.
updatedLabel Updated string - Label text updated.
publishedLabel Published string - Label text published.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Signature/signature.json