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
The quick, brown fox
h2
The quick, brown fox
h3
The quick, brown fox
h4
The quick, brown fox
h5
The quick, brown fox

Headings within a parent of .theme--dark:

The quick, brown fox
The quick, brown fox
The quick, brown fox
The quick, brown fox
The quick, brown fox

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.
Meta copy is used for styling ancillary content, usually in the details panel, that represents details about the content rather than the actual content itself.
Caption text is used primarily below images and on our cards.
Disclaimer text is used for legal and copyright text.

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.
Meta copy is used for styling ancillary content, usually in the details panel, that represents details about the content rather than the actual content itself.
Caption text is used primarily below images and on our cards.
Disclaimer text is used for legal and copyright text.

Inline Icons:

These can be styled with any of the following three classes (along with the usual icon classes ):

  • Here is an example of an inline icon as an independent element (.copy--icon).
  • Here is an example of an inline icon in the before pseudo element (.copy--icon--before).
  • Here is an example of an inline icon in the after pseudo element (.copy--icon--after).