Date Badge

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

Datebadge

Display a datebadge in it's simpliest form.

Sep 19

<div style="display: flex; gap: 16px;">
  <!-- datebadge.blade.php -->
  <div class="c-datebadge c-datebadge--md c-datebadge--light" data-component="datebadge">
    <div class="c-element c-datebadge__container" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</span>
    </div>
  </div><!-- datebadge.blade.php -->
  <div class="c-datebadge c-datebadge--md c-datebadge--primary" data-component="datebadge">
    <div class="c-element c-datebadge__container" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</span>
    </div>
  </div><!-- datebadge.blade.php -->
  <div class="c-datebadge c-datebadge--md c-datebadge--secondary" data-component="datebadge">
    <div class="c-element c-datebadge__container" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</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.

Sep 19

<div class="c-datebadge c-datebadge--sm c-datebadge--light" data-component="datebadge">
  <div class="c-element c-datebadge__container" data-component="element">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
     <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</span>
  </div>
</div>

Datebadge - Large

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

Sep 19

<div class="c-datebadge c-datebadge--lg c-datebadge--light" data-component="datebadge">
  <div class="c-element c-datebadge__container" data-component="element">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
     <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</span>
  </div>
</div>

Datebadge - Translucent

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

Sep 19

<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-component="datebadge">
    <div class="c-element c-datebadge__container" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</span>
    </div>
  </div><!-- datebadge.blade.php -->
  <div class="c-datebadge c-datebadge--md c-datebadge--primary c-datebadge--translucent" data-component="datebadge">
    <div class="c-element c-datebadge__container" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</span>
    </div>
  </div><!-- datebadge.blade.php -->
  <div class="c-datebadge c-datebadge--md c-datebadge--secondary c-datebadge--translucent" data-component="datebadge">
    <div class="c-element c-datebadge__container" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__month c-typography__variant--span" data-component="typography">Sep</span> <!-- typography.blade.php   original: span -->
       <span class="c-typography c-datebadge__date c-typography__variant--span" data-component="typography">19</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	Type	Description
date	false	string\|integer\|boolean	-
size	md	string	-
translucent	false	boolean	-
color	light	string	-

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