skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(typography): add css classes to typography guide (#13154)

Browse Source 
Replaces the bullet list in the typography docs with a table that also shows the CSS classes that each of the breakpoints maps to.

Fixes #13151.
This commit is contained in:
Kristiyan Kostadinov
2018-09-17 18:12:01 +02:00
committed by Jeremy Elbourn
parent f10fdfc95c
commit 68c45ad9a5
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
guides/typography.md
+18 -12
View File
@@ -6,17 +6,23 @@ Angular Material's typography is based on the guidelines from the [Material Desi
arranged into typography levels. Each level has a `font-size`, `line-height` and `font-weight`. The
available levels are:
* `display-4`, `display-3`, `display-2` and `display-1` - Large, one-off headers, usually
at the top of the page (e.g. a hero header).
* `headline` - Section heading corresponding to the `<h1>` tag.
* `title` - Section heading corresponding to the `<h2>` tag.
* `subheading-2` - Section heading corresponding to the `<h3>` tag.
* `subheading-1` - Section heading corresponding to the `<h4>` tag.
* `body-1` - Base body text.
* `body-2` - Bolder body text.
* `caption` - Smaller body and hint text.
* `button` - Buttons and anchors.
* `input` - Form input fields.
| Name | CSS classes | Description |
|-----------------|----------------------------------|-----------------------------------------------------------------------------|
| `display-4` | `.mat-display-4` | Large, one-off header, usually at the top of the page (e.g. a hero header). |
| `display-3` | `.mat-display-3` | Large, one-off header, usually at the top of the page (e.g. a hero header). |
| `display-2` | `.mat-display-2` | Large, one-off header, usually at the top of the page (e.g. a hero header). |
| `display-1` | `.mat-display-1` | Large, one-off header, usually at the top of the page (e.g. a hero header). |
| `headline` | `.mat-h1`, `.mat-headline` | Section heading corresponding to the `<h1>` tag. |
| `title` | `.mat-h2`, `.mat-title` | Section heading corresponding to the `<h2>` tag. |
| `subheading-2` | `.mat-h3`, `.mat-subheading-2` | Section heading corresponding to the `<h3>` tag. |
| `subheading-1` | `.mat-h4`, `.mat-subheading-1` | Section heading corresponding to the `<h4>` tag. |
| `body-1` | `.mat-body`, `.mat-body-1` | Base body text. |
| `body-2` | `.mat-body-strong`, `.mat-body-2`| Bolder body text. |
| `caption` | `.mat-small`, `.mat-caption` | Smaller body and hint text. |
| `button` | None. Used only in components. | Buttons and anchors. |
| `input` | None. Used only in components. | Form input fields. |
The typography levels are collected into a typography config which is used to generate the CSS.
@@ -130,5 +136,5 @@ $config: mat-typography-config();
```
[1]: https://material.io/guidelines/style/typography.html
[1]: https://material.io/archive/guidelines/style/typography.html
[2]: https://fonts.google.com/