Signature

Signature Component

Give credit

Frej Karlsson Author

<div class="c-signature c-signature--space-0" data-uid="69162747bf470">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69162747bf523">
        
        
        
        
        
        
                    <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="69162747bf596">
    Frej Karlsson
</span>
                 
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69162747bf5d8">
    Author
</span>
                                    
            </div>
        </div>
    
    
    
</div>

@signature(['author' => 'Frej Karlsson', 'authorRole' => 'Author'])
@endsignature

Signature Component - Small Avatar

Frej Karlsson

<div class="c-signature c-signature--space-0" data-uid="69162747bf8c3">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="69162747bf91b">
        
        
        
        
        
        
                    <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="69162747bf95e">
    Frej Karlsson
</span>
                                    
            </div>
        </div>
    
    
    
</div>

@signature(['author' => 'Frej Karlsson', 'avatar_size' => 'sm'])
@endsignature

Linked Signature Component

Nikolas Zlatan

<a class="c-signature c-signature--space-0" href="https://helsingborg.se" data-uid="69162747bfc91">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69162747bfcef">
        
        
        
        
        
        
                    <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="69162747bfd2c">
    Nikolas
</span>
                 
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69162747bfd63">
    Zlatan
</span>
                                    
            </div>
        </div>
    
    
    
</a>

@signature(['author' => 'Nikolas', 'authorRole' => 'Zlatan', 'link' => 'https://helsingborg.se'])
@endsignature

Signature Component - With dates

Frej Karlsson

Published: Wed 01 Jan 2020 Updated: Sat 01 Feb 2020

<div class="c-signature c-signature--space-2" data-uid="69162747bfffb">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69162747c0042">
        
        
        
        
        
        
                    <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="69162747c007c">
    Frej Karlsson
</span>
                                    
            </div>
        </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="69162747c017e">
    Published:     <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="69162747c013e">Wed 01 Jan 2020 </time>
</span>                        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-uid="69162747c01f5">
    Updated:     <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="69162747c01c0">Sat 01 Feb 2020 </time>
</span>                        
        </div>
    
</div>

@signature(['author' => 'Frej Karlsson', 'published' => '2020-01-01','updated' => '2020-02-01'])
@endsignature

Signature Component - Without a name

Published: Wed 01 Jan 2020 Updated: Sat 01 Feb 2020

<div class="c-signature c-signature--space-2" data-uid="69162747c0547">
    
    
    
            <div class="c-signature__dates ">

                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-uid="69162747c05d1">
    Published:     <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="69162747c0596">Wed 01 Jan 2020 </time>
</span>                        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-uid="69162747c0647">
    Updated:     <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="69162747c0611">Sat 01 Feb 2020 </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.
placeholderAvatar	true	boolean	-	If there should be a placeholder avatar.
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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Signature/signature.json