Typography
We achieve styling through opt in classes and do not style elements globally. This is to reduced the number of style collisions across projects. Elements can inherit styles from .copy--body or otherwise applied directly.
Typographic elements do not come with any margins attached to them in order to make them more flexible in where they can be used.
They get margins when they are inside a wrapper with a class of context--content. We may need to work on the naming but the principle is solid.
Headings:
h1
h2
h3
h4
h5
Headings within a parent of .theme--dark:
Other Copy:
Feature text: typically used for intro paragraphs and rarely outside of copy--body. It is applied using the .copy--feature class.
Here lies a bunch of body copy. The Body copy class (.copy--body) can be inherited from a parent or applied direct to any element. In this instance it is inherited. It defines the styles that represent our main text content. Base Link styling is inherited or can be enhanced directly using the .copy--body__link class
- This is how our unordered lists look.
- They can be inherited from copy--body or styled directly with the .copy--list class if used outside of main content.
Other Copy within a parent of .theme--dark:
Feature text: typically used for intro paragraphs and rarely outside of copy--body. It is applied using the .copy--feature class.
Here lies a bunch of body copy. The Body copy class (.copy--body) can be inherited from a parent or applied direct to any element. In this instance it is inherited. It defines the styles that represent our main text content. Base Link styling is inherited or can be enhanced directly using the .copy--body__link class
- This is how our unordered lists look.
- They can be inherited from copy--body or styled directly with the .copy--list class if used outside of main content.