Storytelling

The "Storytelling" section is a comprehensive content block designed to present engaging narratives using multiple interactive and visual elements. It is composed of the following sub-sections, each with distinct functionality and layout to enhance user experience through storytelling:


Announcement Bar

This is a prominent horizontal bar typically located at the top of the section or page. It serves to immediately capture user attention with concise, important messages. Features often include:

  • Bold or highlighted text to announce key news, updates, or promotions.

  • Optional clickable links or buttons for quick user action.

  • Customizable background colors or patterns to match branding.

  • Responsive behavior to remain visible or collapsible on scroll.


The logo subsection provides branding identity reinforcement within the storytelling section. Characteristics include:

  • Display of the brand or company logo in various formats (SVG, PNG).

  • High-resolution images to ensure sharp display on all devices.

  • Placement flexibility, often aligned with or near the announcement bar or main title.

  • Optional link to home page or relevant landing page.

  • Support for light and dark mode variants.


Scrolling Text and Images

This dynamic element combines continuous horizontal or vertical movement to showcase text and images together in a captivating way. Details include:

  • Smooth scrolling animation for seamless flow.

  • Alternating or synchronized display of text snippets and corresponding images.

  • Customizable speed, direction (left-to-right, right-to-left, up, down).

  • Responsive design to adjust item sizes and scroll speed on different devices.

  • Interactive options such as pausing on hover or click.

  • Use cases include highlighting quotes, customer testimonials, product features, or story chapters.


Tags

This area uses label-like elements to categorize or emphasize keywords, themes, or topics within the storytelling. Specifics:

  • Visually distinct tags with backgrounds, borders, or hovered effects.

  • Multiple tags per story element to enhance filtering and reader focus.

  • Tag content often involves concise keywords or phrases.

  • Can be clickable, enabling users to navigate to related content or filtered lists.

  • Supports various tag styles (rounded, square, color-coded).


Text with Icons Type 1

This format combines text paragraphs or headings alongside small icons to visually support the message. Key elements:

  • Icons usually appear to the left or above the text for clear association.

  • Icons can be simple vector shapes or detailed illustrations.

  • Text blocks highlight specific points, benefits, or steps of the story.

  • Layout supports multiple text-icon pairs arranged vertically or horizontally.

  • Icons and text styling is customizable for color, size, and spacing.


Text with Icons Type 2

Similar to Type 1 but with a distinct visual arrangement or design emphasis to create variety. Features typically include:

  • Different icon positioning such as background icons behind text, inline icons within text, or icon badges.

  • Use of more decorative or thematic icons relevant to the story topic.

  • Text formatting variations like bolded keywords or descriptive labels.

  • Layout may be grid-based or split columns to distinguish it from Type 1.

  • Designed to provide an alternative storytelling style that balances text density and visual interest.

Together, these subsections within the Storytelling component enable rich, visually appealing narratives by combining attention-grabbing announcements, brand presence, animated text and imagery, categorized tags, and informative text with illustrative icons. This multi-faceted approach helps maintain user engagement while delivering layered storytelling content effectively.

Last updated