Brand Panels

The goal is to map existing Brand Hub content blocks to AEM Panels with minimal customization. It's possible to achieve designs that are closer to the Brand Hub patterns using exclusively components (ex: stacking Title, Text, Divider, Text Link, Image [...] components) but this is not recommended from a maintanability standpoint.

Primary heading (Larger)

Secondary heading (Large)

Tertiary heading (Medium)

Smaller tertiary heading (Small)

Paragraph

This is an example of an intro text block built using the Flexible Text Panel with only "Show intro text" enabled.

Parent content block

This is built with a Flexible Text Panel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is example body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is an example in-text link sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Child content block with items

This is built with a Flexible Text Panel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is an item

This is example body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Example bullet 1
Example bullet 2
Example bullet 3

Internal text link

This is another item

Multiple links would look like this:

Internal text link

External text link

Internal text link

External text link

This is footnote text. It's built using a Text Component. Some panels have optional footnotes or asset captions. Footnotes can also be added to existing text components using the "dhig-typography-smallprint" class on a paragraph.

Note: The panel below needs the added dialog config to optionally appear full-width.

Full-width asset/text

Optional asset caption.

Asset above

This is built using the Long Form Content Panel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Asset below

This is built using two stacked Long Form Content Panels, as the image would otherwise always be displayed above the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Optional asset caption.

Note: The panel below needs the added dialog config to optionally appear full-width.

Split asset/text configurations

Optional asset caption.

Right-aligned asset

Optional asset caption.

Left-aligned asset

Additional asset/text combinations

This is built using the Features & Capabilities Panel. Although this doesn't allow full-width assets, it offers additional flexibility in terms of text content (correct bullet points alignment, ability to add a standalone text link).

Optional caption

Sample content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image can be set left or right
Image can be replaced by a video
Bulleted list can be combined with text

Internal text link

Images only

This is built using the Resources Multi-Use Panel with Quiet Cards and no content other than an Image and a Title, which is then made smaller. The title is not optional.

Item 1

Item 2

Item 3

Item 4

Table – two columns

This is built using the Table Panel with a 2-column configuration. Both the heading and the description are optional.

Column 1 title	Column 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Table – three columns

This is built using the Table Panel with a 3-column configuration. Both the heading and the description are optional.

Column 1 title	Column 2 title	Column 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Table log

This is built using the Table Panel with a 3-column configuration. Both the heading and the description are optional. The links must use a Button component, as the Text Link component is not available for this panel.

Column with dates	Column with text	Column with links
March 10, 2022	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Column with links	Link as button
August 7, 2024	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Link as button

Tabs

This is the Tabs component. Any existing panel can be put inside the Tab Container.

Panel inside a tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Accordions

This is the Accordion component. Any existing panel can be put inside the Accordion.

Item 1: Text Only

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Item 2: Text and Image

Panel inside an accordion

Note: The panel below needs the added dialog config to optionally appear full-width.

This is using the Simple Quote Panel.

– Quote attribution (optional)

Text group 1

This is the Flexible Text Panel using only the Flexible Text Group with 2 items. It can also be configured to display 3 items side by side.

Text group 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Note: The panel below needs the added dialog config to display items in a full-width 2-column layout (50/50).

Items with icons

This is built using the Cross-Linking V2 Panel. Icons can use any image asset, preferably SVGs. The same panel is used for numbered items, provided the numbering is done with SVG imagery as well.

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Note: The panel has content limitations (no icons above/at the top of the cards), but a workaround has been identified.

Image/text item comparison

This is built using the Resources Multi-Use Panel with Quiet Cards and a 2-card layout. The label ("Eyebrow") replaces an icon. Because it always appears right above the title, it's preferable to align the image to the bottom and lead with the label.

GOOD:

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BAD:

Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Cards – image text – four columns

This is built using the Resources Multi-Use Panel with a 4-card layout.

Card title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Internal text link

Card title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

External text link

Card title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Internal text link

Card title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

External text link

Cards – image text – three columns

This is built using the Resources Multi-Use Panel with a 3-card layout.

Card title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Internal text link

Card title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

External text link

Card title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Internal text link

Cards – image text – two columns

This is built using the Resources Multi-Use Panel with a 2-card layout.

Card title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Internal text link

Card title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

External text link

Note: While this panel is currently only available with Dark Theme cards and no hover state, more visual variations were built into the Album panel and should be possible to replicate for these cards.

Card images as CTAs

This is built using the Resources Multi-Use Panel with cards configured to use a Background Image. It's available in any grid configuration (2-4 cards). The presence of a Title is mandatory.

Table sub-section list block

I'm not entirely sure what kind of content fits in this, but it's built using the CTA/Next Steps Panel.