Cochrane design system

Cards: Default

No notes defined.

<div class="grid-3-cols grid--flush cards">
    <a href="#" class="card">
        <div class="card-img">
            <img src="../../img/card02.png" />
        </div>
        <div class="card--inner">
            <h6>A linked card, the whole thing is a link</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis est eget tortor pulvinar laoreet. Curabitur commodo in velit vitae vulputate. Nulla egestas dapibus dui nec placerat. Aliquam erat volutpat.</p>
        </div>
    </a>

    <div class="card">
        <a href="#">
            <div class="card-img">
                <img src="../../img/card01.png" />
            </div>
        </a>
        <div class="card--inner">
            <a href="#">
                <h6>A card with tags (so the whole thing cannot be a link)</h6>
            </a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit ac magna sit amet laoreet. </p>
            <ul class="tags">
                <li><a href="#">Tag</a></li>
                <li><a href="#">Tag 2</a></li>
                <li><a href="#">Tag 3</a></li>
            </ul>
        </div>
    </div>
    <a href="#" class="card">
        <div class="card-img">
            <img src="../../img/card03.png" />
        </div>
        <div class="card--inner">
            <h6>Impact story second headline that might be quite a bit longer than some others</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis est eget tortor pulvinar laoreet. Curabitur commodo in velit vitae vulputate. Nulla egestas dapibus dui nec placerat. Aliquam erat volutpat.</p>
        </div>
    </a>
</div>
 
<div class="grid-3-cols grid--flush cards">
    <a href="#" class="card">
        <div class="card-img">
            <img src="../../img/card02.png" />
        </div>
        <div class="card--inner">
            <h6>A linked card, the whole thing is a link</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis est eget tortor pulvinar laoreet. Curabitur commodo in velit vitae vulputate. Nulla egestas dapibus dui nec placerat. Aliquam erat volutpat.</p>
        </div>
    </a>

    <div class="card">
        <a href="#">
            <div class="card-img">
                <img src="../../img/card01.png" />
            </div>
        </a>
        <div class="card--inner">
            <a href="#">
                <h6>A card with tags (so the whole thing cannot be a link)</h6>
            </a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit ac magna sit amet laoreet. </p>
            <ul class="tags">
                <li><a href="#">Tag</a></li>
                <li><a href="#">Tag 2</a></li>
                <li><a href="#">Tag 3</a></li>
            </ul>
        </div>
    </div>
    <a href="#" class="card">
        <div class="card-img">
            <img src="../../img/card03.png" />
        </div>
        <div class="card--inner">
            <h6>Impact story second headline that might be quite a bit longer than some others</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis est eget tortor pulvinar laoreet. Curabitur commodo in velit vitae vulputate. Nulla egestas dapibus dui nec placerat. Aliquam erat volutpat.</p>
        </div>
    </a>
</div>
  • Content: 
    .cards {
  @include typescale('xs');
  margin-bottom: 2rem;

  img {
    margin: 0;
    transition: all 0.3s;
  }

  .card--inner {
    margin: 1rem 0 2rem;

    h6 {
      margin: 0 0 1rem;

      + .date {
        margin-top: -0.8rem;
      }
    }
  }

  a.card, a.card:visited {
    text-decoration: none;
    color: $navy;

    h6 {
      color: $heading-link-color;
    }

    &:hover {
      h6 {
        color: $primary;
      }
    }
  }

  .card a {
    h6 {
      color: $heading-link-color;
    }

    &:hover {
      h6 {
        color: $primary;
      }
    }
  }
}

.grid--flush {
  &.cards {
    .card--inner {
      margin: 1rem math.div($grid-gutter, 2) 2rem;
    }
  }
}

.card-img {
    display: block;
    overflow: hidden;
}

a, a:visited {
  &:hover {
    .card-img {
      box-shadow: 0 1px 0 0 #fff, 0 4px 0 0 $magenta;

      > img {
        transform: scale(1.1);
      }

    }

  }
}

.tags {
  list-style: none;
  padding: 0;

  li {
    display: inline;

    a, a:visited {
      text-decoration: none;
      background: $grey--lightest;
      padding: 0.05em 0.5em;
      color: $navy;
      border-radius: 0.2rem;

      &:hover {
        color: #000;
        background: darken($grey--lightest, 5%);
      }
    }
  }
}
  • URL: /components/raw/cards/_cards.scss
  • Filesystem Path: app/components/02-components/cards/_cards.scss
  • Size: 1.3 KB