Important Facts
Last updated
Last updated
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.
<!--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>
<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>
<!--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>
<!--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>.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;
}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 page.
You can also adjust shapes and colors in the component CSS.
<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>.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;
}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 page.
You can also adjust dividers and colors in the component CSS.
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.
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.
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.
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.
Improving Content Comprehension With Layouts Setka
Interesting Facts Make Web Pages Compelling Nielsen Norman Group
