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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'tiles'
- var parent = 'components'
- var title = 'Tiles - Components - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('tiles', 'Tiles')
include ../_layout/_ad-g.pug
p Tiles are repeatable or embeddable information blocks.
.docs-demo.columns
.column.col-9.col-sm-12
.tile
.tile-icon
figure.avatar.avatar-lg
img(src="../img/avatar-3.png" alt="Avatar")
.tile-content
p.tile-title The Avengers
p.tile-subtitle
| Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
.tile-action
button.btn.btn-primary Join
button.btn Contact
.column.col-9.col-sm-12
.tile
.tile-icon
figure.avatar.avatar-lg
img(src="../img/avatar-2.png" alt="Avatar")
.tile-content
p.tile-title The S.H.I.E.L.D.
p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
p
button.btn.btn-primary.btn-sm Join
button.btn.btn-sm Contact
p
| Add a container with the #[code tile] class.
| And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes.
| The #[code tile-icon] and #[code tile-action] are optional.
p
| There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="tile">
<div class="tile-icon">
<div class="example-tile-icon">
<i class="icon icon-file centered"></i>
</div>
</div>
<div class="tile-content">
<p class="tile-title">The Avengers</p>
<p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
</div>
<div class="tile-action">
<button class="btn btn-primary">Join</button>
</div>
</div>
+docs-subheading('tiles-compact', 'Compact tiles')
p
| There is compact version of Tiles component, which is often used as contact and file info blocks.
p
| Add the #[code tile-centered] class to the container #[code tile].
| The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.
.docs-demo.columns
.column.col-6.col-md-9.col-xs-12
.tile.tile-centered
.tile-icon
.example-tile-icon
i.icon.icon-mail.centered
.tile-content
.tile-title spectre-docs.pdf
small.tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017
.tile-action
button.btn.btn-link.btn-action
i.icon.icon-more-vert
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="tile tile-centered">
<div class="tile-icon">
<div class="example-tile-icon">
<i class="icon icon-file centered"></i>
</div>
</div>
<div class="tile-content">
<div class="tile-title">spectre-docs.pdf</div>
<small class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</small>
</div>
<div class="tile-action">
<button class="btn btn-link">
<i class="icon icon-more-vert"></i>
</button>
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
