Features - Centered Image

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