Summary Card

A summary card gives a quick overview of key points from a piece of content, usually either at the beginning of an article to give readers a taste of what’s to come, or at the end to help remind them of everything you just went over.

Examples

Summary card on the side

How to make summary card on the side

Summary card on the full-width block with vertical dividers

HTML

<div class="stk-snippets-summary-cards stk-container" data-ce-tag="container" data-container-name="Summary cards">
  <h2 class="stk-theme_00000__style_large_header stk-reset stk-theme_00000__pad_round_1 stk-theme_00000__mb_0 align-center-m" data-ce-tag="paragraph">Summary</h2>
  <ul class="stk-snippets-summary-cards__list stk-reset stk-theme_00000__mb_0">
    <li class="stk-list-item stk-reset">
<strong class="stk-reset">Everyone</strong> works on several topics at the same time, e.g. we have a reporter who writes on energy and the oil industry and pays attention to solar batteries and electric vehicles. The team also comprises other people writing on solar batteries and electric vehicles in a technology context.</li>
    <li class="stk-list-item stk-reset">
<strong class="stk-reset">Everyone</strong> works on several topics at the same time, e.g. we have a reporter who writes on energy and the oil industry and pays attention to solar batteries and electric vehicles. The team also comprises other people writing on solar batteries and electric vehicles in a technology context.</li>
    <li class="stk-list-item stk-reset">
<strong class="stk-reset">Everyone</strong> works on several topics at the same time, e.g. we have a reporter who writes on energy and the oil industry and pays attention to solar batteries and electric vehicles. The team also comprises other people writing on solar batteries and electric vehicles in a technology context.</li>
  </ul>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

CSS

.stk-snippets-summary-cards {
  --stk-snippets-summary-cards__border: 1px solid black;
  background: #f1f1f1;
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-summary-cards__list {
  list-style: none;
  counter-reset: summarycards;
}

.stk-snippets-summary-cards__list > li {
  position: relative;
  list-style: none !important;
  counter-increment: stk-snippets-summary-cards__counter;
  margin: 0;
  padding: 100px 31px 31px;
}

.stk-snippets-summary-cards__list > li::before {
  content: counter(stk-snippets-summary-cards__counter)'.';
  position: absolute;
  display: block;
  top: 31px;
  font-family: sans-serif;
  font-size: 60px;
  line-height: 70px;
  font-weight: bold;
  opacity: .3;
}

@media (min-width: 769px) {
  .stk-snippets-summary-cards__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: var(--stk-snippets-summary-cards__border);
  }

  .stk-snippets-summary-cards__list > li {
    box-sizing: border-box;
    flex: calc(100% / 3) 0 0;
    border-right: var(--stk-snippets-summary-cards__border);
  }

  .stk-snippets-summary-cards__list > li:nth-child(3n) {
    border-right: none;
  }

  .stk-snippets-summary-cards__list > li:nth-child(3n-2):not(:nth-last-child(-n+3)),
  .stk-snippets-summary-cards__list > li:nth-child(3n-1):not(:nth-last-child(-n+2)),
  .stk-snippets-summary-cards__list > li:nth-child(3n):not(:nth-last-child(1)) {
    border-bottom: var(--stk-snippets-summary-cards__border);
  }
}

@media (max-width: 768px) {
  .stk-snippets-summary-cards__list > li {
    border-top: var(--stk-snippets-summary-cards__border);
  }

  .stk-snippets-summary-cards__list > li::before {
    text-align: center;
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-summary-cards__list {
    display: block;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-summary-cards__list > li {
    border-right: none;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-summary-cards__list > li::before {
    text-align: center;
  }
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust border width and color in the component CSS.

Content Experience Impact

Including a summary card at the beginning of an article can be a way to support readers who are scanning the content, giving them a quick overview of what’s covered and making it more likely they’ll read on if you’re covering what they’re looking for. Including a summary card at the end of a content piece can be a great way to make your work easier to understand and remind readers how much value you’ve just given them, building trust with the reader and maybe even helping drive them to convert.

Dos

• Consider designing your summary card to include bullet points to further support a reader who wants to quickly scan the information.

• Use a contrasting background color to make your summary visually stand out even more from the rest of the content.

Don'ts

Don’t include a summary card at the beginning and end of an article, as this may feel repetitive. Instead, consider a summary card at the end, and a table of contents at the beginning, which acts as sort of a content summary while also aiding in navigation.

Learn More

Inverted Pyramid: Writing for Comprehension Nielsen Norman Group

Improving Content Comprehension With Layouts Setka

Extra Inspiration