Cards

Short summary

The short summary should tell the user what the page is about. This component is used on simple landing pages as links to content.

Open this short summary example in a new tab
HTML
<div class="occlss-short-summary occlss-short-summary--business">
  <div class="occlss-short-summary__title-cont">
    <h2 class="occlss-u-bspace-xs">In this section</h2>
    <div class="occlss-splitter occlss-splitter--business occlss-u-tspace-none"></div>
  </div>
  <article class="occlss-short-summary__link-cont">
    <a href="javascript:void(0);" class="occlss-short-summary__link">
      <div class="occlss-short-summary__content-wraper">
        <div class="occlss-short-summary__content">
          <h3 class="occlss-short-summary__content-title">Oxfordshire County Council</h3>
          <p>How Oxfordshire County Council works to provide services to the public.</p>
        </div>
      </div>
    </a>
  </article>
  <article class="occlss-short-summary__link-cont">
    <a href="javascript:void(0);" class="occlss-short-summary__link">
      <div class="occlss-short-summary__content-wraper">
        <div class="occlss-short-summary__content">
          <h3 class="occlss-short-summary__content-title">Oxfordshire County Council</h3>
          <p>How Oxfordshire County Council works to provide services to the public.</p>
        </div>
      </div>
    </a>
  </article>
  <article class="occlss-short-summary__link-cont">
    <a href="javascript:void(0);" class="occlss-short-summary__link">
      <div class="occlss-short-summary__content-wraper">
        <div class="occlss-short-summary__content">
          <h3 class="occlss-short-summary__content-title">Oxfordshire County Council</h3>
          <p>How Oxfordshire County Council works to provide services to the public.</p>
        </div>
      </div>
    </a>
  </article>
  <article class="occlss-short-summary__link-cont">
    <a href="javascript:void(0);" class="occlss-short-summary__link">
      <div class="occlss-short-summary__content-wraper">
        <div class="occlss-short-summary__content">
          <h3 class="occlss-short-summary__content-title">Oxfordshire County Council</h3>
          <p>How Oxfordshire County Council works to provide services to the public.</p>
        </div>
      </div>
    </a>
  </article>
  <article class="occlss-short-summary__link-cont">
    <a href="javascript:void(0);" class="occlss-short-summary__link">
      <div class="occlss-short-summary__content-wraper">
        <div class="occlss-short-summary__content">
          <h3 class="occlss-short-summary__content-title">Oxfordshire County Council</h3>
          <p>How Oxfordshire County Council works to provide services to the public.</p>
        </div>
      </div>
    </a>
  </article>
</div>

1.0.0

  • Component added