mui/examples/email/typography.html at angular-bugfixes · cssCheck/mui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />

    <!-- external link for testing only -->
    <link rel="stylesheet" href="../assets/mui/email/mui-email-styletag.css" inline />
    <link rel="stylesheet" href="../assets/mui/email/mui-email-inline.css" />
  </head>
  <body>
    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <center>
            <!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
            <div class="mui-container">
              <div class="mui-panel">
                <div class="mui--text-display4">Display4</div>
                <div class="mui--text-display3">Display3</div>
                <div class="mui--text-display2">Display2</div>
                <div class="mui--text-display1">Display1</div>
                <div class="mui--text-headline">Headline</div>
                <div class="mui--text-title">Title</div>
                <div class="mui--text-subhead">Subhead</div>
                <div class="mui--text-body2">Body2</div>
                <div class="mui--text-body1">Body1</div>
                <div class="mui--text-caption">Caption</div>
                <div class="mui--text-menu">Menu</div>
                <div class="mui--text-button">Button</div>
                <hr>
                <div style="background-color:#444;" class="mui--text-light">
                  <div class="mui--text-display4">Display4</div>
                  <div class="mui--text-display3">Display3</div>
                  <div class="mui--text-display2">Display2</div>
                  <div class="mui--text-display1">Display1</div>
                  <div class="mui--text-headline">Headline</div>
                  <div class="mui--text-title">Title</div>
                  <div class="mui--text-subhead">Subhead</div>
                  <div class="mui--text-body2">Body2</div>
                  <div class="mui--text-body1">Body1</div>
                  <div class="mui--text-caption">Caption</div>
                  <div class="mui--text-menu">Menu</div>
                  <div class="mui--text-button">Button</div>
                </div>
                <hr>
                <div class="mui--text-accent">
                  <div class="mui--text-display4">Display4</div>
                  <div class="mui--text-display3">Display3</div>
                  <div class="mui--text-display2">Display2</div>
                  <div class="mui--text-display1">Display1</div>
                  <div class="mui--text-headline">Headline</div>
                  <div class="mui--text-title">Title</div>
                  <div class="mui--text-subhead">Subhead</div>
                  <div class="mui--text-body2">Body2</div>
                  <div class="mui--text-body1">Body1</div>
                  <div class="mui--text-caption">Caption</div>
                  <div class="mui--text-menu">Menu</div>
                  <div class="mui--text-button">Button</div>
                </div>
              </div>

              <!-- with color helpers -->
              <div class="mui-panel">
                <div class="mui--text-display4 mui--text-dark-secondary">Display4</div>
                <div class="mui--text-display3 mui--text-dark-secondary">Display3</div>
                <div class="mui--text-display2 mui--text-dark-secondary">Display2</div>
                <div class="mui--text-display1 mui--text-dark-secondary">Display1</div>
                <div class="mui--text-headline mui--text-dark">Headline</div>
                <div class="mui--text-title mui--text-dark">Title</div>
                <div class="mui--text-subhead mui--text-dark">Subhead</div>
                <div class="mui--text-body2 mui--text-dark">Body2</div>
                <div class="mui--text-body1 mui--text-dark">Body1</div>
                <div class="mui--text-caption mui--text-dark-secondary">Caption</div>
                <div class="mui--text-menu mui--text-dark">Menu</div>
                <div class="mui--text-button mui--text-dark">Button</div>
                <hr>
                <div style="background-color:#444;">
                  <div class="mui--text-display4 mui--text-light-secondary">Display4</div>
                  <div class="mui--text-display3 mui--text-light-secondary">Display3</div>
                  <div class="mui--text-display2 mui--text-light-secondary">Display2</div>
                  <div class="mui--text-display1 mui--text-light-secondary">Display1</div>
                  <div class="mui--text-headline mui--text-light">Headline</div>
                  <div class="mui--text-title mui--text-light">Title</div>
                  <div class="mui--text-subhead mui--text-light">Subhead</div>
                  <div class="mui--text-body2 mui--text-light">Body2</div>
                  <div class="mui--text-body1 mui--text-light">Body1</div>
                  <div class="mui--text-caption mui--text-light-secondary">Caption</div>
                  <div class="mui--text-menu mui--text-light">Menu</div>
                  <div class="mui--text-button mui--text-light">Button</div>
                </div>
                <hr>
                <div class="mui--text-display4 mui--text-accent-secondary">Display4</div>
                <div class="mui--text-display3 mui--text-accent-secondary">Display3</div>
                <div class="mui--text-display2 mui--text-accent-secondary">Display2</div>
                <div class="mui--text-display1 mui--text-accent-secondary">Display1</div>
                <div class="mui--text-headline mui--text-accent">Headline</div>
                <div class="mui--text-title mui--text-accent">Title</div>
                <div class="mui--text-subhead mui--text-accent">Subhead</div>
                <div class="mui--text-body2 mui--text-accent">Body2</div>
                <div class="mui--text-body1 mui--text-accent">Body1</div>
                <div class="mui--text-caption mui--text-accent-secondary">Caption</div>
                <div class="mui--text-menu mui--text-accent">Menu</div>
                <div class="mui--text-button mui--text-accent">Button</div>
              </div>
            </div>
            <!--[if mso]></td></tr></table><![endif]-->
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>