Value prop block

Use a value prop block when you need a headline, supporting copy, and optional links for a program or feature.

AEM publisher guidelines

View the component in Figma

Live demo

This is overview text

This is body text

Menu

Visitors scan the step or title first, then read detail or follow links. Content authors use it for process explanations, benefit lists, or program storytelling. Visual designers set background and columns so the block stands apart from surrounding content without feeling like a full-width hero.

Behaviour

  • Step can show as a number, checkmark, or none.
  • Related links render in a side column when authored.
  • Edit mode may show a reminder that accordions or buttons can go in the parsys.

Anatomy

  1. Title column: Step badge and heading.
  2. Content column: Overview, body, and parsys.
  3. Related links column (optional).

Value prop block (placeholder)

Replace with and without related links.

Content guidelines

  • Align step labels with a clear process order on the page.
  • Use related links for a small set of next steps; see Code for dialog fields.

Best practices

Do

  • Keep titles short; put detail in overview or body.
  • Use the parsys for structured add-ons instead of pasting huge HTML in the body field.

Don't

  • Don't overload related links; three to five items is usually enough.

When to use

  • Program or campaign pages that explain why something matters in stepped sections.
  • When related resources should sit beside the main explanation.

When not to use

  • Short blurbs without steps; a Grid container and Title may suffice.
  • FAQ content; prefer Accordion alone or within a simpler wrapper.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/value-prop-block/value-prop-block.jsp']

Authoring fields

FieldPurpose
StepNone, number, or checkmark visual.
Title / overview / bodyMain copy (body may contain simple markup).
BackgroundHex background colour.
Related linksMultifield JSON links + optional related label.
Additional classAppended to container.

Technical behaviour

value-prop-block.jsp renders c-value-prop-block__container with a width1200 inner container. The left column shows an optional step (numeric or checkmark) and title inside a heading wrapper. The middle holds overview, body, and value-prop-block-parsys. The right optional column lists related links parsed from JSON (related-links multifield) with dashed styling when links exist.

In edit mode, an info alert reminds authors they may add accordions or buttons in the parsys.

Instances in the codebase

Location Notes
apps/concordia/components/value-prop-block/value-prop-block.jsp Implementation.
Item Location
Component apps/concordia/components/value-prop-block/value-prop-block.jsp