Bulleted Lists

Bulleted lists are great ways to break up large blocks of text and highlight steps or key information—and you can use components to make them even more powerful with the addition of icons or other imagery instead of plain old bullets.

Examples

Bulleted list with custom shapes

HTML

<div class="stk-snippets-list-01 stk-container" data-ce-tag="container" data-container-name="Custom list">
  <div class="stk-snippets-list-01__item stk-container" data-ce-tag="container" data-container-name="Custom list item">
    <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Technical</h4>
    <p class="stk-reset">Harnessing the full value of data requires infrastructure and tools that are accessible to all. Organizations need the capability to collect, store, analyze, and action on data efficiently. However, many data analytics tools require specialized coding knowledge that’s prohibitive to non-technical users. Additionally, growing data compliance,  security risks, and requirements cause many companies to keep data assets siloed or restricted entirely.</p>
  </div>
  <div class="stk-snippets-list-01__item stk-container" data-ce-tag="container" data-container-name="List item">
    <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Organizational</h4>
    <p class="stk-reset">In most companies, the language of data is spoken only by the data team, forcing them to take on the responsibility and burden of acting as “keepers of data.” This leaves all other employees totally reliant on their time and expertise, stirring feelings of inadequacy and frustration that ultimately lead to a tense culture of division. What’s more, line-of-business teams often work in silos, with no single source of data truth and no mechanisms for sharing insights or building on each other’s work.</p>
  </div>
  <div class="stk-snippets-list-01__item stk-container" data-ce-tag="container" data-container-name="List item">
    <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Personal</h4>
    <p class="stk-reset">Making data-driven decisions and using data insights to influence strategy is relatively new for many non-technical employees. Introducing new tools and methods too quickly can be overwhelming and cause significant fear and anxiety. Organizations must work hard to combat any misconceptions around what data can or can’t do and build confidence in data-driven decision making for people to engage.</p>
  </div>
</div>
<p class="stk-reset"></p>

Second Tab

.stk-snippets-list-01 {
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-list-01__item {
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-list-01 > :last-child,
.stk-snippets-list-01__item > :last-child{
  margin-bottom: 0;
}

.stk-snippets-list-01__item:nth-child(3n-2) {
  background: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='35' r='30' fill='%234A00FF'/%3E%3C/svg%3E%0A") top left no-repeat;
}

.stk-snippets-list-01__item:nth-child(3n-1) {
  background: url("data:image/svg+xml,%3Csvg width='60' height='69' viewBox='0 0 60 69' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 34.5L7.98611e-07 69L3.8147e-06 -2.62268e-06L60 34.5Z' fill='%234A00FF'/%3E%3C/svg%3E%0A") top left no-repeat;
}

.stk-snippets-list-01__item:nth-child(3n) {
  background: url("data:image/svg+xml,%3Csvg width='61' height='61' viewBox='0 0 61 61' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.25 0L60.5 30.25L30.25 60.5L2.55697e-07 30.25L30.25 0Z' fill='%234A00FF'/%3E%3C/svg%3E%0A") top left no-repeat;
}

@media (min-width: 769px) {
  .stk-container.stk-snippets-list-01__item {
    padding-left: 80px;
    background-size: 60px 60px;
  }
}

@media (max-width: 768px) {
  .stk-container.stk-snippets-list-01__item {
    padding-left: 60px;
    background-size: 40px 40px;
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-container.stk-snippets-list-01__item {
    padding-left: 60px;
    background-size: 40px 40px;
  }
}

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

Bulleted list with the vertical line

HTML

<div class="stk-snippets-list-02 stk-container" data-ce-tag="container" data-container-name="Custom list">
  <div class="stk-snippets-list-02__item stk-container" data-ce-tag="container" data-container-name="Custom list item">
    <p class="stk-reset"><strong class="stk-reset">Technical —</strong> Harnessing the full value of data requires infrastructure and tools that are accessible to all. Organizations need the capability to collect, store, analyze, and action on data efficiently. However, many data analytics tools require specialized coding knowledge that’s prohibitive to non-technical users. Additionally, growing data compliance,  security risks, and requirements cause many companies to keep data assets siloed or restricted entirely.</p>
  </div>
  <div class="stk-snippets-list-02__item stk-container" data-ce-tag="container" data-container-name="List item">
    <p class="stk-reset"><strong class="stk-reset">Organizational —</strong> In most companies, the language of data is spoken only by the data team, forcing them to take on the responsibility and burden of acting as “keepers of data.” This leaves all other employees totally reliant on their time and expertise, stirring feelings of inadequacy and frustration that ultimately lead to a tense culture of division. What’s more, line-of-business teams often work in silos, with no single source of data truth and no mechanisms for sharing insights or building on each other’s work.</p>
  </div>
  <div class="stk-snippets-list-02__item stk-container" data-ce-tag="container" data-container-name="List item">
    <p class="stk-reset"><strong class="stk-reset">Personal —</strong> Making data-driven decisions and using data insights to influence strategy is relatively new for many non-technical employees. Introducing new tools and methods too quickly can be overwhelming and cause significant fear and anxiety. Organizations must work hard to combat any misconceptions around what data can or can’t do and build confidence in data-driven decision making for people to engage.</p>
  </div>
</div>
<p class="stk-reset"></p>

CSS

.stk-snippets-list-02 {
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-list-02 > :last-child,
.stk-snippets-list-02__item > :last-child {
  margin-bottom: 0;
}

.stk-snippets-list-02__item {
  margin-bottom: -7px;
  padding-bottom: 7px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='7' fill='white' stroke='%234A00FF' stroke-width='6'/%3E%3C/svg%3E%0A") 0 7px no-repeat,linear-gradient(to right,black 1px,transparent 1px) 10px 7px no-repeat;
}

.stk-snippets-list-02__item:last-child {
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='7' fill='white' stroke='%234A00FF' stroke-width='6'/%3E%3C/svg%3E%0A") 0 7px no-repeat;
}

@media (min-width: 769px) {
  .stk-container.stk-snippets-list-02__item {
    padding-left: 60px;
  }
}

@media (max-width: 768px) {
  .stk-container.stk-snippets-list-02__item {
    padding-left: 50px;
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-container.stk-snippets-list-02__item {
    padding-left: 50px;
  }
}

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

Content Experience Impact

According to eye tracking studies done by NN/g, one of the things that can pop out in a block of text and draw the eye of someone scanning the content of your page is bulleted lists. Including a bulleted list can make your content easier to navigate and more engaging—and you can take that engagement up a notch by using components to swap plain old bullets for icons or images.

Dos

• Try to keep the line lengths of your bullets similar so any one bullet doesn’t overpower the others and to make the design of your list look nicer.

• Consider the best style of bullet for the content at hand. If it’s a list where order is important, numbers may be the best option. If you want it to look streamlined with the rest of your content, classic bullet points may be best—if you really want to make it stand out or create an illustrative representation of each point, consider icons or custom illustrations for your bullets.

Don'ts

Don’t make each of your bullet points longer than a few lines. If each bullet point needs to be a paragraph or more, perhaps it would be better to divide them into different sections using headers instead of giving the information using bullet points.

Learn More

7 Tips for Presenting Bulleted Lists in Digital Content Nielsen Norman Group

10 Content Design Mistakes That Hurt Engagement—and How to Fix Them Fast Setka

Little-Known Ways to Write Fascinating Bullet Points Copyblogger

Extra Inspiration