### Responsive and static image HTML example Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Shows two image tags: a responsive one with width:100% and max-width set to desktop width, and a static one with fixed dimensions. Use the responsive version for images that should scale down; use the static version when scaling is not needed. ```HTML alt_text

``` -------------------------------- ### Changing colors with dark mode utility classes Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/dark-mode.md Complete HTML example that changes the background of a and the color of a

tag using a CSS utility class inside a prefers-color-scheme media query. The utility class overrides the inline background-color style. ```html

Some text goes here.

``` -------------------------------- ### Lists HTML Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use ul and ol tags with inline styles for email lists. The example includes padding, margin, and list-style-type styles for both unordered and ordered lists. ```HTML

Unordered list item
Unordered list item
Unordered list item

Ordered list item
Ordered list item
Ordered list item

``` -------------------------------- ### Link HTML Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use an anchor tag with inline color style for email links. The example sets the link color to teal. ```HTML Link text ``` -------------------------------- ### Web Font Implementation with Outlook Fallback Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Include an external stylesheet in the and wrap the web font reference in

Text in Lobster in email clients that support web fonts.

``` -------------------------------- ### Prevent Text Wrapping with Non-Breaking Space Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use   to keep words on the same line, preventing typographic orphans and widows. The example shows the HTML entity in a paragraph. ```HTML I want these words to stay together and prevent widows. ``` -------------------------------- ### Swapping images for dark mode with prefers-color-scheme Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/dark-mode.md Uses two image files (light and dark) and CSS utility classes to display one at a time based on the color scheme. Includes conditional comments to hide the dark mode image from Windows Outlook, which doesn't support the media feature. ```html

``` -------------------------------- ### Background image with CSS and VML fallback Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Implements a background image on a table cell using inline CSS and a VML fallback for Windows Outlook and Win10 Mail. The VML rect and fill must be defined with width, height, src, and color; the image should be prepared @1x for Outlook and @2x for other clients. ```HTML

Foreground HTML content.

``` -------------------------------- ### Basic dark mode utility class with prefers-color-scheme Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/dark-mode.md Shows the core pattern for a dark mode utility class that overrides inline styles with !important. The class is applied to an element with an inline color to switch text color in dark mode. ```html

Text that is black in light mode and white in dark mode.

``` -------------------------------- ### Hybrid two-column layout with ghost tables Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/hybrid-responsive.md HTML snippet showing a hybrid email layout with two columns that stack on mobile without media queries. Uses inline-block divs with min-width and max-width, plus conditional MSO ghost tables for Outlook. Columns display side-by-side on wide screens and stack on narrow screens. ```HTML

Column 1

Column 2

``` -------------------------------- ### HTML table for email layout Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use a table with role="presentation" to create a dependable layout for HTML emails. The attributes cellspacing="0", cellpadding="0", and border="0" negate unwanted spacing, padding, and borders. The width="100%" attribute is optional and forces the table to take up all available horizontal space. ```HTML

…

``` -------------------------------- ### Button Pattern (HTML) Source: https://github.com/emailmonday/cerberus/blob/main/docs/templates/index.html A responsive and accessible button pattern for HTML emails, using a table-based layout with inline styles. It is designed to work across email clients and can be customized. ```HTML

Button Text

``` -------------------------------- ### Button Hover and Dark Mode CSS Source: https://github.com/emailmonday/cerberus/blob/main/docs/templates/index.html CSS for button hover and dark mode support, using the .ex-button class. It changes the background color on hover and adapts to dark color schemes. ```CSS .ex-button:hover, .ex-button:focus { background: #555555 !important; } @media (prefers-color-scheme: dark) { .ex-button { background: #ffffff !important; color: #222222 !important; } .ex-button:hover { background: #cccccc !important; } } ``` -------------------------------- ### Solid background color with HTML attribute and inline CSS Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Shows two equivalent ways to set a solid background color in an email table: using the bgcolor attribute or the inline CSS background-color property. Both are well supported in email clients. ```HTML

…

``` -------------------------------- ### Headlines HTML Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use semantic h1-h3 tags with empty style attributes for email headings. Inline CSS is required to specify intended styles and zero out unintended defaults. ```HTML

Heading level 1

Heading level 2

Heading level 3

``` -------------------------------- ### HTML button with hover styles Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use this HTML structure to create a primary button in an email. The style block defines hover and focus styles for the button classes. The table and td provide the button background and border-radius, while the anchor tag provides the clickable area and text. Some styles are duplicated between the anchor and its parent td because desktop Outlook and Office 365 on Windows don't style links as block-level tags. ```HTML

Primary Button

``` -------------------------------- ### Ghost table for Outlook fixed width Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/outlook.md Wrap a div with inline-block and max-width in an MSO ghost table to apply a fixed width (340px) for Outlook, which doesn't support these CSS properties. Without it, Outlook displays the div at 100% width. ```HTML

Outlook can’t render the CSS in this DIV but other email clients can, so we wrap this in a ghost table that replicates the DIV’s desktop style. In this case, a container 340px wide.

``` -------------------------------- ### Paragraphs HTML Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use semantic p tags with empty style attributes for email paragraphs. Inline CSS is required to specify intended styles and zero out unintended defaults. ```HTML

Paragraph text

More paragraph text

``` -------------------------------- ### Auto-detected links CSS and HTML Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Some email clients auto-detect text like dates, times, and locations and convert them to hyperlinks. This snippet uses a style block and a class to make those auto-detected links appear like surrounding text. Note: only email clients that support

Our mailing address is 123 Fake St.

``` -------------------------------- ### Basic MSO conditional comment for HTML content Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/outlook.md Use this MSO conditional comment to add HTML content that is only rendered by Word-based versions of Outlook. Other email clients ignore this code. ```HTML ``` -------------------------------- ### MSO conditional comment for CSS styles Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/outlook.md Use this MSO conditional comment to add CSS styles that target Outlook. Outlook supports CSS in the , and other email clients ignore this code. ```HTML ``` -------------------------------- ### Removing dark mode styles from the head Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/dark-mode.md CSS comment block that marks the dark mode styles section in the template's . Removing this block safely disables dark mode support. ```css /* Dark Mode Styles : BEGIN */ @media (prefers-color-scheme: dark) { … } /* Dark Mode Styles : END */ ``` -------------------------------- ### HTML spacer row for email Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use this spacer row to create separation between tables or rows where padding and margin cannot be reliably applied. The height attribute sets the size of the spacer, and aria-hidden="true" hides the from screen readers. The is needed because some email clients collapse the spacer's height if there's no content, and the inline style prevents additional space from font-size and line-height. ```HTML ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.