Headlines all start with .h, followed by their individual classname. Paragraphs all start with .p, followed by their classname.
You don't have to use the base class, you can just drag an h2 or paragraph element on the page and it will default to it's base settings.
By default they have margins, but adding the classnames will remove margins.
Body - Large
Body - Medium - Base Class
Body - Medium - 100
Body - Medium - 200
Body - Medium - 300
Body - Medium - Semi-bold - 300
Body - Small
Footnote
If you drop this onto a page make sure you unlink it from it's main instance before you make changes to the element. Right click and hit "unlink instance"
Class is .rich-text - all elements inside will default to the typography base settings from the style guide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
Gradients can be created on any span of text, regardless of parent class.
Create a span and give it the classname .gradient-text.
It will default to the CRO Pink/Purple colors. To change the theme, add the theme name as a combo class.
Example: .gradient-span.design will use the design theme colors.
For paragraph classes, simply add the number to the end.
Body - Regular - Neutral 100
Body - Regular - Neutral 300
Body - Regular - Dark Purple
In most cases you can probably just copy one of the flexboxes below and just adjust the gap size if you need to paste a content box somewhere. To adjust gap size, remove the number class at the end and replace it with a number of your choice from the following range:
4, 6, 8, 12, 16, 24, 48
Stacked and horizontal content boxes may have variable spacing and alignments, but can all be controlled using flexbox.
Use the classname .flex to start. The default for layout is horizontal, while the default for alignment is left.
If you need a vertical layout, you'll need to add an additional class of .vertical right after the .flex base class before you add alignment and gap sizing classnames.
To adjust alignment, add an alignment class after you've added your base classnames.
These are all the classnames for the possible alignments and orientations that would follow your base class or base + vertical class for stacked layouts:
.center-all - centers everything
.center-right - centers content but aligns it to the right side
.center-left - centers content but aligns it to the left side
This is a vertical layout, using default alignment, with 48px of spacing.
.flex.vertical.48
This is a vertical layout, completely centered, with 24px of spacing.
.flex.vertical.center-all.48
This is a horizontal layout, centered with left alignment, with 8px of spacing.
.flex.center-left.8