DOTD Component Library

Meta 

<div class="o-meta">
    <span class="o-icon o-icon--md o-meta__icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12.75 7.5C12.75 7.08579 12.4142 6.75 12 6.75C11.5858 6.75 11.25 7.08579 11.25 7.5V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V7.5Z" />
        </svg>
    </span>
    <div class="o-meta__text">
        <span class="o-meta__date">Jul 24, 2024</span>
        <span class="o-meta__divider">•</span>
        <a hre="#" class="o-meta__category u-text-decoration--underline">Newsletter</a>
    </div>
</div>
 
{% set base_class = meta.base_class|default('o-meta') %}

{% if meta.date or meta.category.name %}
  <div class="{{ bem(base_class, meta.element, meta.modifiers, meta.extra) }}" {{ attributes(meta.attributes) }}>
    {% include "@icon" with {
      "icon": {
        "name": "clock",
        "modifiers": "md",
        "extra": bem(base_class, 'icon')
      }
    } %}
    <div class="{{ bem(base_class, 'text') }}">
      {% if meta.date %}
        <span class="{{ bem(base_class, 'date') }}">{{ meta.date|date("M j, Y") }}</span>
      {% endif %}
      {% if meta.date and meta.category.name %}
        <span class="{{ bem(base_class, 'divider') }}">•</span>
      {% endif %}
      {% if meta.category.name %}
        <a hre="{{ meta.category.link }}" class="{{ bem(base_class, 'category', '', 'u-text-decoration--underline') }}">{{ meta.category.name }}</a>
      {% endif %}
    </div>
  </div>
{% endif %}
 
{
  "meta": {
    "date": "July 24, 2024",
    "category": {
      "link": "#",
      "name": "Newsletter"
    }
  }
}
  • Content: 
    /* ------------------------------------ *\
  $META
\* ------------------------------------ */

.o-meta {
  color: var(--dotd-color-content-default-weak);
  display: flex;
  align-items: center;
  gap: var(--dotd-space-xs);
  @include o-typography-body--md;

  &__text {
    display: flex;
    align-items: center;
    gap: var(--dotd-space-xxs);
  }

  &__icon {
    color: var(--dotd-color-content-primary-default);
  }
}
  • URL: /components/raw/meta/_meta.scss
  • Filesystem Path: components/01-atoms/text/meta/_meta.scss
  • Size: 422 Bytes

No notes defined.