AEM Component Styles
Listed below are the styles that can applied to specific components in AEM.
To apply a style, type the style name into the CSS Class field when editing a component. Style names are case sensitive
half
Renders the text at 50% its usual width.
third
Renders the text at 33% its usual width.
two-thirds
Renders the text at 66% its usual width.
section-heading
For all Heading 2 elements within the Text component, renders the text in white with a grey background.
deptNews
Wraps the content of your Text component in a div with a shaded border. This style is recommended for important one time news/events.
intro
Increases the font size to 14px with a line-height of 21px. An ideal line length is less than 54 characters.
ruled
Places a grey border above the element (typically a paragraph or header)
ruled-below
Places a grey border below the element (typically a paragraph or header)
relatedTopics
Can be applied to the List component or a list within a Text component. Creates a list of items separated by a dividing line with a grey bar on the left side to separate it from the main content area.
text-bg
Adds a red background to the text element and changes the text colour to white.
marginTop
Adds a margin above the component.
marginBottom
Adds a margin below the component.
galleryBox
To draw attention to a link on the page, renders the link like a button with white text and a brightly coloured background.
Tip: Within a text component, you can apply styles to individual elements such as headings, links and paragraphs. These styles can be applied by switching to HTML mode in the Text component box and adding a class attribute (e.g., <p class="intro">).
Generic styles
These styles can be applied to most components in AEM.
xl-width
Constrains the container to a maximum width of 908px
l-width
Constrains the container to a maximum width of 726px
m-width
Constrains the container to a maximum width of 545px
s-width
Constrains the container to a maximum width of 363px
xs-width
Constrains the container to a maximum width of 181px
List styles
Apply these styles to the List component in AEM.
Note: The List component is often used to populate a navigation menu for child pages of a parent page. For regular lists (<ul>, <ol>, etc.) see Text styles.
relatedTopics
Can be applied to the List component or a list within a Text component (in Source Edit mode). Creates a list of items separated by a dividing line with a grey bar on the left side to separate it from the main content area.
tiled
Splits the list into two columns on large screens.
Image styles
Apply these styles to the Image component in AEM.
half
Renders the image at 50% its usual width.
third
Renders the image at 33% its usual width.
two-thirds
Renders the image at 66% its usual width.
Text & Image styles
Apply these styles to the Text & Image component in AEM.
View Text & Image Style Samples
overlay
Sets the image to occupy 100% of the container width and overlays the text on the image. Use only Heading 1 or Paragraph for this style.
overlay-bg
Adds a black semi-transparent background to the overlay class.
Column styles
Apply these styles to the Columns component in AEM.
col-clear
Forces elements in a column to clear (stack on top of each other) when the browser window or device is medium-width. By default, columns will float their contents side-by-side until the window is 768px wide.
Carousel styles
Apply these styles to the Carousel component in AEM.
narrow-carousel-image
The grey text block will move under the image when the browser width is less than 1200px instead of 1500px — the default.