Skip to main content

CSS Classnames for Brand Email Templates

Courier's standardized CSS classnames allow you to manually set styles in your Brand email templates.

Adding CSS to your Brand Email Notification Templates​

Courier email template CSS is set using inline styles.

You can customize the <style> element in the <head> section of your Brands using custom templates as well as brands built using the Designer UI.

Overwritting

To overwrite existing styles, you have to use !important.

Brand Designer View​

Brand Designer View

Custom Template View​

Custom Template View

MJML Rendering​

Your email template CSS is rendered using MJML. This creates child components out of each component. This means that any style changes you make could apply to multiple children and multiple elements. There is also the potential that changes will not affect the element with the class itself.

Testing your changes

We recommend that you carefully test the resulting changes to your CSS classnames.

You can do this by creating an email notification with the relevant block types, then using the preview tab to observe the effect of your CSS changes.

CSS Classnames​

Content Block Type Classnames​

  • Action block: .c--block-action

  • Divider block: .c--block-divider

  • Image block: .c--block-image

  • List block: .c--block-list

  • Markdown block: .c--block-markdown

  • Quote block: .c--block-quote

  • Template block: .c--block-template

  • Text block .c--block-text

Text Classnames​

  • .c--text-text

  • .c--text-subtext

  • .c--text-h1

  • .c--text-h2

  • .c--text-quote

Other Classnames​

  • .c--email-footer

  • .c--email-header

  • .c--email-header img (logo)

  • .c--social

  • .c--email-body

Was this helpful?