-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbadges.html
More file actions
72 lines (64 loc) · 2.65 KB
/
Copy pathbadges.html
File metadata and controls
72 lines (64 loc) · 2.65 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
---
layout: page
title: Badges
---
<p class="c-paragraph">
They're useful when you want to add additional info. Like a version number of a project or for status messages for individual items.
</p>
<div class="u-letter-box--medium o-grid o-grid--small-full">
<div class="o-grid__cell o-grid__cell--width-50">
<div class="u-letter-box--small">
<span class="c-badge">v{{ site.version }}</span>
</div>
</div>
<div class="u-letter-box--small o-grid__cell o-grid__cell--width-50">
<pre class="c-pre html"><code class="c-code c-code--multiline"><Badges>v{{ site.version }}</Badges></code></pre>
</div>
</div>
<h2 id="colours" class="c-heading c-heading--medium">Colours</h2>
<p class="c-paragraph">
Badges come as default, primary, secondary, success and error
</p>
<p class="c-paragraph">
To use, add the colour modifier class:
</p>
<div class="u-letter-box--medium o-grid o-grid--small-full">
<div class="o-grid__cell o-grid__cell--width-50">
<div class="u-letter-box--small">
<span class="c-badge">Default</span>
<span class="c-badge c-badge--primary">Primary</span>
<span class="c-badge c-badge--secondary">Secondary</span>
<span class="c-badge c-badge--success">Success</span>
<span class="c-badge c-badge--error">Error</span>
</div>
</div>
<div class="u-letter-box--small o-grid__cell o-grid__cell--width-50">
<pre class="c-pre html"><code class="c-code c-code--multiline"><Badges>Default</Badges>
<Badges primary>Primary</Badges>
<Badges secondary>Secondary</Badges>
<Badges success>Success</Badges>
<Badges error>Error</Badges></code></pre>
</div>
</div>
<h2 id="rounded" class="c-heading c-heading--medium">Rounded</h2>
<p class="c-paragraph">
Make your badges rounded with the <code class="c-code">rounded</code> modifier.
</p>
<div class="u-letter-box--medium o-grid o-grid--small-full">
<div class="o-grid__cell o-grid__cell--width-50">
<div class="u-letter-box--small">
<span class="c-badge c-badge--rounded">Default</span>
<span class="c-badge c-badge--rounded c-badge--primary">Primary</span>
<span class="c-badge c-badge--rounded c-badge--secondary">Secondary</span>
<span class="c-badge c-badge--rounded c-badge--success">Success</span>
<span class="c-badge c-badge--rounded c-badge--error">Error</span>
</div>
</div>
<div class="u-letter-box--small o-grid__cell o-grid__cell--width-50">
<pre class="c-pre html"><code class="c-code c-code--multiline"><Badges>Default</Badges>
<Badges primary rounded>Primary</Badges>
<Badges secondary rounded>Secondary</Badges>
<Badges success rounded>Success</Badges>
<Badges error rounded>Error</Badges></code></pre>
</div>
</div>