Signature

Signature Component

Give credit

FK
Frej Karlsson Author 
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>2060</b><br />
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>2071</b><br />
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>2083</b><br />
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>2098</b><br />
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::count() should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>2007</b><br />
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>1986</b><br />
<br />
<b>Deprecated</b>:  Return type of Illuminate\Support\Collection::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in <b>/var/www/webroot/ROOT/vendor/illuminate/support/Collection.php</b> on line <b>1955</b><br />
<div class="c-signature c-signature--space-0" data-uid="699cd56966b7b">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="699cd56967206">
        
        
        
        
        
        
                    <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="699cd56967271">
    Frej Karlsson
</span>
                 
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="699cd569672b2">
    Author
</span>
                                    
            </div>
        </div>
    
    
    
</div>
@signature(['author' => 'Frej Karlsson', 'authorRole' => 'Author'])
@endsignature

Signature Component - Small Avatar

FK
Frej Karlsson 
<div class="c-signature c-signature--space-0" data-uid="699cd5696732e">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-sm" data-uid="699cd569673d3">
        
        
        
        
        
        
                    <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="699cd5696740d">
    Frej Karlsson
</span>
                                    
            </div>
        </div>
    
    
    
</div>
@signature(['author' => 'Frej Karlsson', 'avatar_size' => 'sm'])
@endsignature

Linked Signature Component

N
Nikolas Zlatan 
<a class="c-signature c-signature--space-0" href="https://helsingborg.se" data-uid="699cd5696747f">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="699cd5696750d">
        
        
        
        
        
        
                    <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="699cd56967542">
    Nikolas
</span>
                 
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="699cd56967571">
    Zlatan
</span>
                                    
            </div>
        </div>
    
    
    
</a>
@signature(['author' => 'Nikolas', 'authorRole' => 'Zlatan', 'link' => 'https://helsingborg.se'])
@endsignature

Signature Component - With dates

FK
Frej Karlsson
Published: Updated: 
<div class="c-signature c-signature--space-2" data-uid="699cd569675db">
    
                            <!-- avatar.blade.php -->

    <div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="699cd56967666">
        
        
        
        
        
        
                    <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="699cd5696769b">
    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="699cd56967771">
    Published:     <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="699cd56967737">Wed 01 Jan 2020 </time>
</span>                        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-uid="699cd569677e3">
    Updated:     <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="699cd569677b4">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: Updated: 
<div class="c-signature c-signature--space-2" data-uid="699cd56967850">
    
    
    
            <div class="c-signature__dates ">

                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__published c-typography__variant--byline" data-uid="699cd5696791d">
    Published:     <time class="c-date" data-date="2020-01-01T00:00:00" datetime="2020-01-01T00:00:00" data-uid="699cd569678ed">Wed 01 Jan 2020 </time>
</span>                        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-signature__updated c-typography__variant--byline" data-uid="699cd56967978">
    Updated:     <time class="c-date" data-date="2020-02-01T00:00:00" datetime="2020-02-01T00:00:00" data-uid="699cd5696794f">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