Date Badge

The Date Badge component provides a reusable pattern for datebadge in the interface.

Datebadge

Display a datebadge in it's simpliest form.

Apr 28

<div style="display: flex; gap: 16px;">
        <!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md c-datebadge--light" data-uid="69f0d1789bcb4" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789be69" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789bd54" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789bdc5" data-component="typography">
    28
</span>
    </div>
</div>        <!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md c-datebadge--primary" data-uid="69f0d1789bed1" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789bf94" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789bf17" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789bf52" data-component="typography">
    28
</span>
    </div>
</div>        <!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md c-datebadge--secondary" data-uid="69f0d1789bfdf" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789c08e" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789c01d" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789c053" data-component="typography">
    28
</span>
    </div>
</div></div>

<div style="display: flex; gap: 16px;">
    @datebadge([
        'date' => date("Y-m-d")
    ])
    @enddatebadge
    @datebadge([
        'date' => date("Y-m-d"),
        'color' => 'primary',
    ])
    @enddatebadge
    @datebadge([
        'date' => date("Y-m-d"),
        'color' => 'secondary',
    ])
    @enddatebadge
</div>

Datebadge - Small

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

Apr 28

<!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--sm c-datebadge--light" data-uid="69f0d1789c419" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789c4fb" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789c471" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789c4b6" data-component="typography">
    28
</span>
    </div>
</div>

Datebadge - Large

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

Apr 28

<!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--lg c-datebadge--light" data-uid="69f0d1789c867" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789c936" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789c8b8" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789c8f7" data-component="typography">
    28
</span>
    </div>
</div>

Datebadge - Translucent

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

Apr 28

<div style="display: flex; gap: 16px; paddig: 16px; background: url('https://www.w3schools.com/w3css/img_lights.jpg') center / cover; padding: 16px;">
        <!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md c-datebadge--light c-datebadge--translucent" data-uid="69f0d1789cd5f" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789ce68" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789cdca" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789ce21" data-component="typography">
    28
</span>
    </div>
</div>        <!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md c-datebadge--primary c-datebadge--translucent" data-uid="69f0d1789ceb9" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789cf69" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789cef8" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789cf2e" data-component="typography">
    28
</span>
    </div>
</div>        <!-- datebadge.blade.php -->
<div class="c-datebadge c-datebadge--md c-datebadge--secondary c-datebadge--translucent" data-uid="69f0d1789cfb0" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d1789d050" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d1789cfe4" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d1789d01f" data-component="typography">
    28
</span>
    </div>
</div></div>

<div style="display: flex; gap: 16px; paddig: 16px; background: url('https://www.w3schools.com/w3css/img_lights.jpg') center / cover; padding: 16px;">
    @datebadge([
        'date' => date("Y-m-d"),
        'translucent' => true
    ])
    @enddatebadge
    @datebadge([
        'date' => date("Y-m-d"),
        'color' => 'primary',
        'translucent' => true
    ])
    @enddatebadge
    @datebadge([
        'date' => date("Y-m-d"),
        'color' => 'secondary',
        'translucent' => true
    ])
    @enddatebadge
</div>

API

Parameter	Default	Description
date	false	A date string in any format or a unix timestamp.
size	md	The size of the datebadge. Can be either 'sm', 'md' or 'lg'.
translucent	false	If true, the datebadge will have a translucent background.
color	light	The color of the datebadge. Can be either 'light', 'dark', 'primary', 'secondary'.

CSS API

Variable	Default	Type	Values	Description
--c-datebadge--border-radius	var(--border-radius)	range	-	Border Radius
--c-datebadge--border-width	var(--border-width)	range	-	Size
--c-datebadge--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-datebadge--color--primary	var(--color--primary)	color	-	Primary
--c-datebadge--color--secondary	var(--color--secondary)	color	-	Secondary
--c-datebadge--color--surface	var(--color--surface)	color	-	Surface
--c-datebadge--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-datebadge--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-datebadge--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-datebadge--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-datebadge--color--primary-border	var(--color--primary-border)	color	-	Manual companion token for primary border and hover states.
--c-datebadge--color--secondary-contrast	var(--color--secondary-contrast)	color	-	Secondary Contrast
--c-datebadge--color--secondary-border	var(--color--secondary-border)	color	-	Manual companion token for secondary border and hover states.

Similar components

Header Sidebar Textarea