PSI Software SE Design Library

Date Badge

No notes defined.

<!-- Default -->
<div class="dateBadge">
    <time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time>
</div>


<!-- Period -->
<div class="dateBadge">
    <time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
</div>


<!-- Deprecated Markup -->
<div class="dateBadge">
    <time datetime="2024-02-28" class="dateBadge-start"><span class="dateBadge-day">28</span> <span class="dateBadge-month">Feb</span> <span class="dateBadge-year">2024</span></time>
</div>


<!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div>
        <div class="dateBadge">
            <time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time>
        </div>

    </div>
    <div>
        <div class="dateBadge">
            <time datetime="2024-02-28" class="dateBadge-start">28 Feb 2024</time> <span class="dateBadge-separator">–</span> <time datetime="2024-03-03" class="dateBadge-end">3 Mär 2024</time>
        </div>

    </div>

</section>


<!-- Default -->
<div class="dateBadge{{#modifier}} {{.}}{{/modifier}}">
    {{#start}}<time datetime="{{datetime}}" class="dateBadge-start">{{{day}}} {{{month}}} {{{year}}}</time>{{/start}}{{#end}} <span class="dateBadge-separator">–</span> <time datetime="{{datetime}}" class="dateBadge-end">{{{day}}} {{{month}}} {{{year}}}</time>{{/end}}
</div>

<!-- Period -->
<div class="dateBadge{{#modifier}} {{.}}{{/modifier}}">
    {{#start}}<time datetime="{{datetime}}" class="dateBadge-start">{{{day}}} {{{month}}} {{{year}}}</time>{{/start}}{{#end}} <span class="dateBadge-separator">–</span> <time datetime="{{datetime}}" class="dateBadge-end">{{{day}}} {{{month}}} {{{year}}}</time>{{/end}}
</div>

<!-- Deprecated Markup -->
<div class="dateBadge{{#modifier}} {{.}}{{/modifier}}">
    {{#start}}<time datetime="{{datetime}}" class="dateBadge-start">{{#day}}<span class="dateBadge-day">{{{.}}}</span>{{/day}} {{#month}}<span class="dateBadge-month">{{{.}}}</span>{{/month}} {{#year}}<span class="dateBadge-year">{{{.}}}</span>{{/year}}</time>{{/start}}{{#end}} <span class="dateBadge-separator">–</span> <time datetime="{{datetime}}" class="dateBadge-end">{{#day}}<span class="dateBadge-day">{{{.}}}</span>{{/day}} {{#month}}<span class="dateBadge-month">{{{.}}}</span>{{/month}} {{#year}}<span class="dateBadge-year">{{{.}}}</span>{{/year}}</time>{{/end}}
</div>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

    </header>

        {{#samples}}
    <div>
        {{render '@datebadge' (contextData '@datebadge' this) merge=true}}
    </div>
        {{/samples}}

</section>
    {{/variants}}
 
/* Default */
{
  "start": {
    "datetime": "2024-02-28",
    "day": 28,
    "month": "Feb",
    "year": 2024
  }
}


/* Period */
{
  "start": {
    "datetime": "2024-02-28",
    "day": 28,
    "month": "Feb",
    "year": 2024
  },
  "end": {
    "datetime": "2024-03-03",
    "day": 3,
    "month": "Mär",
    "year": 2024
  }
}


/* Deprecated Markup */
{
  "start": {
    "datetime": "2024-02-28",
    "day": 28,
    "month": "Feb",
    "year": 2024
  }
}


/* Doc Only */
{
  "start": {
    "datetime": "2024-02-28",
    "day": 28,
    "month": "Feb",
    "year": 2024
  },
  "variants": [
    {
      "title": "Default",
      "samples": [
        {
          "start": {
            "datetime": "2024-02-28",
            "day": 28,
            "month": "Feb",
            "year": 2024
          }
        },
        {
          "start": {
            "datetime": "2024-02-28",
            "day": 28,
            "month": "Feb",
            "year": 2024
          },
          "end": {
            "datetime": "2024-03-03",
            "day": 3,
            "month": "Mär",
            "year": 2024
          }
        }
      ]
    }
  ]
}
  • Content: 
    %dateBadge {
    @include stack-spacing();

    width: fit-content;
    padding: .2em var(--bp-small);
    border-radius: var(--br-small);

    background-color: $_text-color;
    color: $_page-color;

    @include text-size(small);
    font-weight: $_font-weight--bold;
}

%dateBadge--large {}

.dateBadge {
    @extend %dateBadge;
}
  • URL: /components/raw/datebadge/_dateBadge.styles.scss
  • Filesystem Path: components/03-fragments/dateBadge/_dateBadge.styles.scss
  • Size: 335 Bytes