Info Block

The Info Block is a versatile component designed to display one or more distinct blocks of information in a clean, structured layout. Each informational box can feature a prominent label, a title, and a main content area.

This block is built as a repeater, which means an editor can add, remove, and reorder multiple info boxes within a single block instance. This makes it ideal for content such as contact details, opening hours, key facts, or any set of related information points that need to be presented clearly.

Content Editor Fields

The "Info" block is a repeater. You can add multiple Info Items. Each item has the following fields:

• Position:

  • Description: This setting controls the alignment of the Label relative to the main content box.
  • Options:
    • Left: Aligns the label to the left of the content.
    • Right: Aligns the label to the right of the content.
  • Usage: Select the desired alignment for the label.
  • Requirement: Optional. Defaults to Left.

• Label:

  • Description: A short, bold title that serves as the main label for the information box. This is perfect for categorizing the content, like "did you know" or "animal habitat".
  • Usage: Enter a short, single line of text.
  • Requirement: Optional.

• Title:

  • Description: The primary heading for the content within the box. This appears directly above the main content.
  • Usage: Enter a title for the content.
  • Requirement: Optional.

• Content:

  • Description: The main body of text for the info box. This is a rich text editor field, allowing for basic formatting such as paragraphs, bold/italic text, lists, and links.
  • Usage: Enter the detailed information for this box.
  • Requirement: Optional.

Example Usage:

Steps:

1. Add the block: Insert the Info Block into your page.
2. Add the first item:
   • Click "Add Info Item".
   • Position: Keep the default Left.
   • Label: "did you know"
   • Title: "title"
   • Content: "info about animal"
3. Add a second item:
   • Click "Add Info Item".
   • Position: Keep the default Left.
   • Label: "habitat"
   • Title: "title"
   • Content: "info about animal"
4. Save the Page: The block will now display two info boxes, one for did you know , and one for habitat

Result:

The Info Block renders a series of distinct informational boxes. Each box consists of a Label (e.g., "did you know?") positioned according to the Position setting, and a content area containing the Title and Content. The layout is clean and makes it easy for users to find specific pieces of information.

Preview with image:

Editor preview:

Benefits:

• Structured Data: Perfect for presenting key-value pairs of information in a visually appealing way.
• Flexible Repeater: Easily add, remove, or reorder information points as needed.
• Clear Presentation: The label and content separation makes the information highly scannable and easy to digest.
• Versatile: Can be used for contact details, opening times, key features, location info, and more.

Conclusion:

The Info Block is an excellent component for displaying structured lists of information. Its repeater-based design and simple field structure make it a powerful and user-friendly tool for content editors.