Cards

Cards pattern

Cards row

The cards row is three news stories in a row. It is used on the homepage of the website only.

<div id="newsCardSection">
  <div class="occlss-wrapper">
    <!--START wrapper block-->
    <div class="occlss-layout occlss-layout--gutter-s">
      <!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--sm-4">
        <article class="occlss-card">
          <a href="javascript:void(0);" class="occlss-card__link">
            <figure class="occlss-card__image-container">
              <img src="https://dummyimage.com/800x574/525252/ffffff.png" class="occlss-card__image" alt="">
            </figure>
            <header class="occlss-card__header">
              <h2 class="occlss-card__title">Oxfordshire’s Fire and Rescue Service goes electric to reduce emissions </h2>
            </header>
            <div class="occlss-card__main">
              <p class="occlss-card__paragraph">The drive to reduce carbon emissions and clean up the air has stepped up a gear as Oxfordshire County Council takes delivery of a new fleet of electric cars and vans.</p>
            </div>
          </a>
        </article>
      </div>
      <div class="occlss-layout__col occlss-layout__col--sm-4">
        <article class="occlss-card">
          <a href="javascript:void(0);" class="occlss-card__link">
            <figure class="occlss-card__image-container">
              <img src="https://dummyimage.com/800x574/525252/ffffff.png" class="occlss-card__image" alt="">
            </figure>
            <header class="occlss-card__header">
              <h2 class="occlss-card__title">Oxfordshire communities and local businesses gearing up for OVO Energy Women’s Tour cycle race</h2>
            </header>
            <div class="occlss-card__main">
              <p class="occlss-card__paragraph">Oxfordshire communities and local businesses are making plans to welcome the prestigious OVO Energy Women’s Tour cycle race, which will pass through the county on Wednesday 12 June.</p>
            </div>
          </a>
        </article>
      </div>
      <div class="occlss-layout__col occlss-layout__col--sm-4">
        <article class="occlss-card">
          <a href="javascript:void(0);" class="occlss-card__link">
            <figure class="occlss-card__image-container">
              <img src="https://dummyimage.com/800x574/525252/ffffff.png" class="occlss-card__image" alt="">
            </figure>
            <header class="occlss-card__header">
              <h2 class="occlss-card__title">‘Adorable’ Archie set to influence baby name choice for Oxfordshire parents </h2>
            </header>
            <div class="occlss-card__main">
              <p class="occlss-card__paragraph">Staff at Oxfordshire County Council’s Registration Service are expecting a surge in boys named Archie following the birth of the Duke and Duchess of Sussex’s first child.</p>
            </div>
          </a>
        </article>
      </div>
    </div>
    <!--End layout elemnt -->
  </div>
</div>

Changelog

1.0.0

  • Component Added