Join the conversation

Use join the conversation when you need social or RSS links with icons in a vertical list.

AEM publisher guidelines

View the component in Figma

Live demo

Join the conversation

Join the conversation is a short list of places to follow or read more (social networks, RSS, and similar), each with an icon and label. Visitors use it to leave the current page for an external channel when that is the goal.

Behaviour

  • On publish, nothing renders if there are no valid links. In edit mode with no links, a placeholder appears.
  • Each row can open in a new tab when authors set that option.
  • Hide underline swaps the trailing rule for a lighter break.

Anatomy

Join the conversation anatomy

  1. Section heading (optional).
  2. Vertical list of links, each with icon and label.
  3. Separator line or spacer after the block (unless hidden).

Content guidelines

  • Title field supports HTML where the template allows; keep headings short and on-brand.
  • Link types must match the authoring widget so the correct sprite and accessible name apply.

Best practices

Do

  • Use at the end of an article, event, or program page when follow / subscribe links should follow one pattern.

Don't

  • Don't use this for a single arbitrary link without the social icon pattern; use Link or Link list instead.

When to use

  • At the end of an article, event, or program page where follow / subscribe links should appear in a consistent pattern.
  • Where design calls for icon + text links rather than a generic link list.

When not to use

  • For a single arbitrary link without the social icon pattern; use Link or Link list instead.
  • When icons must match a network not in the authoring widget (would require extending the widget and model).

Related

Resource
!AEMComponent: concordia/components/join-the-conversation.
!CDSShared SVG sprite: clientlibs/img/svg-sprites.svg (ci-facebook, ci-twitter, etc.).

Styles live in join-the-conversation.less under #boot, clientlib apps.concordia.join-the-conversation (loaded from the HTL via clientlib.all). The section header uses the brand condensed face and burgundy; links are black with blue underlined hover on the item content.

Anatomy (visual)

  • Heading: 22px / 1.5, weight 800, burgundy (h2).
  • List: No bullets; li has bottom margin.
  • Item: Inline flex; icon (.ci) with right margin; label line-height 22px.
  • Link hover: No underline on the a itself; underline applied to the inner div with blue text.

Design tokens

Token / variable Category Where used
--cds-font-family-brand-condensed typography Default h2.
@color-burgundy colour Default h2 text.
@color-black colour Link text.
@color-blue colour Hover state on item text.

Event context: h2 becomes 26px / 42px, black (.event .c-join-the-conversation).

Variants (style)

  • Dialog classes: divCssClass and ulCssClass allow layout hooks (Bootstrap grid classes, etc.) without editing LESS.
  • Post compliant: .post.compliant .c-join-the-conversation ul li forces list-style-type: none with !important.

Behaviours

  • Hover: Underline + blue on the flex item container inside the link (not the raw anchor underline).

Layout and spacing

  • Icon alignment uses a small negative vertical-align on .ci.
  • hr / br spacing follows the Hide underline dialog option.
  • Each item is a real link (<a href>), which supports keyboard activation, visible focus (browser / global link styles), and opening in a new window when configured.
  • The SVG uses role="img" and an aria-label derived from the network type (Facebook, X, YouTube, etc.). Visible title text sits beside the icon; keep Title in the dialog meaningful so sighted users and speech users get consistent wording.
  • New tab: rel="noopener noreferrer" is set when target="_blank" is used.

Semantics

  • The block heading is an h2; ensure page heading order remains valid (no skipped levels above it).
  • title on the anchor duplicates link text in HTL; avoid misleading title content if you change the HTL pattern later.

Keyboard

  • Tab to each social link; Enter to activate.

Screen reader

  • Icon is exposed with aria-label (network name); adjacent text is the Title field. Avoid redundant or conflicting strings (for example icon “Facebook” and title “Follow us” is usually fine; icon “Facebook” and title “Twitter” would be wrong).

Focus and visibility

  • Confirm link focus visibility against design system focus-custom usage on other links; this LESS does not add a custom :focus-visible rule.

Testing

TestStatus
Keyboard navigation through all linksRecommended
New tab + rel attributesRecommended
Edit mode placeholderRecommended
Event template styling (heading + hidden hr)Recommended

