Science Museum Group: Web Design System

Card: Default

[todo: version from drupal sites where whole thing is wrapped in a link?]

Examples

<article class="c-card c-card--default ">
    <div class="c-card__img u-grad-yellow-orange-red">
        <a href="#"><img src="https://blog.sciencemuseum.org.uk/wp-content/uploads/2019/02/1857-0101_0001-512x384.png" alt="Conserving the collection"> </a>
    </div>
    <div class="c-card__content">
        <div class="c-card__info">

            <div>By Ruth Watson</div>
            <a href="https://blog.sciencemuseum.org.uk/conserving-the-collection/"><time class="date" datetime="2019-02-27T16:02:23+00:00" itemprop="datePublished">27 February 2019</time></a>
            <h3 class="c-card__title">
                Conserving the collection
            </h3>
        </div>
        <p class="c-card__desc">
            Go behind the scenes with our conservation team and discover what it takes to prepare to move 300,000 objects to their new home.
        </p>
    </div>
</article>
 
<article class="c-card c-card--default {{ variant }}">
  <div class="c-card__img u-grad-yellow-orange-red">
    <a href="#"><img src="{{ img }}" alt="{{ title }}"> </a>
  </div>
  <div class="c-card__content">
    <div class="c-card__info">
      {{{ info }}}
      {{#if title}}
      <h3 class="c-card__title">
        {{ title }}
      </h3>
    </div>
    {{/if}}
    {{#if desc}}
      <p class="c-card__desc">
        {{ desc }}
      </p>
    {{/if}}
  </div>
</article>