blob: 5917736d9053c04d7753eb35c006157371704c95 (
plain) (
blame)
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
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'cards'
- var parent = 'components'
- var title = 'Cards - Components - Spectre.css CSS Framework'
- var description = 'Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
block docs-content
+docs-heading('cards', 'Cards')
include ../_layout/_ad-g.pug
p Cards are flexible content containers.
.docs-demo.columns
.column.col-6.col-xs-12
.card
.card-image
img.img-responsive(src="../img/osx-el-capitan.jpg" alt="OS X El Capitan")
.card-header
.card-title.h5 Microsoft
.card-subtitle.text-gray Software and hardware
.card-body
| Empower every person and every organization on the planet to achieve more.
.card-footer
a.btn.btn-primary(href="#cards") Do
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Apple
.card-subtitle.text-gray Hardware and software
.card-image
img.img-responsive(src="../img/osx-yosemite.jpg" alt="OS X Yosemite")
.card-body
| To make a contribution to the world by making tools for the mind that advance humankind.
.card-footer
.btn-group.btn-group-block
button.btn.btn-primary Buy
button.btn Buy
button.btn Buy
.column.col-6.col-xs-12
.card
.card-image
img.img-responsive(src="../img/macos-sierra-2.jpg" alt="macOS Sierra")
.card-header
button.btn.btn-primary.float-right
i.icon.icon-plus
.card-title.h5 Google I/O
.card-subtitle.text-gray Software and hardware
.card-body
| An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
.column.col-6.col-xs-12
.card
.card-image
img.img-responsive(src="../img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
.card-footer
a.btn.btn-primary(href="#cards") Buy
a.btn.btn-link(href="#cards") Share
.card-body
strong Surface Studio
| . Turn your desk into a Studio. Surface Studio is designed for the creative process.
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Apple
.card-subtitle.text-gray Hardware and software
.card-body
| To make a contribution to the world by making tools for the mind that advance humankind.
.card-image
img.img-responsive(src="../img/macos-sierra.jpg" alt="macOS Sierra")
.column.col-6.col-xs-12
.card
.card-header
.card-title.h5 Google
.card-subtitle.text-gray Software and hardware
.card-body
| Organize the world’s information and make it universally accessible and useful.
.card-image
img.img-responsive(src="../img/osx-yosemite-2.jpg" alt="OS X Yosemite")
.card-footer
a.btn.btn-primary(href="#cards") Search
a.btn.btn-link(href="#cards") Share
p
| Add a container element with the #[code card] class.
| And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
| The #[code card-image] can be placed in any position.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="card">
<div class="card-image">
<img src="img/osx-el-capitan.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="card-title h5">...</div>
<div class="card-subtitle text-gray">...</div>
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
<button class="btn btn-primary">...</button>
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
