Style Guide
No class here; standard paragraph size — set size within variables.
Block Quote
- Bullet list item
- Bullet list item
- Numbered list item
- Numbered list item
- Numbered list item
IMPORTANT!
- From Variables: Usually add modes for 1440px+ and Mobile L; Base Mode (Desktop) can also often be used for 1280 & Tablet too.
- From BASE Mode (desktop) in Designer: For each H level, set text weight, % height (leading), letter spacing (kerning), & margins.
H1: set as variables
H2: set as variables
H3: set as variables
H4: set as variables
H5: set as variables
H6: set as variables
IMPORTANT!
- From BASE Mode (desktop) for each text block (H level) below: Manually tie each of these to their corresponding H-level variable, so "Size" (next to purple variable) appears as blue.
- From BASE Mode (desktop) for each text block (H level) below: Also manually match text weight, % height (leading), letter spacing (kerning), & margins w/ pink H values.
Large paragraph here - set within variables
Mirrors 'all paragraphs' above but has blue class.
Small paragraph here - set within variables
IMPORTANT!
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Set text weight to this class after font(s) installed; prefer variable font(s).
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
icon-height-1rem
icon-height-1.5rem
icon-height-2rem
icon-height-3rem
icon-height-5rem
icon-height-6.5rem
icon-height-custom1
HTML embed icons enable you to control icon color on hover.
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
Card Header
MRA hosts several major events throughout the year that bring together world renowned researchers, physicians, patient advocates, donors, and partners, all working to advance melanoma research.
Learn More