coreui-free-react-admin-template

1
import React from 'react'
2
import { CCard, CCardHeader, CCardBody } from '@coreui/react'
3
import { DocsLink } from 'src/components'
4

5
const Typography = () => {
6
  return (
7
    <>
8
      <CCard className="mb-4">
9
        <CCardHeader>
10
          Headings
11
          <DocsLink href="https://coreui.io/docs/content/typography/" />
12
        </CCardHeader>
13
        <CCardBody>
14
          <p>
15
            Documentation and examples for Bootstrap typography, including global settings,
16
            headings, body text, lists, and more.
17
          </p>
18
          <table className="table">
19
            <thead>
20
              <tr>
21
                <th>Heading</th>
22
                <th>Example</th>
23
              </tr>
24
            </thead>
25
            <tbody>
26
              <tr>
27
                <td>
28
                  <p>
29
                    <code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code>
30
                  </p>
31
                </td>
32
                <td>
33
                  <span className="h1">h1. Bootstrap heading</span>
34
                </td>
35
              </tr>
36
              <tr>
37
                <td>
38
                  <p>
39
                    <code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code>
40
                  </p>
41
                </td>
42
                <td>
43
                  <span className="h2">h2. Bootstrap heading</span>
44
                </td>
45
              </tr>
46
              <tr>
47
                <td>
48
                  <p>
49
                    <code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code>
50
                  </p>
51
                </td>
52
                <td>
53
                  <span className="h3">h3. Bootstrap heading</span>
54
                </td>
55
              </tr>
56
              <tr>
57
                <td>
58
                  <p>
59
                    <code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code>
60
                  </p>
61
                </td>
62
                <td>
63
                  <span className="h4">h4. Bootstrap heading</span>
64
                </td>
65
              </tr>
66
              <tr>
67
                <td>
68
                  <p>
69
                    <code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code>
70
                  </p>
71
                </td>
72
                <td>
73
                  <span className="h5">h5. Bootstrap heading</span>
74
                </td>
75
              </tr>
76
              <tr>
77
                <td>
78
                  <p>
79
                    <code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code>
80
                  </p>
81
                </td>
82
                <td>
83
                  <span className="h6">h6. Bootstrap heading</span>
84
                </td>
85
              </tr>
86
            </tbody>
87
          </table>
88
        </CCardBody>
89
      </CCard>
90
      <CCard className="mb-4">
91
        <CCardHeader>Headings</CCardHeader>
92
        <CCardBody>
93
          <p>
94
            <code className="highlighter-rouge">.h1</code> through
95
            <code className="highlighter-rouge">.h6</code>
96
            classes are also available, for when you want to match the font styling of a heading but
97
            cannot use the associated HTML element.
98
          </p>
99
          <div className="bd-example">
100
            <p className="h1">h1. Bootstrap heading</p>
101
            <p className="h2">h2. Bootstrap heading</p>
102
            <p className="h3">h3. Bootstrap heading</p>
103
            <p className="h4">h4. Bootstrap heading</p>
104
            <p className="h5">h5. Bootstrap heading</p>
105
            <p className="h6">h6. Bootstrap heading</p>
106
          </div>
107
        </CCardBody>
108
      </CCard>
109
      <CCard className="mb-4">
110
        <div className="card-header">Display headings</div>
111
        <div className="card-body">
112
          <p>
113
            Traditional heading elements are designed to work best in the meat of your page content.
114
            When you need a heading to stand out, consider using a <strong>display heading</strong>
115
            —a larger, slightly more opinionated heading style.
116
          </p>
117
          <div className="bd-example bd-example-type">
118
            <table className="table">
119
              <tbody>
120
                <tr>
121
                  <td>
122
                    <span className="display-1">Display 1</span>
123
                  </td>
124
                </tr>
125
                <tr>
126
                  <td>
127
                    <span className="display-2">Display 2</span>
128
                  </td>
129
                </tr>
130
                <tr>
131
                  <td>
132
                    <span className="display-3">Display 3</span>
133
                  </td>
134
                </tr>
135
                <tr>
136
                  <td>
137
                    <span className="display-4">Display 4</span>
138
                  </td>
139
                </tr>
140
              </tbody>
141
            </table>
142
          </div>
143
        </div>
144
      </CCard>
145
      <CCard className="mb-4">
146
        <CCardHeader>Inline text elements</CCardHeader>
147
        <CCardBody>
148
          <p>
149
            Traditional heading elements are designed to work best in the meat of your page content.
150
            When you need a heading to stand out, consider using a <strong>display heading</strong>
151
            —a larger, slightly more opinionated heading style.
152
          </p>
153
          <div className="bd-example">
154
            <p>
155
              You can use the mark tag to <mark>highlight</mark> text.
156
            </p>
157
            <p>
158
              <del>This line of text is meant to be treated as deleted text.</del>
159
            </p>
160
            <p>
161
              <s>This line of text is meant to be treated as no longer accurate.</s>
162
            </p>
163
            <p>
164
              <ins>This line of text is meant to be treated as an addition to the document.</ins>
165
            </p>
166
            <p>
167
              <u>This line of text will render as underlined</u>
168
            </p>
169
            <p>
170
              <small>This line of text is meant to be treated as fine print.</small>
171
            </p>
172
            <p>
173
              <strong>This line rendered as bold text.</strong>
174
            </p>
175
            <p>
176
              <em>This line rendered as italicized text.</em>
177
            </p>
178
          </div>
179
        </CCardBody>
180
      </CCard>
181
      <CCard className="mb-4">
182
        <CCardHeader>Description list alignment</CCardHeader>
183
        <CCardBody>
184
          <p>
185
            Align terms and descriptions horizontally by using our grid system’s predefined classes
186
            (or semantic mixins). For longer terms, you can optionally add a{' '}
187
            <code className="highlighter-rouge">.text-truncate</code> class to truncate the text
188
            with an ellipsis.
189
          </p>
190
          <div className="bd-example">
191
            <dl className="row">
192
              <dt className="col-sm-3">Description lists</dt>
193
              <dd className="col-sm-9">A description list is perfect for defining terms.</dd>
194

195
              <dt className="col-sm-3">Euismod</dt>
196
              <dd className="col-sm-9">
197
                <p>
198
                  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
199
                </p>
200
                <p>Donec id elit non mi porta gravida at eget metus.</p>
201
              </dd>
202

203
              <dt className="col-sm-3">Malesuada porta</dt>
204
              <dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
205

206
              <dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
207
              <dd className="col-sm-9">
208
                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
209
                fermentum massa justo sit amet risus.
210
              </dd>
211

212
              <dt className="col-sm-3">Nesting</dt>
213
              <dd className="col-sm-9">
214
                <dl className="row">
215
                  <dt className="col-sm-4">Nested definition list</dt>
216
                  <dd className="col-sm-8">
217
                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
218
                  </dd>
219
                </dl>
220
              </dd>
221
            </dl>
222
          </div>
223
        </CCardBody>
224
      </CCard>
225
    </>
226
  )
227
}
228

229
export default Typography
230