Parallel Narrative

Parallel narratives are sections of content that includes valuable, relevant information that just doesn’t quite fit with the flow of the rest of your content and therefore needs to be visually distinguished to help the reader understand that you’re taking a little detour.

Examples

Parallel Narrative with a custom border

4 columns grid HTML

<div class="stk-snippets-teeth-border stk-container" data-ce-tag="container" data-container-name="Teeth border">
  <div class="stk-grid stk-theme_00000__mb_0" data-ce-tag="grid">
    <div data-col-width="1" class="stk-grid-col" data-ce-tag="grid-col">
      <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header align-left">Solomon R. Guggenheim Museum</h3>
      <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_text align-left">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    </div>
    <div data-col-width="3" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
      <p data-ce-tag="paragraph" class="stk-reset">The <strong class="stk-reset">Solomon R. Guggenheim Museum</strong>, often referred to as The Guggenheim, is an art museum located at 1071 Fifth Avenue on the corner of East 89th Street in the Upper East Side neighborhood of Manhattan, New York City. It is the permanent home of a continuously expanding collection of Impressionist, Post-Impressionist, early Modern, and contemporary art and also features special exhibitions throughout the year. The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay. It adopted its current name after the death of its founder Solomon R. Guggenheim in 1952.</p>
    </div>
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

6 columns grid HTML

<div class="stk-snippets-teeth-border stk-container" data-ce-tag="container" data-container-name="Teeth border">
  <div class="stk-grid stk-theme_00000__mb_0" data-ce-tag="grid">
    <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
      <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header align-left">Solomon R. Guggenheim Museum</h3>
      <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_text align-left">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    </div>
    <div data-col-width="4" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
      <p data-ce-tag="paragraph" class="stk-reset">The <strong class="stk-reset">Solomon R. Guggenheim Museum</strong>, often referred to as The Guggenheim, is an art museum located at 1071 Fifth Avenue on the corner of East 89th Street in the Upper East Side neighborhood of Manhattan, New York City. It is the permanent home of a continuously expanding collection of Impressionist, Post-Impressionist, early Modern, and contemporary art and also features special exhibitions throughout the year. The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay. It adopted its current name after the death of its founder Solomon R. Guggenheim in 1952.</p>
    </div>
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

10 columns grid HTML

<div class="stk-snippets-teeth-border stk-container" data-ce-tag="container" data-container-name="Teeth border">
  <div class="stk-grid stk-theme_00000__mb_0" data-ce-tag="grid">
    <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
      <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header align-left">Solomon R. Guggenheim Museum</h3>
      <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_text align-left">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    </div>
    <div data-col-width="6" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
      <p data-ce-tag="paragraph" class="stk-reset">The <strong class="stk-reset">Solomon R. Guggenheim Museum</strong>, often referred to as The Guggenheim, is an art museum located at 1071 Fifth Avenue on the corner of East 89th Street in the Upper East Side neighborhood of Manhattan, New York City. It is the permanent home of a continuously expanding collection of Impressionist, Post-Impressionist, early Modern, and contemporary art and also features special exhibitions throughout the year. The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay. It adopted its current name after the death of its founder Solomon R. Guggenheim in 1952.</p>
    </div>
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

12 columns grid HTML

<div class="stk-snippets-teeth-border stk-container" data-ce-tag="container" data-container-name="Teeth border">
  <div class="stk-grid stk-theme_00000__mb_0" data-ce-tag="grid">
    <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
      <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header align-left">Solomon R. Guggenheim Museum</h3>
      <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_text align-left">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
    </div>
    <div data-col-width="8" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
      <p data-ce-tag="paragraph" class="stk-reset">The <strong class="stk-reset">Solomon R. Guggenheim Museum</strong>, often referred to as The Guggenheim, is an art museum located at 1071 Fifth Avenue on the corner of East 89th Street in the Upper East Side neighborhood of Manhattan, New York City. It is the permanent home of a continuously expanding collection of Impressionist, Post-Impressionist, early Modern, and contemporary art and also features special exhibitions throughout the year. The museum was established by the Solomon R. Guggenheim Foundation in 1939 as the Museum of Non-Objective Painting, under the guidance of its first director, Hilla von Rebay. It adopted its current name after the death of its founder Solomon R. Guggenheim in 1952.</p>
    </div>
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

CSS

.stk-snippets-teeth-border {
  margin-bottom: var(--theme-bottom-indent);
  padding: 60px 30px;
  background-color: #E3E5EB;
  border-style: solid;
  border-top-width: 7px;
  border-bottom-width: 7px;
  border-image: url("data:image/svg+xml,%3Csvg fill='none' height='14' viewBox='0 0 14 14' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m2 14h-2v-14h2c0 1.32608.65695 2.59785 1.54528 3.53553.88833.93769 2.19843 1.46447 3.45472 1.46447s2.61167-.56232 3.5-1.5c.8883-.93768 1.5-2.17392 1.5-3.5h2v14h-2c0-1.3261-.6117-2.5623-1.5-3.5-.88833-.93768-2.24371-1.5-3.5-1.5s-2.61167.56232-3.5 1.5c-.88833.9377-1.5 2.1739-1.5 3.5z' fill='%23e3e5eb' fill-rule='evenodd'/%3E%3C/svg%3E") 50% 0 / 7px 0 / 7px 0 round;
}

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.

Content Experience Impact

Designing your parallel narratives in a distinct way improves content comprehension and scannability by making it easy for readers to understand that you’re straying a bit from the regular content so they can choose whether to dive in or easily skip the section and read on. When designed in an interesting way, these separate narratives can also help break up the page and provide visual interest, making your work more engaging.

Dos

Design parallel narratives to look more visually distinct than your normal section headers, like with a different background color for the entire section. This is a place where it’s okay to differ from your logical structure because you want the reader to understand you’re stepping out of the normal flow of content.

Don'ts

Don’t have a parallel narrative in the middle of your content that’s so long a reader might give up before scrolling to the rest of your main article. If your parallel narrative is more than ~600 words long, consider whether it would be better to publish it as a separate piece of content and simply link to it from your article for anyone who’s interested to go read.

Learn More

Building Nonlinear Narratives for the Web A List Apart

Extra Inspiration