V6 Clearleft Patterns

Event Card 

<article class="Event-card flow--2xs">
    <a href="#" class="block focus">
        <header class="Event-card__header">
            <h1 class="vh">
                Event name
            </h1>
            <h2 class="Event-card__status">
                Sold out
            </h2>
            <img src="https://www.fillmurray.com/800/450" alt="" loading="lazy" />
        </header>
    </a>
    <div class="body flow--3xs">
        Leading Design is a supportive community nurturing design leadership through inspiring and engaging events, conferences and retreats.
    </div>
</article>
 
<article class="Event-card flow--2xs">
  {% if link %}
  <a href="{{ link }}" class="block focus">
  {% endif %}
    <header class="Event-card__header">
      <h1 class="vh">
        {{ title }}
      </h1>
      {% if status is defined and status is not empty %}
        <h2 class="Event-card__status">
          {{ status }}
        </h2>
      {% endif %}
      {% if image is defined and image.src is defined %}
        <img src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy" />
      {% endif %}
    </header>
    {% if link %}
  </a>
  {% endif %}
  <div class="body flow--3xs">
    {{ excerpt|raw }}
  </div>
</article>
 
{
  "title": "Event name",
  "status": "Sold out",
  "link": "#",
  "excerpt": "Leading Design is a supportive community nurturing design leadership through inspiring and engaging events, conferences and retreats.",
  "image": {
    "src": "https://www.fillmurray.com/800/450",
    "alt": ""
  }
}
  • Content: 
    .Event-card {
  &__header {
    position: relative;
  }

  &__status {
    position: absolute;
    top: var(--space-3xs);
    left: 0;
    color: var(--white);
    background: var(--red);
    padding: var(--space-3xs);
    font-size: var(--step--1);
  }

  img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}
  • URL: /components/raw/event-card/event-card.css
  • Filesystem Path: src/templates/components/event-card/event-card.css
  • Size: 335 Bytes

No notes defined.