blob: a30d75c2a498c84caf3e2eeb90e09ba674f2c783 (
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
111
112
113
114
|
p Panels are flexible view container with auto-expand content section.
.docs-demo.columns
.column.col-6.col-xs-12
.panel
.panel-header.text-center
figure.avatar.avatar-lg
img(src="img/avatar-2.png" alt="Avatar")
.panel-title.h5.mt-10 Bruce Banner
.panel-subtitle THE HULK
nav.panel-nav
ul.tab.tab-block
li.tab-item.active
a(href="#panels")
| Profile
li.tab-item
a(href="#panels")
| Files
li.tab-item
a(href="#panels")
| Tasks
.panel-body
.tile.tile-centered
.tile-content
.tile-title.text-bold E-mail
.tile-subtitle bruce.banner@hulk.com
.tile-action
button.btn.btn-link.btn-action.btn-lg.tooltip.tooltip-left(data-tooltip="Edit E-mail")
i.icon.icon-edit
.tile.tile-centered
.tile-content
.tile-title.text-bold Skype
.tile-subtitle bruce.banner
.tile-action
button.btn.btn-link.btn-action.btn-lg
i.icon.icon-edit
.tile.tile-centered
.tile-content
.tile-title.text-bold Location
.tile-subtitle Dayton, Ohio
.tile-action
button.btn.btn-link.btn-action.btn-lg
i.icon.icon-edit
.panel-footer
button.btn.btn-primary.btn-block Save
.column.col-6.col-xs-12
.panel
.panel-header
.panel-title.h6 Comments
.panel-body
.tile
.tile-icon
figure.avatar
img(src="img/avatar-1.png" alt="Avatar")
.tile-content
p.tile-title.text-bold Thor Odinson
p.tile-subtitle
| Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
.tile
.tile-icon
figure.avatar
img(src="img/avatar-2.png" alt="Avatar")
.tile-content
p.tile-title.text-bold Bruce Banner
p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
.tile
.tile-icon
figure.avatar(data-initial="TS")
.tile-content
p.tile-title.text-bold Tony Stark
p.tile-subtitle
| Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
.tile
.tile-icon
figure.avatar
img(src="img/avatar-4.png" alt="Avatar")
.tile-content
p.tile-title.text-bold Steve Rogers
p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
.tile
.tile-icon
figure.avatar
img(src="img/avatar-3.png" alt="Avatar")
.tile-content
p.tile-title.text-bold Natasha Romanoff
p.tile-subtitle
| Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
.panel-footer
.input-group
input.form-input(type="text" placeholder="Hello")
button.btn.btn-primary.input-group-btn Send
p
| Add a container element with the #[code panel] class.
| And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes.
| The #[code panel-body] can be auto expanded and vertically scrollable.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="panel">
<div class="panel-header">
<div class="panel-title">Comments</div>
</div>
<div class="panel-nav">
<!-- navigation components: tabs, breadcrumbs or pagination -->
</div>
<div class="panel-body">
<!-- contents -->
</div>
<div class="panel-footer">
<!-- buttons or inputs -->
</div>
</div>
|
