# 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

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDybXSpyJiofwEOSNJ1%2F-MDyiqz-lAgKkG_gw2oF%2FGroup%2045.png?alt=media\&token=67b0edd0-b724-4582-b206-88bf60969354)

#### How to make facts on **the** full-width block

{% embed url="https://drive.google.com/file/d/1-s5YDzOqCNHFZJJLXZ2u2-HFUc6w9npX/view?usp=sharing" %}

### **Facts on the full-width block with background shapes**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDybXSpyJiofwEOSNJ1%2F-MDyiqyylm9B4YAtzDVQ%2FGroup%2044.png?alt=media\&token=366a1890-eb86-4ae7-b466-0e2461819f4f)

{% tabs %}
{% tab title="4 columns grid HTML" %}
```markup
<!--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>

```
{% endtab %}

{% tab title="6 columns grid | HTML" %}
```markup
<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" 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 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,200%20200,400,%200,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.</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>

```
{% endtab %}

{% tab title="10 columns grid HTML" %}
```markup
<!--Important Facts (grids, 10 cols)-->
<div class="stk-snippets-facts stk-grid" data-ce-tag="grid">
  <div data-col-width="4" 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="3" 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%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 data-col-width="3" 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,200%20200,400,%200,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.</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>






```
{% endtab %}

{% tab title="12 columns grid HTML" %}
```markup
<!--Important Facts (grids, 12 cols)-->
<div class="stk-snippets-facts stk-grid" data-ce-tag="grid">
  <div data-col-width="4" 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="4" 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%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 data-col-width="4" 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,200%20200,400,%200,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.</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>
```
{% endtab %}

{% tab title="CSS" %}
```css
.stk-snippets-facts__card {
  margin-top: var(--stk-snippets-facts__top);
}

.stk-snippets-facts__card > :last-child,
.stk-snippets-facts__content > :last-child {
  margin-bottom: 0;
}

.stk-snippets-facts__photo,
.stk-snippets-facts__photo .stk-mask,
.stk-snippets-facts__photo img {
  width: 100%;
  height: 190px;
  margin-bottom: 0;
}

.stk-snippets-facts__content {
  position: relative;
  margin-top: -100px;
}

.stk-snippets-facts__photo img {
  object-fit: contain;
}
```
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**Select the code component with the same number of columns as in the layout grid of your post.**

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 shapes and colors in the component CSS.
{% endhint %}

### Facts on the side

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDybXSpyJiofwEOSNJ1%2F-MDyiqz2vFPN1pyG6cii%2FGroup%2047.png?alt=media\&token=ee051d93-e8fd-4e46-82dd-5c52619d6b00)

#### How to Make Facts on **the side**

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

### Facts on the side with a custom divider

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MDybXSpyJiofwEOSNJ1%2F-MDyiqz10jBJw3bT5QRd%2FGroup%2046.png?alt=media\&token=4d184ad1-88a0-4e56-825d-d8ea905c2c50)

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

{% tab title="CSS" %}
```css
.stk-snippets-facts-02 {
  margin-bottom: var(--theme-bottom-indent);
  padding-bottom: 25px;
  border-bottom: 2px solid black;
}

.stk-snippets-facts-02 > :last-child {
  margin-bottom: 0;
}

.stk-snippets-facts-02 h2,
.stk-snippets-facts-02 h3,
.stk-snippets-facts-02 h4 {
  text-align: center;
  overflow: hidden;
}

.stk-snippets-facts-02 h2 > .stk-reset,
.stk-snippets-facts-02 h3 > .stk-reset,
.stk-snippets-facts-02 h4 > .stk-reset {
  display: inline-block;
  position: relative;
  text-decoration: none;
  margin-bottom: 0;
}

.stk-snippets-facts-02 h2 > .stk-reset:before,
.stk-snippets-facts-02 h3 > .stk-reset:before,
.stk-snippets-facts-02 h4 > .stk-reset:before {
  content: '';
  display: block;
  border-bottom: 1px solid black;
  position: absolute;
  width: 1000px;
  left: -1010px;
  top: 0.7em;
}

.stk-snippets-facts-02 h2 > .stk-reset:after,
.stk-snippets-facts-02 h3 > .stk-reset:after,
.stk-snippets-facts-02 h4 > .stk-reset:after {
  content: '';
  display: block;
  border-bottom: 1px solid black;
  position: absolute;
  width: 1000px;
  right: -1010px;
  top: 0.7em;
}
```
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Select the code component with the same number of columns as in the layout grid of your post.**

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 dividers and colors in the component CSS.
{% endhint %}

## **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.&#x20;

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

* Help your facts stand out with a stylized frame, different background color, or even an icon placed by the header of the tip.
* If you fact is critical to the story, consider making your component the full content width—if it’s bonus information for the curious reader, consider putting in the margins as a sidebar.&#x20;
* Make the design of your facts uniform down the page so the reader can easily scan identify them and choose whether to read or skip.
{% endhint %}

{% hint style="danger" %}
### Don'ts

Don’t make your facts just text! The readers’ eye is drawn to numbers, so if you’re able to emphasize a number related to your fact, it’s likely to get more engagement. If you don’t have a number, consider other ways to make your fact more visually interesting, like an icon or emphasized keyword.
{% endhint %}

## **Learn More**

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

[**Interesting Facts Make Web Pages Compelling**](https://www.nngroup.com/articles/write-interesting-facts/)\
&#xNAN;_&#x4E;ielsen Norman Group_

## **Extra Inspiration**

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7rwDZE9VPv-lZlSr9%2F-MG7t5DRRogjvcZ1CxhD%2Fwired_uk_jl20.png?alt=media\&token=72f29b3c-6e51-4f21-96ce-aca4b652ae8f)

![](https://968208232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4s6jR1oBjS5hb7lopO%2F-MG7rwDZE9VPv-lZlSr9%2F-MG7t9PVpb1jHIpYNRkq%2FThe%20Times%20Magazine_may_20.png?alt=media\&token=4adb4f5e-c306-494e-b311-c0f4f0e65617)