WCAG / guidelines

CRXDE Lite query

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

/jcr:root/content//*[@sling:resourceType = 'concordia/components/join-the-conversation/join-the-conversation.html']

Technical behaviour

Authors add the component to a parsys, set an optional header, and add one or more links via a multifield. Each link defines:

  • Type (drives icon and default accessible name for the icon),
  • Title (visible label next to the icon),
  • Link (path field),
  • Open in new tab (optional).

The Sling model JoinTheConversationModel reads composite child nodes under links/ first; if none, it falls back to legacy JSON stored in a links string/array property.

On publish, nothing renders if there are no valid links (linkPath and linkClass must both be non-blank in the model). In edit mode with no links, a placeholder and i18n title appear.

Authoring fields

Dialog field Property Purpose
Header ./header h2 content (HTL context='html').
Links ./links Multifield; each entry uses custom widget linkitemcss (Type, Title, Link, Open in new tab). Stored as composite nodes or legacy JSON (see below).
Additional CSS class for the wrapping div ./divCssClass Extra class on the div wrapping the ul.
Additional CSS class for the ul elements ./ulCssClass Extra class on the ul.
Hide underline ./hideUnderline When true, omits hr and outputs br instead.

Link types available in the authoring widget (and recognised for icons in the model) include: Facebook, X (stored as twitter), LinkedIn, Instagram, YouTube, Flickr, Pinterest, Weibo, RSS.

Variants (usage in codebase)

Context Notes
Event template templates/shared/news-events/event/.content.xml includes a join-the-conversation resource. LESS under .event .c-join-the-conversation adjusts heading size and colour and hides the hr.
Degree program detail templates/concordia/academics/degree-program-detail/.content.xml includes the component in the template structure.
General pages Authors can drop the component into any allowed parsys.

Component metadata

  • Resource type: concordia/components/join-the-conversation
  • View: join-the-conversation.html (HTL)
  • Model: org.concordia.wcms.core.models.JoinTheConversationModel
  • Authoring widget: linkitemcss registered in clientlibs/widgets/js/linkItemCSS.js

Implementation

File Purpose
apps/concordia/components/join-the-conversation/join-the-conversation.html Markup, clientlib include, list loop, edit placeholder.
apps/concordia/components/join-the-conversation/dialog.xml Tabs: Social media links, Style.
apps/concordia/components/join-the-conversation/_cq_htmlTag/.content.xml Adds c-join-the-conversation on the root element.
concordia-core/.../JoinTheConversationModel.java Builds link list from links children or legacy JSON; maps linkClass to iconId and ariaLabel.
clientlibs/widgets/js/linkItemCSS.js Multifield row: type select, title, path, new-tab checkbox; serialises JSON for legacy storage path.
clientlibs/join-the-conversation/less/join-the-conversation.less Component presentation and .event override.

Anatomy (markup)

  • Outer resource tag: class="c-join-the-conversation" (from _cq_htmlTag).
  • Inner: <div class="c-join-the-conversation bloc"> > h2.section-header > <div class="{divCssClass}"> > <ul class="{ulCssClass} m-0 p-0"> > items.
  • Each link: <a href="…" target="_blank" rel="noopener noreferrer"> when new tab is set; title from link text.
  • SVG: <svg class="ci {iconId}" role="img" aria-label="…"><use href="…svg-sprites.svg#{iconId}"/></svg>

Authoring (dialog)

Multifield entries must include Type and Title and Link (widget enforces non-blank). Open in new tab maps to linkTarget in stored JSON or equivalent on child nodes.

Dependencies

  • Sprite: /etc/designs/concordia/clientlibs/img/svg-sprites.svg must contain the ci-* symbol referenced by iconId.
  • Widgets clientlib: The Touch/Classic UI must load linkitemcss where the dialog is used (project-wide widgets setup).
  • Component loads apps.concordia.join-the-conversation only when the component is present (not necessarily embedded in concordia-master; verify page policy if styles are missing).

Model behaviour note

If legacy or migrated content used an unknown linkClass, the Java model defaults the icon to ci-facebook and the aria label to Facebook. New authoring is constrained by the linkitemcss select, so mismatches are mainly a migration / old data concern.