-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathpage-heading.html
132 lines (81 loc) · 3.03 KB
/
page-heading.html
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
---
layout: default
title: Heading
permalink: /heading/
id: heading
is_searchable: true
---
<article class="sui-box">
<div class="sui-box-body">
<p>This element is exclusively to use as page title. It can be combined with floating elements like: tag, button, toggle button, and more. You can float those elements at the left or right of the page title.</p>
<!-- ROW: Base Markup -->
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">Base Markup</span>
<span class="sui-description">This is the main markup for heading element. It is the same markup we are using in this page title.</span>
<button id="sample-base" class="sui-button sui-button-ghost" style="display: none; margin-top: 20px;">
<span class="sui-icon-eye" aria-hidden="true"></span> Preview
</button>
</div>
<div class="sui-box-settings-col-2">
<div class="demo-code-block">
<pre class="sui-code-snippet sui-no-copy html">
<div class="sui-header">
<h1 class="sui-header-title">Example Heading</h1>
</div>
</pre>
</div>
</div>
</div>
<!-- ROW: Float Left -->
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">Left Element</span>
<span class="sui-description">When you need to float an element next to the title you can use this variation.</span>
<button id="sample-left" class="sui-button sui-button-ghost" style="margin-top: 20px;">
<span class="sui-icon-eye" aria-hidden="true"></span> Preview
</button>
</div>
<div class="sui-box-settings-col-2">
<div class="demo-code-block">
<pre class="sui-code-snippet sui-no-copy html">
<div class="sui-header">
<h1 class="sui-header-title">Example Heading</h1>
<!-- Float element to left -->
<div class="sui-actions-left">
<span class="sui-tag sui-tag-purple">
Sample Tag
</span>
</div>
</div>
</pre>
</div>
</div>
</div>
<!-- ROW: Float Right -->
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">Right Element</span>
<span class="sui-description">When you need to float an element at the right edge of the page, try this markup.</span>
<button id="sample-right" class="sui-button sui-button-ghost" style="margin-top: 20px;">
<span class="sui-icon-eye" aria-hidden="true"></span> Preview
</button>
</div>
<div class="sui-box-settings-col-2">
<div class="demo-code-block">
<pre class="sui-code-snippet sui-no-copy html">
<div class="sui-header">
<h1 class="sui-header-title">Example Heading</h1>
<!-- Float element to Right -->
<div class="sui-actions-right">
<button class="sui-button sui-button-blue">
Sample Button
</button>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
</article>