Tips

In a piece of content providing advice or instructions, it can be helpful to call out especially helpful information separately to make sure the reader doesn’t miss it or provide extra guidance to really help them out.

Examples

Tips on the full-width multi-column block

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

Tips on the full-width multi-column block with custom borders

4 columns grid HTML

<!--Tips (grids, 4 cols)-->
<div class="stk-snippets-tips stk-grid" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">01</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Make your content the optimal width for scannability</h4>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">02</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Use a logical structure that clearly breaks down content</h4>
    </div>
  </div>
</div>

6 columns grid HTML

div class="stk-snippets-tips stk-grid" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">01</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Make your content the optimal width for scannability</h4>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">02</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Use a logical structure that clearly breaks down content</h4>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">03</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Establish hierarchies for easy scanning</h4>
    </div>
  </div>
</div>

10 columns grid HTML

<!--Tips (grids, 10 cols)-->
<div class="stk-snippets-tips stk-grid" data-ce-tag="grid">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">01</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Make your content the optimal width for scannability</h4>
    </div>
  </div>
  <div data-col-width="3" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">02</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Use a logical structure that clearly breaks down content</h4>
    </div>
  </div>
  <div data-col-width="3" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">03</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Establish hierarchies for easy scanning</h4>
    </div>
  </div>
</div>

12 columns grid HTML

<!--Tips (grids, 12 cols)-->
<div class="stk-snippets-tips stk-grid" data-ce-tag="grid">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">01</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Make your content the optimal width for scannability</h4>
    </div>
  </div>
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">02</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Use a logical structure that clearly breaks down content</h4>
    </div>
  </div>
  <div data-col-width="4" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-tips__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">03</h2>
      <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header">Establish hierarchies for easy scanning</h4>
    </div>
  </div>
</div>

CSS

.stk-snippets-tips__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 250px;
  margin: 0;
  padding: 30px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 3px, #FFF5D3 3px);
}

.stk-snippets-tips__card > :first-child {
  margin-bottom: auto;
  opacity: .3;
}

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

Select the code component with the same number of columns as in the grid system 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 border width and colors in the component CSS.

Tips on the side

How to Make Tips on the side

Tips on the side with custom the vertical divider

HTML

<div class="stk-snippets-tips-02 stk-container" data-ce-tag="container" data-container-name="Tips">
  <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_05"><strong class="stk-reset">TIPS</strong></p>
  <h3 class="stk-reset stk-theme_00000__mb_05 stk-theme_00000__style_medium_header"><span class="stk-reset">Best practices to use in your content</span></h3>
  <ol data-ce-tag="list" class="stk-reset stk-theme_00000__style_small_text">
    <li data-ce-tag="list-item" class="stk-list-item stk-reset stk-theme_00000__style_small_text">Make your content the optimal width for scannability</li>
    <li data-ce-tag="list-item" class="stk-list-item stk-reset stk-theme_00000__style_small_text">Use a logical structure that clearly breaks down content</li>
    <li data-ce-tag="list-item" class="stk-list-item stk-reset stk-theme_00000__style_small_text">Establish hierarchies for easy scanning</li>
    <li data-ce-tag="list-item" class="stk-list-item stk-reset stk-theme_00000__style_small_text">Make content navigation a breeze</li>
    <li data-ce-tag="list-item" class="stk-list-item stk-reset stk-theme_00000__style_small_text">Emphasize certain content to catch the eye</li>
    <li data-ce-tag="list-item" class="stk-list-item stk-reset stk-theme_00000__style_small_text">Provide additional information in helpful ways</li>
  </ol>
</div>
<p class="stk-reset"></p>

CSS

.stk-snippets-tips-02 {
  margin-bottom: var(--theme-bottom-indent);
  margin-left: 15px;
  border-style: solid;
  border-image: url("data:image/svg+xml,%3Csvg fill='none' height='15' viewBox='0 0 10 15' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23000'%3E%3Cpath d='m4 7c2.47214-1.23607 2.47214-4.76393 0-6'/%3E%3Cpath d='m6 8c-2.47214 1.23607-2.47214 4.7639 0 6'/%3E%3C/g%3E%3C/svg%3E") 0 0 0 100% / 0 0 0 10px / 10px 15px round;
}

.stk-snippets-tips-02 > :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 divider style and color in the component CSS.

Content Experience Impact

Readers want to get the maximum benefit for the minimum amount of work, so by highlighting the most valuable tips and tricks in a more visual form, you can draw their eye to the most relevant content and quickly provide them incredible value. Tips can also be used to provide additive information to help the reader take their learnings to the next level, without breaking the flow of your main text. 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

• Help your tip stand out with a stylized frame, different background color, or even an icon placed by the header of the tip.

• Make the design of your tips uniform down the page so the reader can easily scan and find each one throughout your content.

Don'ts

Don’t call out everything in your content as a tip—if everything is emphasized, nothing is. Instead, consider the goals the user is trying to achieve or what is most important to them and only highlight that information as a tip.

Learn More

Improving Content Comprehension With Layouts Setka

Prioritize: Good Content Bubbles to the Top Nielsen Norman Group

Extra Inspiration