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
button
Turns a hyperlinked paragraph text into a call-to-action button. The width of the button depends on the legth of the copy. On mouseover, the button goes from red to white. The colours of the button will be reversed if placed on a red block.
button-full
Turns a hyperlinked paragraph text into a call-to-action button that stretches to the full width of the column. On mouseover, the button goes from red to white. The colours of the button will be reversed if placed on a red block.
intro
Increases the font size to 18px with a line-height of 30px. 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)
ruled-red
Places a thin red border above the element (typically a paragraph or header).
ruled-below-red
Places a thin red 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.
marginTop
Adds a 30px margin above the component.
marginBottom
Adds a 30px margin below the component.
more
Increases the font size and of the hyperlinked paragraph text and transforms it to upper case. Using the arrow (→) is optional but it can help prompt your audience to read more.
outline
Adds a thin border/frame around your copy.
quote
Adds a pull quote to your pages or news stories. Use paragraph text for the body of the quote and "Heading 5" for the name attribute. The pull quote can also be used with a red or grey block in a Column Control component.
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.
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.
mobile
Displays the element on mobile-size screens only
tablet
Displays the element on tablet-size screens only
desktop
Displays the element on desktop-size screens only
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
col-2
Splits the list into two columns on large screens.
col-3
Splits the list into three columns on large screens.
col-4
Splits the list into four columns on large screens.
Apply these styles to the Configurable View in the List component in AEM.
date-above
Displays the date above the title.
date-overlay
Overlays the date on top of the image aligned to the bottom. It can also be used with the date-above class to align the date with the top of the image.
stack
Stacks all fields on top of each other instead of showing the image and content side by side. The title and date are displayed above the image.
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 with a semi-transparent black background on the image. You can use Heading 2-Heading 5 or Paragraph to format the text.
overlay-banner
Creates a text overlay with a red background. If used on a home page, the component should be placed inside a Column Control component with 1-column (100%) selected. The "Full Width" and "No Spacing" checkboxes should be selected so the image stretches the entire width of the screen.
overlay-bottom
Adds a full-width, bottom-aligned semi-transparant background with text over the image. You can use Heading 2-Heading 5 or Paragraph to format the text.
overlay-full
Adds the text in the centre of the image with a subtle, semi-transparent black background to improve legibility. You can use Heading 2-Heading 5 or Paragraph to format the text.
Note: When a URL is added to the Advanced Image Properties, the image will be clickable.
Column styles
Apply these styles to the Columns component in AEM.
View column style samples
red block / grey block
Changes a background colour that extends across the entire width of the component.
To create columns with different background colours within one Column Control component, each column colour must be defined. To leave a column with a white background, you do not need to define it as it is by default white.
To define individual column colour add the following to your CSS Style field:
- block
- col-1-red (1 defines the order of column from the left - could be 1, 2, 3, or 4; red defines the colour - could be grey)
md-stack and mds-stack
Stacks all columns on top of each other at the medium or medium-small screen size, respectively.
md-stack-first and mds-stack-first
Stretches the first column to 100% of the screen width with the other two columns stacked underneath at 50% and 50% (side-by-side).
md-stack-last and mds-stack-last
Stretches the last column to 100% of the screen width with the other two columns stacked above at 50% and 50% (side-by-side).