Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2060

Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2071

Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2083

Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2098

Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2007

Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1986

Deprecated: 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 /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1955
Helsingborg Styleguide - Version 2.0

Datebadge

Datebadge

19 May
<!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md" data-uid="682b5183d5ab9">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="682b5183d5bb4">
    19
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="682b5183d5c04">
    May
</span>    </div>
    </div>
@datebadge([
    'date' => date("Y-m-d")
])
@enddatebadge

Datebadge

19 May
<!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--sm" data-uid="682b5183d5d3d">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="682b5183d5d7e">
    19
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="682b5183d5db2">
    May
</span>    </div>
    </div>
@datebadge([
    'date' => date("Y-m-d"),
    'size' => 'sm'
])
@enddatebadge

Datebadge with time

19 May
15:42
<!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md" data-uid="682b5183d5eea">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="682b5183d5f22">
    19
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="682b5183d5f57">
    May
</span>    </div>
            <div class="c-datebadge__time">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--access-time c-icon--material c-icon--material-access_time material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" material-symbol="access_time" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b5183d6076">
                    </span>
                <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="682b5183d60c6">
    15:42
</span>        </div>
    </div>
@datebadge([
    'date' => date("Y-m-d H:i:s"),
    'includeTime' => true
])
@enddatebadge

Datebadge with time, small variant

19 May
15:42
<!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--sm" data-uid="682b5183d6202">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="682b5183d623c">
    19
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="682b5183d6272">
    May
</span>    </div>
            <div class="c-datebadge__time">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--access-time c-icon--material c-icon--material-access_time material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" material-symbol="access_time" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b5183d62b1">
                    </span>
                <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="682b5183d62f2">
    15:42
</span>        </div>
    </div>
@datebadge([
    'date' => date("Y-m-d H:i:s"),
    'includeTime' => true,
    'size' => 'sm'
])
@enddatebadge

Blade component parameters

Key Default value Type Available values Description
date false boolean - A date string in any format.
includeTime false boolean - Will add a box with timestamp below the date.
size md string - The size of the datebadge. Can be either 'sm' or 'md'.
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/Datebadge/datebadge.json