Datebadge

Datebadge

Display a datebadge in it's simpliest form.

1 Jul
<!-- datebadge.blade.php -->
<div id="62becf3ba82b8" class="c-datebadge c-datebadge--md" data-uid="62becf3ba82b1">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span id="62becf3ba84f7" class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="62becf3ba84f2">
    1
</span>        <!-- typography.blade.php  -->
<span id="62becf3ba856f" class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="62becf3ba856b">
    Jul
</span>    </div>
    </div>
@datebadge([
    'date' => date("Y-m-d")
])
@enddatebadge

Datebadge

Display a datebadge in it's simpliest form, small variant.

1 Jul
<!-- datebadge.blade.php -->
<div id="62becf3ba8dd1" class="c-datebadge c-datebadge--sm" data-uid="62becf3ba8dc9">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span id="62becf3ba8e3b" class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="62becf3ba8e37">
    1
</span>        <!-- typography.blade.php  -->
<span id="62becf3ba8e96" class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="62becf3ba8e92">
    Jul
</span>    </div>
    </div>
@datebadge([
    'date' => date("Y-m-d"),
    'size' => 'sm'
])
@enddatebadge

Datebadge with time

Display a datebadge with time included.

1 Jul
access_time 12:40
<!-- datebadge.blade.php -->
<div id="62becf3ba914f" class="c-datebadge c-datebadge--md" data-uid="62becf3ba914a">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span id="62becf3ba91aa" class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="62becf3ba91a6">
    1
</span>        <!-- typography.blade.php  -->
<span id="62becf3ba91fb" class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="62becf3ba91f7">
    Jul
</span>    </div>
            <div class="c-datebadge__time">
            <!-- icon.blade.php -->
    <i id="62becf3ba92b7" class="c-icon c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="62becf3ba92b1">
                    access_time
            </i>
            <!-- typography.blade.php  -->
<span id="62becf3ba9323" class="c-typography c-typography__variant--meta" data-uid="62becf3ba931f">
    12:40
</span>        </div>
    </div>
@datebadge([
    'date' => date("Y-m-d H:i:s"),
    'includeTime' => true
])
@enddatebadge

Datebadge with time, small variant

Display a datebadge with time included.

1 Jul
access_time 12:40
<!-- datebadge.blade.php -->
<div id="62becf3ba95f4" class="c-datebadge c-datebadge--sm" data-uid="62becf3ba95ee">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span id="62becf3ba964d" class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="62becf3ba9649">
    1
</span>        <!-- typography.blade.php  -->
<span id="62becf3ba969d" class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="62becf3ba969a">
    Jul
</span>    </div>
            <div class="c-datebadge__time">
            <!-- icon.blade.php -->
    <i id="62becf3ba96f3" class="c-icon c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="62becf3ba96ee">
                    access_time
            </i>
            <!-- typography.blade.php  -->
<span id="62becf3ba9746" class="c-typography c-typography__variant--meta" data-uid="62becf3ba9743">
    12:40
</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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Datebadge/datebadge.json