Introduction
Use the introduction when you need an opening section with title, rich text, image, and links.
Live demo
This is a heading
This is descrtipive text
Visitors get context before the rest of the page. Content authors write a short, scannable intro and use the side column for one strong visual or a few related links, not a full duplicate of the page. Visual designers use width and column balance so the intro does not compete with the hero or title above it.
Behaviour
- The visible title can come from the dialog or fall back to the page title chain.
- If image or links exist, the main text and the side column use a two-column layout; image position can swap columns.
- Width-60 narrows the text measure for readability; hide title removes the heading on publish when configured.
Anatomy
- Title row (optional): primary heading when shown.
- Body row: Text and optional side column for image or links.
Replace with two-column layout and width-60 variant.
Content guidelines
- Keep intro copy concise; deep detail belongs below in WYSIWYG or other components.
- Call-to-action link text should name the destination.
Best practices
Do
- Use one main
h1per page when this component supplies the primary title. - Provide alt text for intro images.
Don't
- Don't duplicate the hero title unless editorial intent is clear.
When to use
- Top of content pages after the hero or breadcrumb when a strong intro and optional visual are needed.
When not to use
- Short teasers; Title plus WYSIWYG may be lighter.
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/introduction/introduction.jsp']Technical behaviour
introduction.jsp resolves title from properties, then page title, jcr:title, or name. hideTitle removes the heading on publish. text holds the main RTE body. If links or fileReference / image exist, text uses col-sm-8 and the side column col-sm-4 for image or links. imgPosition swaps order. width-60 constrains text width. linktitle and linkhref can render a call-to-action style link.
Authoring fields
| Field | Purpose |
|---|---|
| Title | Override; falls back to page title chain. |
| Text | Main introduction copy (HTML). |
| Image | DAM reference with alt handling via Image helper. |
| Links | Multifield JSON links. |
| Layout | Image position, width-60, title size. |
Instances in the codebase
| Location | Notes |
|---|---|
apps/concordia/components/introduction/introduction.jsp | Implementation. |
| Item | Location |
|---|---|
| Component | apps/concordia/components/introduction/introduction.jsp |
| Dialog | apps/concordia/components/introduction/dialog.xml |