Using content blocks

TABLE OF CONTENTS

• Add a content block
  • Add a content block using a slash command
• Types of content blocks
• Text content blocks
  • Styling boxed text
• Image content blocks
  • Edit image caption
  • Add alternate text
• Image gallery
  • Add an image gallery
  • Style an image gallery
• Juxtapose
  • Add juxtaposed images
  • Edit juxtaposed images
• Multimedia content blocks
  • Add a Lottie animation
  • Style your Lottie animation
• Code, divider, CTA button content block
  • Custom code block
  • Divider
• Iframe embed content block
  • Add an iframe embed
  • Edit embedded iframe content
  • Set adjustable iframe container height
• Using content block templates

In the Storybuilder, you'll build your story using content blocks. Read on to find out what types of content you can use in your data story.

Add a content block

Add a content block using a slash command

1. Press the slash key (/).
2. Select a content type from the pop-up menu or type in the content type (e.g., type /data visualisation or /image).

Types of content blocks

In the Storybuilder, you can choose from different types of content blocks, including:

• Text content blocks
  • Heading
  • Paragraph
  • Numbered list
  • Bullet list
  • Boxed text
  • Quote
  • Literary excerpt
    
    
• Image content blocks
  • Single image
  • Image grid
  • Image carousel
    
    
• Data visualisation blocks
  • Table
  • Flourish embed
  • Tableau embed
  • Datawrapper embed
  • Observable notebook embed
  • Mapbox embed
    
    
• Multimedia content blocks
  • Video embed
  • Audio embed
  • Lottie animation
  • Custom code block
  • Form embed
    
    
• Styling blocks
  • Divider
  • CTA button

Text content blocks

Text content blocks include the heading, paragraph, boxed text, quote, literacy expert section, numbered list, and bullet list.

Styling boxed text

1. To style boxed text, select boxed text in the drop-down menu.
2. Hover over the box.
3. Click the settings icon to open the 'Customise settings' menu.
4. In the menu, you can:
   • change the background of the box to a background image, a different colour or remove the background entirely.
   • style the border of the box.

Image content blocks

Images can help to illustrate your points and pace your story. Lapis provides various image content blocks, including grid, carousel, and juxtaposed image galleries.

Edit image caption

Click on the image caption under your image to edit it. Adding image captions can improve understanding for readers that are unable to see the image.

Add alternate text

Click the pencil icon at the bottom right of the image and type in alternate text.

✨  Including alternate text allows screen reader users to understand the images in context of your story. Adding alt text will also improve your story's search-engine optimisation (SEO).

Image gallery

Add an image gallery

1. To add an image gallery, add a new content block and select Image gallery.
2. Select Grid or Carousel from Image gallery in the drop-down menu.
3. Upload images.

Style an image gallery

1. To style an image gallery, click the settings icon at the top right of the gallery to open the ‘Customise settings’ menu.
2. In the 'Customise settings' menu, you can
   1. change the size of the gallery.
      • Contained: The image gallery will be the same width as the text content block width.
      • Full-width: The image gallery will span the width of the browser.
      • Custom: Set your preferred width and alignment for the image gallery.
   2. change the format of the gallery.
      • Format: Switch between a grid or a carousel format.
      • No. of slides: Set the number of images in your image gallery.
      • Style of arrows: Choose your preferred style of navigation arrows.

✨  To add alt text, replace images, or customise the individual image on the image gallery, click the pencil icon on the individual images.

Juxtapose

Juxtaposing two contrasting elements can help to highlight key points.

Add juxtaposed images

1. To add juxtaposed images, add a new content block and select Juxtapose images.
2. Upload images.

Edit juxtaposed images

1. Click the settings icon at the top right of the block.
2. In the 'Customise settings' menu, you can
   1. replace existing images.
   2. choose between a vertical or horizontal slider.
   3. change content area size.
      • Contained: The image gallery will be the same width as the text content block width.
      • Full-width: The image gallery will span the width of the browser.
      • Custom: Set your preferred width and alignment for the image gallery.
   4. change the image settings, including image fit and position.
   5. add alt text.

Multimedia content blocks

Multimedia content can make your data story more engaging. Lapis supports many multimedia content embeds, including:

• Video embed
• Audio embed
• Lottie animation

✨  Lottie is a JSON-based animation file format that works on any device and platform.

Add a Lottie animation

1. To add a Lottie animation, add a new content block and select Lottie animation.
2. Upload the Lottie file.

Style your Lottie animation

1. Hover over to video/audio/Lottie.
2. Click the pencil icon.
3. In the 'Customise Settings' menu, you can change the content area size.
   1. Contained: The image gallery will be the same width as the text content block width.
   2. Full-width: The image gallery will span the width of the browser.
   3. Custom: Set your preferred width and alignment for the image gallery.

Code, divider, CTA button content block

Custom code block

Add custom code sections that support your story. This could be an interactive section, a complex animation or an extensive data visualisation.

Divider

Add a divider to separate sections or pace the story. Click the settings icon to change the divider’s line’s style, width, and colour.

Iframe embed content block

Add an iframe embed

1. To add an iframe, add a new content block and select Embed iframe.
2. Paste the iframe code, or url.
3. Click Embed.

This is an example of an iframe code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/umAOefbmOxI?si=9NlXbhaph9E1tBPp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Set dynamic height to an iframe embed

<script type="text/javascript" src="https://cdn-assets.kontinentalist.com/kontinentalist-embed-script/script.min.js"></script>

Using content block templates

Content block templates can save you time in creating recurring content across stories, like calls to action or brand visuals. Read more about content block templates in Create a new content block template.

Next, learn to cite sources using Lapis' methodology and references boxes.

Lapis is built by Kontinentalist↗, a data storytelling studio in Singapore.