Typography.jsx
5.92 KB
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/*!
=========================================================
* Light Bootstrap Dashboard React - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { Component } from "react";
import { Grid, Row, Col } from "react-bootstrap";
import Card from "components/Card/Card.jsx";
class Typography extends Component {
render() {
return (
<div className="content">
<Grid fluid>
<Row>
<Col md={12}>
<Card
title="Light Bootstrap Table Heading"
category="Created using Roboto Font Family"
content={
<div>
<div className="typo-line">
<h1>
<p className="category">Header 1</p>Light Bootstrap
Table Heading{" "}
</h1>
</div>
<div className="typo-line">
<h2>
<p className="category">Header 2</p>Light Bootstrap
Table Heading
</h2>
</div>
<div className="typo-line">
<h3>
<p className="category">Header 3</p>Light Bootstrap
Table Heading
</h3>
</div>
<div className="typo-line">
<h4>
<p className="category">Header 4</p>Light Bootstrap
Table Heading
</h4>
</div>
<div className="typo-line">
<h5>
<p className="category">Header 5</p>Light Bootstrap
Table Heading
</h5>
</div>
<div className="typo-line">
<h6>
<p className="category">Header 6</p>Light Bootstrap
Table Heading
</h6>
</div>
<div className="typo-line">
<p>
<span className="category">Paragraph</span>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam.
</p>
</div>
<div className="typo-line">
<p className="category">Quote</p>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam.
</p>
<small>Steve Jobs, CEO Apple</small>
</blockquote>
</div>
<div className="typo-line">
<p className="category">Muted Text</p>
<p className="text-muted">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet.
</p>
</div>
<div className="typo-line">
{/* <!--
there are also "text-info", "text-success", "text-warning", "text-danger" clases for the text
--> */}
<p className="category">Coloured Text</p>
<p className="text-primary">
Text Primary - Light Bootstrap Table Heading and complex
bootstrap dashboard you've ever seen on the internet.
</p>
<p className="text-info">
Text Info - Light Bootstrap Table Heading and complex
bootstrap dashboard you've ever seen on the internet.
</p>
<p className="text-success">
Text Success - Light Bootstrap Table Heading and complex
bootstrap dashboard you've ever seen on the internet.
</p>
<p className="text-warning">
Text Warning - Light Bootstrap Table Heading and complex
bootstrap dashboard you've ever seen on the internet.
</p>
<p className="text-danger">
Text Danger - Light Bootstrap Table Heading and complex
bootstrap dashboard you've ever seen on the internet.
</p>
</div>
<div className="typo-line">
<h2>
<p className="category">Small Tag</p>Header with small
subtitle <br />
<small>".small" is a tag for the headers</small>{" "}
</h2>
</div>
</div>
}
/>
</Col>
</Row>
</Grid>
</div>
);
}
}
export default Typography;