Signature

Signature Component

FK
Frej Karlsson

Give credit

The signature component allows you to display credits and dates

<div id="61efb591e9809" class="c-signature c-signature--space-0" data-uid="61efb591e9803">
    
            <!-- avatar.blade.php -->
    <div id="61efb591e9dd9" class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="61efb591e9dd5">
        
        
                    <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="61efb591e9f0f" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="61efb591e9f0b">
    Frej Karlsson
</span>
                 
                    <!-- typography.blade.php  -->
<span id="61efb591e9f68" class="c-typography c-signature__title c-typography__variant--byline" data-uid="61efb591e9f65">
    Author
</span>                            </div>
        </div>
    
    
    
</div>
@signature(['author' => 'Frej Karlsson', 'authorRole' => 'Author'])
@endsignature

Signature Component - Small Avatar

FK
Frej Karlsson

Give credit to someone that barely deserves it.

<div id="61efb591ea262" class="c-signature c-signature--space-0" data-uid="61efb591ea25d">
    
            <!-- avatar.blade.php -->
    <div id="61efb591ea306" class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="61efb591ea303">
        
        
                    <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="61efb591ea354" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="61efb591ea351">
    Frej Karlsson
</span>
                            </div>
        </div>
    
    
    
</div>
@signature(['author' => 'Frej Karlsson', 'avatar_size' => 'sm'])
@endsignature

Linked Signature Component

Give credit, with a link.

<a id="61efb591ea561" class="c-signature c-signature--space-0" href="https://helsingborg.se" data-uid="61efb591ea55d">
    
            <!-- avatar.blade.php -->
    <div id="61efb591ea5f4" class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="61efb591ea5f1">
        
        
                    <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="61efb591ea65b" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="61efb591ea658">
    Nikolas
</span>
                 
                    <!-- typography.blade.php  -->
<span id="61efb591ea6a1" class="c-typography c-signature__title c-typography__variant--byline" data-uid="61efb591ea69e">
    Zlatan
</span>                            </div>
        </div>
    
    
    
</a>
@signature(['author' => 'Nikolas', 'authorRole' => 'Zlatan', 'link' => 'https://helsingborg.se'])
@endsignature

Signature Component - With dates

FK
Frej Karlsson

Give credit, with dates.

<div id="61efb591ea892" class="c-signature c-signature--space-2" data-uid="61efb591ea88e">
    
            <!-- avatar.blade.php -->
    <div id="61efb591ea922" class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="61efb591ea91f">
        
        
                    <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="61efb591ea985" class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="61efb591ea982">
    Frej Karlsson
</span>
                            </div>
        </div>
    
    
            <div class="c-signature__dates c-signature__dates--aligned">

            <!-- typography.blade.php  -->
<span id="61efb591eae9c" class="c-typography c-signature__published c-typography__variant--byline" data-uid="61efb591eae98">
    Published: <time class="2020-01-01 00:00:00">2020-01-01</time>
</span>            
                            <!-- typography.blade.php  -->
<span id="61efb591eaf71" class="c-typography c-signature__updated c-typography__variant--byline" data-uid="61efb591eaf6e">
    Updated: <time class="2020-02-01 00: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="61efb591eb15d" class="c-signature c-signature--space-2" data-uid="61efb591eb159">
    
    
    
            <div class="c-signature__dates ">

            <!-- typography.blade.php  -->
<span id="61efb591eb274" class="c-typography c-signature__published c-typography__variant--byline" data-uid="61efb591eb271">
    Published: <time class="2020-01-01 00:00:00">2020-01-01</time>
</span>            
                            <!-- typography.blade.php  -->
<span id="61efb591eb323" class="c-typography c-signature__updated c-typography__variant--byline" data-uid="61efb591eb320">
    Updated: <time class="2020-02-01 00: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