Overview
Introduction: The Features - Centered Image component displays a series of feature highlights positioned on either side of a central image. This layout is designed to visually balance the page while drawing attention to key aspects of a product or service. It’s an effective way to showcase multiple features with an engaging visual anchor in the center.
Key Features:
- Alternating feature cards are positioned on the left and right, framing a central image that remains sticky as users scroll.
- Each feature card can include a headline, subheadline, description, and optional buttons, providing detailed information.
- Customizable background colors, card styles, and visual interest elements (such as dots or crosses) enhance the visual appeal.
Best use cases
Examples of Effective Use:
- Ideal for product pages or service overviews where you want to highlight specific features with a central visual focus.
- Effective on landing pages to break down complex offerings into digestible, visually engaging sections.
- Suitable for about pages to present core values or key differentiators with accompanying visuals.
How NOT to use this
Common Missteps:
- Avoid overcrowding the feature cards with too much text or too many buttons, which can overwhelm users and clutter the design.
- Do not use a low-quality or irrelevant central image, as it can detract from the professional appearance and reduce engagement.
- Ensure the central image complements the surrounding features to maintain a cohesive and focused presentation.
FAQ, pro tips, and troubleshooting
- Pro Tip: You should set up 1 feature card first and just duplicate that one instead of having to the card with the same styles for each feature.
Ideas
Suggested Combinations: This component pairs well with a “Colored Call to Action” below it, prompting users to take the next step after exploring the features. It can also follow a “Banner Image Hero” to introduce the product or service before delving into detailed features.