Bento Focus Block
Overview
The Bento Focus Block provides a structured way to highlight key offerings or information points with visual icons and interactive elements. This versatile block features a title, description, and between 1-6 individual focus items, each with its own customizable components for maximum impact and engagement.
I like this component so much I use it for my guides page!
Key Components
- Block Title: Main heading that introduces the focus section
- Block Description: Supportive text that provides context for the focus items
- Focus Items: Between 1-6 interactive cards with detailed customization options
Focus Item Elements
- Item Name: Title for each individual focus item
- Item Description: Detailed explanation of the focus point
- Item Icon: Visual element to enhance recognition and appeal
- Link URL: Connection to relevant page or service
- Call to Action Text: Customizable button text (e.g., "Learn more")
Core Functionality
- Visual Organization: Present multiple key points in a structured, scannable format
- Interactive Navigation: Direct users to specific service pages or additional information
- Content Hierarchy: Establish clear relationships between main concepts and supporting details
Implementation Benefits
- User Engagement: Guide visitors to explore your most important offerings
- Visual Appeal: Combine icons and text for enhanced information presentation
- Conversion Optimization: Include direct calls to action for each focus area
Best Practices
- Create a concise, descriptive block title that frames the collection of focus items
- Maintain consistent length for item names and descriptions across all focus items
- Select relevant icons that visually reinforce each item's purpose
- Use action-oriented call-to-action text that encourages engagement
- Consider logical groupings when displaying multiple focus items
- Ensure all linked pages provide the detailed information promised by the focus item
Technical Considerations
Remember that you must include at least one focus item, and you can add up to six. Each focus item requires name, description, icon selection, link URL, and call-to-action text. The expand/collapse functionality allows users to manage the display of multiple focus items for improved navigation.