Class Reference#
This page is the canonical reference for every Theme Editor class used in the Shadows framework. Use it when building new templates or custom components to choose the right class for the visual treatment you want.
For converting existing markup from the pre-26.01.00 class names, see the Class Mapping Tables instead.
Typography Classes#
Typography classes style text: headings, subheadings, body copy, and commerce-specific text like prices.
Titles and Display#
| Class | Purpose |
|---|---|
mm-theme-typography-display-two |
Extra-large marketing headlines |
mm-theme-typography-display-three |
Large marketing headlines |
mm-theme-typography-title-one |
Primary page titles (largest) |
mm-theme-typography-title-two |
Standard page titles — the most common choice for <h1> |
mm-theme-typography-title-three |
Section headings — cart title, shop-by-category heading, major page sections |
mm-theme-typography-title-four |
Subsection headings, form group titles, card titles, login block headings |
Subheadings#
Subheadings are for labels and secondary headings — they carry less visual weight than title classes.
| Class | Purpose |
|---|---|
mm-theme-typography-subheading-large |
Prominent subheadings, featured callouts |
mm-theme-typography-subheading-small |
Footer menu titles, collapsible section labels, table cell headings |
mm-theme-typography-subheading-extra-small |
Labels above field groups, order summary labels, small uppercase labels |
Paragraphs#
Paragraph classes style body copy.
| Class | Purpose |
|---|---|
mm-theme-typography-paragraph-large |
Prominent body copy |
mm-theme-typography-paragraph-small |
Standard body copy |
mm-theme-typography-paragraph-extra-small |
Supporting text, helper text, form hints, order metadata |
Commerce Typography#
These classes are specific to pricing and product information. They let merchants control how prices, discounts, and strikethroughs render independently from general body text.
| Class | Purpose |
|---|---|
mm-theme-typography-price-extra-small |
Current price displays |
mm-theme-typography-price-large |
Large/featured price displays |
mm-theme-typography-additional-price-extra-small |
Original price before discount (often shown with strikethrough) |
mm-theme-typography-additional-price-large |
Larger original-price displays |
mm-theme-typography-discount-extra-small |
Discount amounts, savings callouts, “You Save” text |
Button Classes#
Button classes come in pairs: a base class plus a size modifier. Always apply both together.
Primary Buttons#
Primary buttons represent the main action on a page or in a form — “Add to Cart,” “Continue,” “Save,” “Log In,” “Place Order.”
| Class Pair | Use Case |
|---|---|
mm-theme-button-primary mm-theme-button-primary__extra-small |
Compact primary buttons (icon toolbars, tight table cells) |
mm-theme-button-primary mm-theme-button-primary__small |
Standard primary action buttons — the most common choice |
mm-theme-button-primary mm-theme-button-primary__medium |
Larger primary buttons for emphasis |
Secondary Buttons#
Secondary buttons represent a secondary action — “Cancel,” “Back,” “Continue Shopping,” “Forgot Password?”
| Class Pair | Use Case |
|---|---|
mm-theme-button-secondary mm-theme-button-secondary__extra-small |
Compact secondary buttons |
mm-theme-button-secondary mm-theme-button-secondary__small |
Standard secondary buttons |
mm-theme-button-secondary mm-theme-button-secondary__medium |
Emphasized secondary buttons |
Link Buttons#
Link buttons are visually styled as text links but behave as buttons — they don’t have a button-shaped chrome around them. Use these for inline text actions like “Edit,” “Delete,” “Set as Default,” “Forgot Password?”
| Class Pair | Use Case |
|---|---|
mm-theme-button-primary-link mm-theme-button-primary-link__medium |
Emphasized text-style action links |
mm-theme-button-secondary-link mm-theme-button-secondary-link__extra-small |
Very compact text links (table sort headers) |
mm-theme-button-secondary-link mm-theme-button-secondary-link__small |
Compact text-style action links (Edit, Delete) |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
Standard text-style action links (Forgot Password?, Remove Item) |
mm-theme-button-secondary-link mm-theme-button-secondary-link__large |
Prominent text-style links |
Navigation Buttons#
Navigation buttons are used for navigation UI elements: main menus, basket links, account toggles, category tree entries, breadcrumbs. They give merchants a dedicated Theme Editor setting for chrome navigation that’s distinct from in-page action buttons.
| Class Pair | Use Case |
|---|---|
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__extra-small |
Compact navigation icons (minibasket close) |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |
Primary navigation elements: basket link, account toggle, product names in cart |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__large |
Prominent navigation icons (hamburger menu, header search icon) |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__small |
Compact secondary navigation (uppercase nav links) |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
Standard secondary navigation: main nav links, footer links, category tree links, breadcrumbs |
Display Links#
Display links are prominent, feature-styled text links used in featured content sections — the text-style equivalent of a display heading.
| Class Pair | Use Case |
|---|---|
mm-theme-button-display-link mm-theme-button-display-link__medium |
Prominent text links in content callouts (newsletter blocks, feature promos) |
Choosing Between Button Types#
When you have an action that could be rendered as either a button or a link, use this decision guide:
| If the element is… | Use |
|---|---|
| A primary form submission (“Save,” “Continue to Checkout”) | mm-theme-button-primary |
| An alternative or cancel action (“Back,” “Cancel”) | mm-theme-button-secondary |
| An inline text action inside a form or list (“Edit,” “Delete,” “Forgot Password?”) | mm-theme-button-secondary-link |
| A highlighted text action in a content section | mm-theme-button-primary-link or mm-theme-button-display-link |
| A link in the global header, footer, or category tree | mm-theme-button-primary-navigation or mm-theme-button-secondary-navigation |
| A product name or basket link in the cart | mm-theme-button-primary-navigation |
| A category tree link, breadcrumb, or menu link | mm-theme-button-secondary-navigation |
Size Selection Guide#
When choosing between __extra-small, __small, __medium, and __large, use these general rules:
| Size | Typical Use |
|---|---|
__extra-small |
Icon-only buttons, table cell actions, compact inline controls |
__small |
The default size for most forms and page actions |
__medium |
Feature buttons, checkout CTAs, account page primary actions |
__large |
Hero CTAs and prominent marketing callouts |
Shadows size offset
If you are converting from legacy Shadows classes, note that Shadows button modifiers don’t map one-to-one to Theme Editor sizes:
- Shadows
c-button--small→ Theme Editor__extra-small - Shadows default (no modifier) → Theme Editor
__small - Shadows
c-button--large→ Theme Editor__medium
See the Class Mapping Tables for the complete conversion.
Combining Classes#
You can combine a Theme Editor class with structural classes, utility classes, and component modifiers in the same class="" attribute. The Theme Editor class handles appearance (font, color, spacing inherent to the type); the other classes handle layout, positioning, and page-specific styling.
Examples:
<!-- Full-width primary button -->
<input type="submit" class="mm-theme-button-primary mm-theme-button-primary__small c-button--full" value="Log In">
<!-- Title with layout utilities -->
<h1 class="mm-theme-typography-title-two o-layout--justify-between u-flex">Account</h1>
<!-- Subheading with icon -->
<span class="c-menu__title mm-theme-typography-subheading-small">Customer Service</span>
<!-- Link button with custom color override -->
<button class="mm-theme-button-secondary-link mm-theme-button-secondary-link__medium u-color-red">Delete This Address</button>
Quick Lookup Table#
Use this table to quickly find the right class when you know the visual role of your element.
| I want to style… | Use this class |
|---|---|
| The main page title | mm-theme-typography-title-two |
| A section heading within a page | mm-theme-typography-title-three |
| A form section label or card title | mm-theme-typography-title-four |
| A footer column heading | mm-theme-typography-subheading-small |
| A label above a form field group | mm-theme-typography-subheading-extra-small |
| Body paragraph text | mm-theme-typography-paragraph-small |
| Helper text or a small hint | mm-theme-typography-paragraph-extra-small |
| A product price | mm-theme-typography-price-extra-small |
| A crossed-out original price | mm-theme-typography-additional-price-extra-small |
| A discount amount or “You Save” text | mm-theme-typography-discount-extra-small |
| The main “Submit” or “Save” button on a form | mm-theme-button-primary mm-theme-button-primary__small |
| A “Cancel” or “Back” button | mm-theme-button-secondary mm-theme-button-secondary__small |
| An inline “Edit” or “Delete” action | mm-theme-button-secondary-link mm-theme-button-secondary-link__small |
| A “Forgot Password?” or “Add to Wish List” text link | mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
| A main navigation menu link | mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
| The basket link in the header | mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |
| A category tree link | mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
| A product name in the cart (clickable) | mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |