UNPKG

20 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Badges - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 </head>
33 <body>
34 <header>
35 <nav class="top-nav">
36 <div class="container">
37 <div class="nav-wrapper"><a class="page-title">Badges</a></div>
38 </div>
39 </nav>
40 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
41 <ul id="nav-mobile" class="side-nav fixed">
42 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
43 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
44 <li class="search">
45 <div class="search-wrapper card">
46 <input id="search"><i class="material-icons">search</i>
47 <div class="search-results"></div>
48 </div>
49 </li>
50 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
51 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
52 <li class="no-padding">
53 <ul class="collapsible collapsible-accordion">
54 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
55 <div class="collapsible-body">
56 <ul>
57 <li><a href="color.html">Color</a></li>
58 <li><a href="grid.html">Grid</a></li>
59 <li><a href="helpers.html">Helpers</a></li>
60 <li><a href="media-css.html">Media</a></li>
61 <li><a href="sass.html">Sass</a></li>
62 <li><a href="shadow.html">Shadow</a></li>
63 <li><a href="table.html">Table</a></li>
64 <li><a href="css-transitions.html">Transitions</a></li>
65 <li><a href="typography.html">Typography</a></li>
66 </ul>
67 </div>
68 </li>
69 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
70 <div class="collapsible-body">
71 <ul>
72 <li class="active"><a href="badges.html">Badges</a></li>
73 <li><a href="buttons.html">Buttons</a></li>
74 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
75 <li><a href="cards.html">Cards</a></li>
76 <li><a href="chips.html">Chips</a></li>
77 <li><a href="collections.html">Collections</a></li>
78 <li><a href="footer.html">Footer</a></li>
79 <li><a href="forms.html">Forms</a></li>
80 <li><a href="icons.html">Icons</a></li>
81 <li><a href="navbar.html">Navbar</a></li>
82 <li><a href="pagination.html">Pagination</a></li>
83 <li><a href="preloader.html">Preloader</a></li>
84 </ul>
85 </div>
86 </li>
87 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
88 <div class="collapsible-body">
89 <ul>
90 <li><a href="carousel.html">Carousel</a></li>
91 <li><a href="collapsible.html">Collapsible</a></li>
92 <li><a href="dialogs.html">Dialogs</a></li>
93 <li><a href="dropdown.html">Dropdown</a></li>
94 <li><a href="media.html">Media</a></li>
95 <li><a href="modals.html">Modals</a></li>
96 <li><a href="parallax.html">Parallax</a></li>
97 <li><a href="pushpin.html">Pushpin</a></li>
98 <li><a href="scrollfire.html">ScrollFire</a></li>
99 <li><a href="scrollspy.html">Scrollspy</a></li>
100 <li><a href="side-nav.html">SideNav</a></li>
101 <li><a href="tabs.html">Tabs</a></li>
102 <li><a href="transitions.html">Transitions</a></li>
103 <li><a href="waves.html">Waves</a></li>
104 </ul>
105 </div>
106 </li>
107 </ul>
108 </li>
109 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
110 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
111 </ul>
112 </header>
113 <main><div class="container">
114 <div class="row">
115
116 <div class="col s12 m9 l10">
117
118 <!-- Badges Section -->
119 <div id="collections" class="section scrollspy">
120
121 <div class="row">
122 <div class="col s12">
123 <p class="caption">Badges can notify you that there are new or unread messages or notifications. Add the <code class="language-markup">new</code> class to the badge to give it the background.</p>
124
125 <h2 class="header">Collections</h2>
126
127 <div class="collection">
128 <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
129 <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
130 <a href="#!" class="collection-item">Alan</a>
131 <a href="#!" class="collection-item"><span class="badge">14</span>Alan</a>
132 </div>
133 <pre><code class="language-markup">
134 &lt;div class="collection">
135 &lt;a href="#!" class="collection-item">&lt;span class="badge">1&lt;/span>Alan&lt;/a>
136 &lt;a href="#!" class="collection-item">&lt;span class="new badge">4&lt;/span>Alan&lt;/a>
137 &lt;a href="#!" class="collection-item">Alan&lt;/a>
138 &lt;a href="#!" class="collection-item">&lt;span class="badge">14&lt;/span>Alan&lt;/a>
139 &lt;/div>
140 </code></pre>
141 </div>
142 </div>
143 </div>
144
145 <div id="dropdown" class="section scrollspy">
146 <div class="row">
147 <div class="col s12">
148
149 <h2 class="header">Badges in Dropdown</h2>
150
151 <ul id="dropdown2" class="dropdown-content">
152 <li><a href="#!">one<span class="badge">1</span></a></li>
153 <li><a href="#!">two<span class="new badge">1</span></a></li>
154 <li><a href="#!">three</a></li>
155 </ul>
156 <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
157
158 <pre><code class="language-markup">
159 &lt;ul id="dropdown2" class="dropdown-content">
160 &lt;li>&lt;a href="#!">one&lt;span class="badge">1&lt;/span>&lt;/a>&lt;/li>
161 &lt;li>&lt;a href="#!">two&lt;span class="new badge">1&lt;/span>&lt;/a>&lt;/li>
162 &lt;li>&lt;a href="#!">three&lt;/a>&lt;/li>
163 &lt;/ul>
164 &lt;a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown&lt;i class="mdi-navigation-arrow-drop-down right">&lt;/i>&lt;/a>
165 </code></pre>
166
167 </div>
168 </div>
169 </div>
170
171 <div id="navbar" class="section scrollspy">
172 <div class="row">
173 <div class="col s12">
174
175 <h2 class="header">Badges in Navbar</h2>
176
177 <nav>
178 <div class="nav-wrapper">
179 <a href="" class="brand-logo">Logo</a>
180 <ul id="nav-mobile" class="right hide-on-med-and-down">
181 <li><a href="">sass</a></li>
182 <li><a href="">sass <span class="new badge">4</span></a></li>
183 <li><a href="">sass</a></li>
184 </ul>
185 </div>
186 </nav>
187 <br>
188
189 <pre><code class="language-markup">
190&lt;nav>
191 &lt;div class="nav-wrapper">
192 &lt;a href="" class="brand-logo">Logo&lt;/a>
193 &lt;ul id="nav-mobile" class="right hide-on-med-and-down">
194 &lt;li>&lt;a href="">sass&lt;/a>&lt;/li>
195 &lt;li>&lt;a href="">sass &lt;span class="new badge">4&lt;/span>&lt;/a>&lt;/li>
196 &lt;li>&lt;a href="">sass&lt;/a>&lt;/li>
197 &lt;/ul>
198 &lt;/div>
199&lt;/nav></code></pre>
200
201 </div>
202 </div>
203 </div>
204
205 <div id="collapsible" class="section scrollspy">
206 <div class="row">
207 <div class="col s12">
208
209 <h2 class="header">Badges in Collapsibles</h2>
210
211 <ul class="collapsible" data-collapsible="accordion">
212 <li>
213 <div class="collapsible-header"><span class="new badge">4</span><i class="material-icons">filter_drama</i>First</div>
214 <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
215 </li>
216 <li>
217 <div class="collapsible-header"><span class="badge">1</span><i class="material-icons">place</i>Second</div>
218 <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
219 </li>
220 </ul>
221 <br>
222
223 <pre><code class="language-markup">
224&lt;ul class="collapsible" data-collapsible="accordion">
225 &lt;li>
226 &lt;div class="collapsible-header">&lt;span class="new badge">4&lt;/span>&lt;i class="material-icons">filter_drama&lt;/i>First&lt;/div>
227 &lt;div class="collapsible-body">&lt;p>Lorem ipsum dolor sit amet.&lt;/p>&lt;/div>
228 &lt;/li>
229 &lt;li>
230 &lt;div class="collapsible-header">&lt;span class="badge">1&lt;/span>&lt;i class="material-icons">place&lt;/i>Second&lt;/div>
231 &lt;div class="collapsible-body">&lt;p>Lorem ipsum dolor sit amet.&lt;/p>&lt;/div>
232 &lt;/li>
233&lt;/ul></code></pre>
234
235 </div>
236 </div>
237 </div>
238
239 <div id="options" class="section scrollspy">
240
241 <div class="row">
242 <div class="col s12">
243 <h2 class="header">Options</h2>
244 <p class="caption">You can customize captions in many ways.</p>
245 </div>
246 </div>
247
248 <div class="row">
249 <div class="col s12 m3"><h5 class="light">Custom Caption</h5></div>
250 <div class="col s12 m9">
251 <div class="collection">
252 <a href="#!" class="collection-item">Custom Badge Captions<span class="new badge" data-badge-caption="custom caption">4</span></a>
253 <a href="#!" class="collection-item">Custom Badge Captions<span class="badge" data-badge-caption="custom caption">4</span></a>
254 </div>
255 </div>
256 <div class="col s12 m9 offset-m3">
257 <p>You can explicitly set the caption in a badge using the <code class="language-markup">data-badge-caption</code> attribute.</p>
258 <pre><code class="language-markup">
259 &lt;span class="new badge" data-badge-caption="custom caption">4&lt;/span>
260 &lt;span class="badge" data-badge-caption="custom caption">4&lt;/span>
261 </code></pre>
262 </div>
263 </div>
264
265 <div class="row">
266 <div class="col s12 m3"><h5 class="light">Colors</h5></div>
267 <div class="col s12 m9">
268 <div class="collection">
269 <a href="#!" class="collection-item">Red<span class="new badge red" data-badge-caption="red">4</span></a>
270 <a href="#!" class="collection-item">Blue<span class="new badge blue" data-badge-caption="blue">4</span></a>
271 </div>
272 </div>
273 <div class="col s12 m9 offset-m3">
274 <p>You can use our color classes to set the background-color of the badge.</p>
275 <pre><code class="language-markup">
276 &lt;span class="new badge red">4&lt;/span>
277 &lt;span class="new badge blue">4&lt;/span>
278 </code></pre>
279 </div>
280 </div>
281
282 </div>
283 <!-- End badges -->
284
285
286 </div>
287
288 <div class="col hide-on-small-only m3 l2">
289 <div class="toc-wrapper">
290 <div class="buysellads hide-on-small-only">
291 <!-- CarbonAds Zone Code -->
292 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
293 </div>
294 <div style="height: 1px;">
295 <ul class="section table-of-contents">
296 <li><a href="#collections">Collections</a></li>
297 <li><a href="#dropdown">Dropdown</a></li>
298 <li><a href="#navbar">Navbar</a></li>
299 <li><a href="#collapsible">Collapsible</a></li>
300 <li><a href="#options">Options</a></li>
301 </ul>
302 </div>
303 </div>
304 </div>
305
306 </div>
307</div>
308
309
310 </main> <footer class="page-footer">
311 <div class="container">
312 <div class="row">
313 <div class="col l4 s12">
314 <h5 class="white-text">Help Materialize Grow</h5>
315 <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
316 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
317<input type="hidden" name="cmd" value="_s-xclick">
318<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
319">
320<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
321</button>
322</form>
323
324 </div>
325 <div class="col l4 s12">
326 <h5 class="white-text">Join the Discussion</h5>
327 <p class="grey-text text-lighten-4">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
328 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
329 </div>
330 <div class="col l4 s12" style="overflow: hidden;">
331 <h5 class="white-text">Connect</h5>
332 <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
333 <br>
334 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
335 <br>
336 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
337 </div>
338 </div>
339 </div>
340 <div class="footer-copyright">
341 <div class="container">
342 © 2014-2017 Materialize, All rights reserved.
343 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
344 </div>
345 </div>
346 </footer>
347
348 <!-- Scripts-->
349 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
350 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
351 </script>
352 <script src="js/jquery.timeago.min.js"></script>
353 <script src="js/prism.js"></script>
354 <script src="jade/lunr.min.js"></script>
355 <script src="jade/search.js"></script>
356 <script src="bin/materialize.js"></script>
357 <script src="js/init.js"></script>
358 <!-- Twitter Button -->
359 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
360
361 <!-- Google Plus Button-->
362 <script src="https://apis.google.com/js/platform.js" async defer></script>
363
364 <!-- Google Analytics -->
365 <script>
366 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
367 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
368 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
369 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
370
371 ga('create', 'UA-56218128-1', 'auto');
372 ga('require', 'displayfeatures');
373 ga('send', 'pageview');
374 </script>
375
376 </body>
377</html>
\No newline at end of file