# Data Highlights

Data highlights help make numerical information in your content stand out even more, without the need to create complex charts or infographics to draw the eye.

## **Examples**

### Data on the full-width multi-column block

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDyO_4WLeWeFe_4tg0K%2F-MDyW5OCP62jw1Wbnzwy%2FGroup%2040.png?alt=media\&token=e83fbf02-7459-49d4-b6e1-5cf204b20102)

#### **How to make d**ata on the full-width multi-column block

{% embed url="<https://drive.google.com/file/d/1-uf9L2LpPfWBbKf0KBBlJQsaGev0-Nx6/view?usp=sharing>" %}

### Data on the full-width multi-column block **with borders**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDyO_4WLeWeFe_4tg0K%2F-MDyW5OAhIf0SJEUY-By%2FGroup%2038.png?alt=media\&token=a3fba17f-2d86-432c-9964-af5d29616dec)

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="stk-snippets-data-highligts stk-container" data-ce-tag="container" data-container-name="Data Highlights">
  <div class="stk-snippets-data-highligts__card stk-container" data-ce-tag="container" data-container-name="Card">
    <h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_0">1939</h2>
    <p data-ce-tag="paragraph" class="stk-reset align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__style_small_text">year, when Solomon R. Guggenheim Museum was founded</p>
  </div>
  <div class="stk-snippets-data-highligts__card stk-container" data-ce-tag="container" data-container-name="Card">
    <h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_0">1959</h2>
    <p data-ce-tag="paragraph" class="stk-reset align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__style_small_text">year, when Solomon R. Guggenheim Museum was built by Frank Lloyd Wright</p>
  </div>
  <div class="stk-snippets-data-highligts__card stk-container" data-ce-tag="container" data-container-name="Card">
    <h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_0">953,925</h2>
    <p data-ce-tag="paragraph" class="stk-reset align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__style_small_text">visitors in 2016</p>
  </div>
  <div class="stk-snippets-data-highligts__card stk-container" data-ce-tag="container" data-container-name="Card">
    <h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_0">5</h2>
    <p data-ce-tag="paragraph" class="stk-reset align-center stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__style_small_text">Guggenheim museums are in the world: in NYC, Bilbao, Berlin, Venice and Abu Dhabi</p>
  </div>
</div>
<p class="stk-reset"></p>
```

{% endtab %}

{% tab title="CSS" %}

```css
.stk-snippets-data-highligts {
  --stk-snippets-data-highligts__border: 1px solid black;
  margin-bottom: var(--theme-bottom-indent);
  border: var(--stk-snippets-data-highligts__border);
}

.stk-snippets-data-highligts__card {
  margin: 0;
  padding: 50px 10px;
}

.stk-snippets-data-highligts__card > :last-child {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .stk-snippets-data-highligts {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .stk-snippets-data-highligts__card {
    flex: 1 0 0;
  }

  .stk-snippets-data-highligts__card:not(:last-child) {
    border-right: var(--stk-snippets-data-highligts__border);
  }
}

@media (max-width: 768px) {
  .stk-snippets-data-highligts__card:not(:last-child) {
    border-bottom: var(--stk-snippets-data-highligts__border);
  }
}

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

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-data-highligts__card:not(:last-child) {
    border-right: none;
    border-bottom: var(--stk-snippets-data-highligts__border);
  }
}
```

{% 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](https://setka.gitbook.io/components-library/getting-started/introduction) page.

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

### **Data on the side**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDyO_4WLeWeFe_4tg0K%2F-MDyW5OBy_XPD0VE8MjH%2FGroup%2041.png?alt=media\&token=533f2584-b515-4fae-afc7-0eb19a7c957a)

#### **How to make Data on the side**

{% embed url="<https://drive.google.com/file/d/1-uSvKMrjkSl2yNPjimnr8OmaiM-XidSW/view?usp=sharing>" %}

### **Data on the side with a background shape**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDyO_4WLeWeFe_4tg0K%2F-MDyW5Nyz2K9Bdyp5WT0%2FGroup%2037.png?alt=media\&token=166cd071-a632-4ecc-8703-bed05817e2d0)

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="stk-snippets-data-highligts-02 stk-container" data-ce-tag="container" data-container-name="Data Highlights">
  <h3 class="stk-reset align-center stk-theme_00000__mb_0 stk-theme_00000__style_medium_header stk-theme_00000__mb_05">1939</h3>
  <p class="stk-reset align-center stk-theme_00000__style_small_text stk-theme_00000__color_4507_custom_color_0">year, when Solomon R. Guggenheim Museum was founded</p>
</div>
<p class="stk-reset"></p>
```

{% endtab %}

{% tab title="CSS" %}

```css
.stk-snippets-data-highligts-02 {
  margin-bottom: var(--theme-bottom-indent);
  padding: 50px 5px;
  background: #FFF5D3;
  clip-path: polygon(50% 0%, 100% 35px, 100% calc(100% - 35px), 50% 100%, 0 calc(100% - 35px), 0 35px);
}

.stk-snippets-data-highligts__card > :last-child {
  margin-bottom: 0;
}
```

{% 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](https://setka.gitbook.io/components-library/getting-started/introduction) page.

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

## **Content Experience Impact**

Studies have shown that a reader’s eye is drawn to numerals within content pages because their unique shape provides some variety amongst a sea of text, so when designing your pages it can help engagement if you make important data points bolder than ever.&#x20;

Plus, creating data highlights turns these numerals into a bold visual element, breaking up the text on your page to improve the reading experience even more.

{% hint style="success" %}

### **Dos**

* Write out these numbers as numerals, not words.&#x20;
* Use a large font for the number to help it stand out, then add extra context in a smaller font to make sure the data is fully understandable.&#x20;
* Use varying font sizes, colors, and styles to really make the number pop, or include elements like a colorful background or icon to help users quickly identify different data points all the way down the page.
  {% endhint %}

{% hint style="danger" %}

### **Don'ts**

* Don’t feel like you have to highlight every bit of data in your content. Think of only pulling out the most interesting points that demonstrate the story you’re trying to tell or argument you’re trying to make.
* Don’t use data highlights when there’s a lot of data to represent—in those cases, consider other methods of data visualization that will help the reader more easily understand the whole set.
  {% endhint %}

## **Learn More**

[**Show Numbers as Numerals When Writing for Online Readers**](https://www.nngroup.com/articles/web-writing-show-numbers-as-numerals/)\
\&#xNAN;*Nielsen Norman Group*

[**Using Visuals & Imagery to Improve Content Engagement**](https://setka.io/blog/using-visuals-imagery-to-improve-content-engagement/)\
\&#xNAN;*Setka*

## **Extra Inspiration**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7rwDZE9VPv-lZlSr9%2F-MG7tUGOmMV-6ueV2QgZ%2FScreenshot%202020-07-13%20at%2015.39.13.png?alt=media\&token=6e937748-2799-4400-9c21-ace3c032f5bc)