# 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**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-ME7fo42H1adLk1S6OuP%2F-ME7hmv57Xa4YyNWo0GU%2FGroup%2087.png?alt=media\&token=390b03cf-7fc1-445f-839c-96ee0905eeaf)

#### **How to make summary card on the side**

{% embed url="https://drive.google.com/file/d/102DXcP8DJUYDLRdVEqoOaeS7y7dQznFV/view?usp=sharing" %}

### **Summary card on the full-width block with vertical dividers**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-ME7fo42H1adLk1S6OuP%2F-ME7hmv3TY7kvUYcH7I6%2FGroup%2086.png?alt=media\&token=c70ed6d7-9345-4a6b-91e3-b0d3fd2c03d5)

{% tabs %}
{% tab title="HTML" %}
```markup
<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>
```
{% endtab %}

{% tab title="CSS" %}
```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;
  }
}
```
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Replace style id \`**stk-theme\_00000**\` with yours before adding it to your Style Manager. For more info, please go to the [Introduction](../getting-started/introduction) page.

You can also adjust border width and color in the component CSS.
{% endhint %}

## **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.

{% hint style="success" %}
### Dos

* Consider designing your summary card to include bullet points to further support a reader who wants to quickly scan the information.&#x20;
* Use a contrasting background color to make your summary visually stand out even more from the rest of the content.
{% endhint %}

{% hint style="danger" %}
### 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.
{% endhint %}

## **Learn More**

[**Inverted Pyramid: Writing for Comprehension**](https://www.nngroup.com/articles/inverted-pyramid/)\
&#xNAN;_&#x4E;ielsen Norman Group_

[**Improving Content Comprehension With Layouts**](https://setka.io/blog/designing_effective_layouts)\
&#xNAN;_&#x53;etka_

## **Extra Inspiration**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7rwDZE9VPv-lZlSr9%2F-MG7st19GXWyI-JLdbFi%2FStr%C3%B8m_sp-sm20_02.png?alt=media\&token=6df90fbd-ec44-4d0f-bbaf-bcac4bcc54cb)
