Grid container
Use a grid container when you need section width, background, and vertical spacing between blocks.
Visitors experience it as consistent margins and colour bands between sections. Content authors pick how wide content should read, whether the section has a tint or image, and padding above and below. Visual designers use it to group related modules and keep alignment predictable at desktop and mobile breakpoints.
Behaviour
- Width presets map to container classes so content aligns with the site grid.
- Background colour is validated; many dark fills adjust link colour so text stays readable.
- Spacing can differ by breakpoint for desktop and mobile.
Anatomy
- Outer section with optional background colour or image.
- Inner container at the chosen max width.
- Parsys for child components.
Replace with tinted band and full-bleed image variants.
Content guidelines
- Background should support readable body text and links; test on real content, not empty sections.
- Photo credit is supplementary; meaningful images still need proper alt in asset metadata where applicable.
Best practices
Do
- Match container width to the template (for example wide templates use
width1200orwidth1600per design). - Test mobile padding when background colours meet white body content.
Don't
- Don't pick background colours outside the validated palette; unknown values fall back safely but may break contrast expectations.
When to use
- Section breaks between major page blocks.
- When you need consistent horizontal alignment with the rest of the site grid.
When not to use
- Full-bleed heroes that already bring their own layout; nest content instead of double-wrapping without reason.
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/grid-container/grid-container.jsp']Authoring fields
| Area | Purpose |
|---|---|
| Grid type | Selects container width (narrow, default, wide, extra wide, side margin). |
| Background | Colour from palette; optional DAM image; credit fields. |
| Spacing | Top and bottom margin and padding for desktop and mobile. |
| Advanced | Optional CSS class on the wrapper. |
Technical behaviour
grid-container.jsp maps the type property to Bootstrap-style container classes (width940, width1200, width1600, width768, or full fluid). bgColor is validated against allowed values; many dark or saturated colours add a black-link class so inline links stay readable. Authors can set per-breakpoint margins and padding (inherit or pixel values) and optional photo credit text and colour.
Instances in the codebase
| Location | Notes |
|---|---|
apps/concordia/components/grid-container/grid-container.jsp | Implementation. |
| Item | Location |
|---|---|
| Component | apps/concordia/components/grid-container/grid-container.jsp |
Utilities: Uses validateColor and related helpers from shared Concordia utilities.