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

How to make data on the full-width multi-column block

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

HTML

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

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);
  }
}

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.

Data on the side

How to make Data on the side

Data on the side with a background shape

HTML

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

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;
}

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 shape and color in the component CSS.

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.

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.

Dos

• Write out these numbers as numerals, not words.

• 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.

• 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.

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.

Learn More

Show Numbers as Numerals When Writing for Online Readers Nielsen Norman Group

Using Visuals & Imagery to Improve Content Engagement Setka

Extra Inspiration