Important Facts

Sometimes, it can be helpful to call out facts related to your story in a separate section. For instance, maybe it’s basic information that people should know before reading your article, but that can be skipped for people who are already knowledgeable on the subject. Or maybe the facts provide additional information that isn’t critical to the core of the piece, but could be interesting for someone who wants to dig in a little further.

Examples

Facts on the full-width block

How to make facts on the full-width block

Facts on the full-width block with background shapes

<!--Important Facts (grids, 4 cols)-->
<div class="stk-snippets-facts stk-grid" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-facts__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-facts__photo" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask">
          <img class="" src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-fadeIn" data-anim-trigger="scroll" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
        </div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-facts__content stk-container">
        <p data-ce-tag="paragraph" class="stk-reset"><strong class="stk-reset">Everyone works</strong> 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.</p>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-facts__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-facts__photo" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask">
          <img class="" src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Cpolygon%20points='200,0%20400,350%200,350'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-fadeIn" data-anim-trigger="scroll" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
        </div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-facts__content stk-container">
        <p data-ce-tag="paragraph" class="stk-reset"><strong class="stk-reset">Everyone works</strong> 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.</p>
      </div>
    </div>
  </div>
</div>

<style data-anim-name="preset-fadeIn" media="screen and (min-width: 768px)">
  .stk-post [data-anim-name="preset-fadeIn"]:not(#stk):not([data-anim="false"]) {
    opacity: 0
  }
</style>
<style data-anim-name="preset-fadeIn" media="screen and (max-width: 767px)">
  .stk-post [data-anim-name="preset-fadeIn"]:not(#stk):not([data-anim-m]),
  .stk-post [data-anim-name="preset-fadeIn"]:not(#stk):not([data-anim-m="false"]) {
    opacity: 0
  }
</style>
<script data-anim-name="preset-fadeIn" type="application/json">
  {
    "keyframes": [{
      "opacity": 0,
      "offset": 0
    }, {
      "opacity": 1,
      "offset": 1
    }],
    "options": {
      "id": "preset-fadeIn",
      "delay": 0,
      "duration": 1000
    }
  }
</script>

Facts on the side

How to Make Facts on the side

Facts on the side with a custom divider

<div class="stk-snippets-facts-02 stk-container" data-ce-tag="container" data-container-name="Snippet">
  <h4 class="stk-reset align-center stk-theme_00000__style_small_header"><u class="stk-reset">DID YOU KNOW</u></h4>
  <p class="stk-reset stk-theme_00000__mb_05 stk-theme_00000__style_small_text">People predict that they will behave more ethically than they actually do, and when evaluating past (un)ethical behavior, they believe they behaved more ethically than they actually did.</p>
  <p class="stk-reset stk-theme_00000__mb_05 stk-theme_00000__style_small_text"><span class="stk-reset">—</span> <a class="stk-reset" href="https://example.com/">Harvard ethics study</a><span class="stk-reset"> [PDF]</span></p>
</div>
<p class="stk-reset"></p>

Content Experience Impact

Creating components to call out important facts improves your content layout by highlighting important information to draw the reader’s eye, and/or to separate side information so it doesn’t disrupt the flow of content. When designed well, with colorful backgrounds, icons, and different font styles, these can also provide some visual interest as the reader scrolls down the page, thereby upping engagement.

Dos

Don'ts

Learn More

Improving Content Comprehension With Layouts Setka

Interesting Facts Make Web Pages Compelling Nielsen Norman Group

Extra Inspiration

Last updated

Was this helpful?