Typography

There are 11 contextual typography styles to choose from which can be mixed to suit a large number of text layouts. These styles mimics the material design typography styles. This means that the default typeface is Roboto and the script type is English and English-like (Latin, Greek, and Cyrillic).

Display 4

Display 3

Display 2

Display 1

Headline

Title

Subheading

Body 2

Body 1

Caption

Button

Markup

<p pam-typography="display-4" pam-Typography-Text>Display 4</p>
<p pam-typography="display-3" pam-Typography-Text>Display 3</p>
<p pam-typography="display-2" pam-Typography-Text>Display 2</p>
<p pam-typography="display-1" pam-Typography-Text>Display 1</p>
<p pam-typography="headline" pam-Typography-Text>Headline</p>
<p pam-typography="title" pam-Typography-Text>Title</p>
<p pam-typography="subheading" pam-Typography-Text>Subheading</p>
<p pam-typography="body-2" pam-Typography-Text>Body 2</p>
<p pam-typography="body-1" pam-Typography-Text>Body 1</p>
<p pam-typography="caption" pam-Typography-Text>Caption</p>
<p pam-typography="button" pam-Typography-Text>Button</p>

Deprecated

These typography rulez will be deprecated in version 1.0.0+.

Deprecated: Styling for legacy typography types. Support will be dropped after PAM version 1.0+.

Subheader

Form

Body strong

Small

Markup

<p pam-typography="subheader" pam-Typography-Text>Subheader</p>
<p pam-typography="form" pam-Typography-Text>Form</p>
<p pam-typography="body:strong" pam-Typography-Text>Body strong</p>
<p pam-typography="small" pam-Typography-Text>Small</p>

Hooks

.hook-typography .hook-typography-body .hook-typography-body-2 .hook-typography-body-strong .hook-typography-button .hook-typography-caption .hook-typography-display-1 .hook-typography-display-2 .hook-typography-display-3 .hook-typography-display-4 .hook-typography-form .hook-typography-headline .hook-typography-small .hook-typography-subheader .hook-typography-subheading .hook-typography-title