Signature

Signature Component

Give credit

Frej Karlsson Author

<div class="c-signature c-signature--space-0" data-uid="673ed4e77f09e">
    
                <!-- avatar.blade.php -->
    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="673ed4e77f164">
        
        
                    <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="673ed4e77f1f2">
    Frej Karlsson
</span>
                 
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="673ed4e77f248">
    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="673ed4e77f5ad">
    
                <!-- avatar.blade.php -->
    <div class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="673ed4e77f61c">
        
        
                    <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="673ed4e77f68b">
    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="673ed4e77f98c">
    
                <!-- avatar.blade.php -->
    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="673ed4e77f9e1">
        
        
                    <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="673ed4e77fa2f">
    Nikolas
</span>
                 
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="673ed4e77fa88">
    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="673ed4e77fd55">
    
                <!-- avatar.blade.php -->
    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="673ed4e77fda2">
        
        
                    <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="673ed4e77fde9">
    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="673ed4e77fedd">
    Published:     <time class="2020-01-01T00:00:00 c-date" data-uid="673ed4e77fe8d">Wed 01 Jan 2020 </time>
</span>                        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-uid="673ed4e77ff6e">
    Updated:     <time class="2020-02-01T00:00:00 c-date" data-uid="673ed4e77ff2c">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="673ed4e7802f6">
    
    
    
            <div class="c-signature__dates ">

                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-uid="673ed4e78039f">
    Published:     <time class="2020-01-01T00:00:00 c-date" data-uid="673ed4e780347">Wed 01 Jan 2020 </time>
</span>                        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-uid="673ed4e780439">
    Updated:     <time class="2020-02-01T00:00:00 c-date" data-uid="673ed4e7803f2">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.
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