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.
Logo
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