1 | {% extends "_donut.html" %}
|
2 |
|
3 | {% block main %}
|
4 | <div class="_style-guide">
|
5 |
|
6 | <section class="base--section">
|
7 | <header class="base--header">
|
8 | <h1 class="base--h1">Text</h1>
|
9 | </header>
|
10 | <article class="base--article">
|
11 | <header class="base--header">
|
12 | <h2 class="base--h2">Headings</h2>
|
13 | </header>
|
14 | <div class="base--div">
|
15 | <h1 class="base--h1">Heading 1</h1>
|
16 | <h2 class="base--h2">Heading 2</h2>
|
17 | <h3 class="base--h3">Heading 3</h3>
|
18 | <h4 class="base--h4">Heading 4</h4>
|
19 | <h5 class="base--h5">Heading 5</h5>
|
20 | <h6 class="base--h6">Heading 6</h6>
|
21 | </div>
|
22 | </article>
|
23 | <hr class="base--hr" />
|
24 | <article class="base--article">
|
25 | <header class="base--header">
|
26 | <h2 class="base--h2">Paragraphs</h2>
|
27 | </header>
|
28 | <div class="base--div">
|
29 | <p class="base--p">A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
|
30 | </div>
|
31 | </article>
|
32 | <hr class="base--hr" />
|
33 | <article class="base--article">
|
34 | <header class="base--header">
|
35 | <h2 class="base--h2">Blockquotes</h2>
|
36 | </header>
|
37 | <div class="base--div">
|
38 | <blockquote class="base--blockquote">
|
39 | <p class="base--p">A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
|
40 | <p class="base--p">It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
|
41 | <cite class="base--cite"><a href="#!" class="base--link">Said no one, ever.</a></cite>
|
42 | </blockquote>
|
43 | </div>
|
44 | </article>
|
45 | <hr class="base--hr" />
|
46 | <article class="base--div">
|
47 | <header class="base--header">
|
48 | <h1 class="base--h1">Lists</h1>
|
49 | </header>
|
50 | <div class="base--div">
|
51 | <h3 class="base--h3">Definition list</h3>
|
52 | <dl class="base--dl">
|
53 | <dt class="base--dt">Definition List Title</dt>
|
54 | <dd class="base--dd">This is a definition list division.</dd>
|
55 | <dt class="base--dt">Definition List Title</dt>
|
56 | <dd class="base--dd">
|
57 | <ul class="base--ul">
|
58 | <li class="base--li">Unordered list item inside definition list</li>
|
59 | <li class="base--li">Unordered list item inside definition list</li>
|
60 | <li class="base--li">Unordered list item inside definition list</li>
|
61 | </ul>
|
62 | </dd>
|
63 | </dl>
|
64 | <h3 class="base--h3">Ordered List</h3>
|
65 | <ol class="base--ol">
|
66 | <li class="base--li">List Item 1</li>
|
67 | <li class="base--li">List Item 2</li>
|
68 | <li class="base--li">List Item 3</li>
|
69 | </ol>
|
70 | <h3 class="base--h3">Unordered List</h3>
|
71 | <ul class="base--ul">
|
72 | <li class="base--li">List Item 1</li>
|
73 | <li class="base--li">List Item 2</li>
|
74 | <li class="base--li">List Item 3</li>
|
75 | </ul>
|
76 | </div>
|
77 | </article>
|
78 | <hr class="base--hr" />
|
79 | <article class="base--article">
|
80 | <header class="base--header">
|
81 | <h1 class="base--h1">Tabular data</h1>
|
82 | </header>
|
83 | <table class="base--table">
|
84 | <caption class="base--caption">Table Caption</caption>
|
85 | <thead class="base--thead">
|
86 | <tr class="base--tr">
|
87 | <th class="base--th">Heading 1</th>
|
88 | <th class="base--th">Heading 2</th>
|
89 | <th class="base--th">Heading3LongOneWord</th>
|
90 | <th class="base--th">Heading 4 That Is Super Long</th>
|
91 | <th class="base--th">Heading 5</th>
|
92 | </tr>
|
93 | </thead>
|
94 | <tbody class="base--tbody">
|
95 | <tr class="base--tr">
|
96 | <td data-th="Heading 1" class="base--td">Table Cell 1</td>
|
97 | <td data-th="Heading 2" class="base--td">Table Cell 2</td>
|
98 | <td data-th="Heading3LongOneWord" class="base--td">Table Cell 3</td>
|
99 | <td data-th="Heading 4" class="base--td">Table Cell 4</td>
|
100 | <td data-th="Heading 5" class="base--td">Table Cell 5</td>
|
101 | </tr>
|
102 | <tr class="base--tr">
|
103 | <td data-th="Heading 1" class="base--td">Table Cell 1</td>
|
104 | <td data-th="Heading 2" class="base--td">Table Cell 2</td>
|
105 | <td data-th="Heading3LongOneWord" class="base--td">Table Cell 3</td>
|
106 | <td data-th="Heading 4" class="base--td">Table Cell 4</td>
|
107 | <td data-th="Heading 5" class="base--td">Table Cell 5</td>
|
108 | </tr>
|
109 | <tr class="base--tr">
|
110 | <td data-th="Heading 1" class="base--td">Table Cell 1</td>
|
111 | <td data-th="Heading 2" class="base--td">Table Cell 2</td>
|
112 | <td data-th="Heading3LongOneWord" class="base--td">Table Cell 3</td>
|
113 | <td data-th="Heading 4" class="base--td">Table Cell 4</td>
|
114 | <td data-th="Heading 5" class="base--td">Table Cell 5</td>
|
115 | </tr>
|
116 | <tr class="base--tr">
|
117 | <td data-th="Heading 1" class="base--td">Table Cell 1</td>
|
118 | <td data-th="Heading 2" class="base--td">Table Cell 2</td>
|
119 | <td data-th="Heading3LongOneWord" class="base--td">Table Cell 3</td>
|
120 | <td data-th="Heading 4" class="base--td">Table Cell 4</td>
|
121 | <td data-th="Heading 5" class="base--td">Table Cell 5</td>
|
122 | </tr>
|
123 | </tbody>
|
124 | </table>
|
125 | </article>
|
126 | <hr class="base--hr" />
|
127 | <article class="base--article">
|
128 | <header class="base--header">
|
129 | <h1 class="base--h1">Code</h1>
|
130 | </header>
|
131 | <div class="base--div">
|
132 | <p class="base--p"><strong class="base--strong">Keyboard input:</strong> <kbd class="base--kbd">Cmd</kbd></p>
|
133 | <p class="base--p"><strong class="base--strong">Inline code:</strong> <code class="base--code"><div>code</div></code></p>
|
134 | <p class="base--p"><strong class="base--strong">Sample output:</strong> <samp class="base--samp">This is sample output from a computer program.</samp></p>
|
135 | <h2 class="base--h2">Pre-formatted text</h2>
|
136 | <pre class="base--pre">P R E F O R M A T T E D T E X T
|
137 | ! " # $ % & ' ( ) * + , - . /
|
138 | 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
139 | @ A B C D E F G H I J K L M N O
|
140 | P Q R S T U V W X Y Z [ \ ] ^ _
|
141 | ` a b c d e f g h i j k l m n o
|
142 | p q r s t u v w x y z { | } ~ </pre>
|
143 | </div>
|
144 | </article>
|
145 | <hr class="base--hr" />
|
146 | <article class="base--article">
|
147 | <header class="base--header">
|
148 | <h1 class="base--h1">Inline elements</h1>
|
149 | </header>
|
150 | <div class="base--div">
|
151 | <p class="base--p"><a href="#!" class="base--link">This is a text link</a>.</p>
|
152 | <p class="base--p"><strong class="base--strong">Strong is used to indicate strong importance.</strong></p>
|
153 | <p class="base--p"><em class="base--em">This text has added emphasis.</em></p>
|
154 | <p class="base--p">The <b class="base--b">b element</b> is stylistically different text from normal text, without any special importance.</p>
|
155 | <p class="base--p">The <i class="base--i">i element</i> is text that is offset from the normal text.</p>
|
156 | <p class="base--p">The <u class="base--u">u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
|
157 | <p class="base--p"><del class="base--del">This text is deleted</del> and <ins class="base--ins">This text is inserted</ins>.</p>
|
158 | <p class="base--p"><s class="base--s">This text has a strikethrough</s>.</p>
|
159 | <p class="base--p">Superscript<sup class="base--sup">®</sup>.</p>
|
160 | <p class="base--p">Subscript for things like H<sub class="base--sub">2</sub>O.</p>
|
161 | <p class="base--p"><small class="base--small">This small text is small for for fine print, etc.</small></p>
|
162 | <p class="base--p">Abbreviation: <abbr title="HyperText Markup Language" class="base--abbr">HTML</abbr></p>
|
163 | <p class="base--p"><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q" class="base--q">This text is a short inline quotation.</q></p>
|
164 | <p class="base--p"><cite class="base--cite">This is a citation.</cite></p>
|
165 | <p class="base--p">The <dfn class="base--dfn">dfn element</dfn> indicates a definition.</p>
|
166 | <p class="base--p">The <mark class="base--mark">mark element</mark> indicates a highlight.</p>
|
167 | <p class="base--p">The <var class="base--var">variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
168 | <p class="base--p">The time element: <time datetime="2013-04-06T12:32+00:00" class="base--time">2 weeks ago</time></p>
|
169 | </div>
|
170 | </article>
|
171 | </section>
|
172 | <hr class="base--hr" />
|
173 | <section class="base--section">
|
174 | <header class="base--header">
|
175 | <h1 class="base--h2">Form elements</h1>
|
176 | </header>
|
177 | <form class="form">
|
178 | <div class="form--field-container">
|
179 | <fieldset class="form--fieldset">
|
180 | <legend class="form--legend">Input fields</legend>
|
181 | <div class="form--field">
|
182 | <label for="input__text">Text Input <mark class="required--save">required to save</mark></label>
|
183 | <input id="input__text" type="text" placeholder="Text Input">
|
184 | <p class="form--description">This is a description of the input above</p>
|
185 | </div>
|
186 | <div class="form--field">
|
187 | <label for="input__text">Disabled Input</label>
|
188 | <input id="input__text" type="text" placeholder="Text Input" disabled>
|
189 | <p class="form--description">This is a description of the input above</p>
|
190 | </div>
|
191 | <div class="form--field">
|
192 | <label for="input__password">Password <mark class="required--save">required to publish</mark></label>
|
193 | <input id="input__password" type="password" placeholder="Type your Password" >
|
194 | <p class="form--description">This is a description of the input above</p>
|
195 | </div>
|
196 | <div class="form--field">
|
197 | <label for="input__webaddress">Web Address <mark class="required--publish">required to publish</mark></label>
|
198 | <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
|
199 | <p class="form--description">This is a description of the input above</p>
|
200 | </div>
|
201 | <div class="form--field">
|
202 | <label for="input__emailaddress">Email Address <mark class="required--publish">required to publish</mark></label>
|
203 | <input id="input__emailaddress" type="email" placeholder="name@email.com">
|
204 | </div>
|
205 | <div class="form--field">
|
206 | <label for="input__phone">Phone Number <mark class="required--publish">required to publish</mark></label>
|
207 | <input id="input__phone" type="tel" placeholder="(999) 999-9999">
|
208 | </div>
|
209 | <div class="form--field">
|
210 | <label for="input__search">Search</label>
|
211 | <input id="input__search" type="search" placeholder="Enter Search Term">
|
212 | </div>
|
213 | <div class="form--field">
|
214 | <label for="input__text2">Number Input</label>
|
215 | <input id="input__text2" type="number" placeholder="Enter a Number">
|
216 | </div>
|
217 | </fieldset>
|
218 | </div>
|
219 | <div class="form--field-container">
|
220 | <fieldset class="form--fieldset">
|
221 | <legend class="form--legend">Select dropdown</legend>
|
222 | <div class="form--field">
|
223 | <label for="select">Select <mark class="required--publish">required to publish</mark></label>
|
224 | <select id="select">
|
225 | <optgroup label="Option Group" class="base--optgroup">
|
226 | <option>Option One</option>
|
227 | <option>Option Two</option>
|
228 | <option>Option Three</option>
|
229 | </optgroup>
|
230 | </select>
|
231 | </div>
|
232 | </fieldset>
|
233 | </div>
|
234 | <div class="form--field-container">
|
235 | <fieldset class="form--fieldset">
|
236 | <legend class="form--legend">Checkboxes</legend>
|
237 | <div class="form--field">
|
238 | <ul>
|
239 | <li>
|
240 | <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
|
241 | <label for="checkbox1">Choice A</label>
|
242 | </li>
|
243 | <li>
|
244 | <input id="checkbox2" name="checkbox" type="checkbox">
|
245 | <label for="checkbox2" class="form--label">Choice B</label>
|
246 | </li>
|
247 | <li>
|
248 | <input id="checkbox3" name="checkbox" type="checkbox">
|
249 | <label for="checkbox3">Choice C</label>
|
250 | </li>
|
251 | </ul>
|
252 | </div>
|
253 | </fieldset>
|
254 | </div>
|
255 | <div class="form--field-container">
|
256 | <fieldset class="form--fieldset">
|
257 | <legend class="form--legend">Radio buttons</legend>
|
258 | <div class="form--field">
|
259 | <ul>
|
260 | <li>
|
261 | <input id="radio1" name="radio" type="radio" checked="checked">
|
262 | <label for="radio1">Option 1</label>
|
263 | </li>
|
264 | <li>
|
265 | <input id="radio2" name="radio" type="radio" class="radio">
|
266 | <label for="radio2">Option 2</label>
|
267 | </li>
|
268 | <li>
|
269 | <input id="radio3" name="radio" type="radio" class="radio">
|
270 | <label for="radio3">Option 3</label>
|
271 | </li>
|
272 | </ul>
|
273 | </div>
|
274 | </fieldset>
|
275 | </div>
|
276 | <div class="form--field-container">
|
277 | <fieldset class="form--fieldset">
|
278 | <legend class="form--legend">Textareas</legend>
|
279 | <div class="form--field">
|
280 | <label for="textarea">Textarea</label>
|
281 | <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
|
282 | </div>
|
283 | </fieldset>
|
284 | </div>
|
285 | <div class="form--field-container">
|
286 | <fieldset class="form--fieldset">
|
287 | <legend class="form--legend">HTML5 inputs</legend>
|
288 | <div class="form--field">
|
289 | <label for="ic">Color input</label>
|
290 | <input type="color" id="ic" value="#000000">
|
291 | </div>
|
292 | <div class="form--field">
|
293 | <label for="in">Number input</label>
|
294 | <input type="number" id="in" min="0" max="10" value="5">
|
295 | </div>
|
296 | <div class="form--field">
|
297 | <label for="ir">Range input</label>
|
298 | <input type="range" id="ir" value="10">
|
299 | </div>
|
300 | <div class="form--field">
|
301 | <label for="idd">Date input</label>
|
302 | <input type="date" id="idd" value="1970-01-01">
|
303 | </div>
|
304 | <div class="form--field">
|
305 | <label for="idm">Month input</label>
|
306 | <input type="month" id="idm" value="1970-01">
|
307 | </div>
|
308 | <div class="form--field">
|
309 | <label for="idw">Week input</label>
|
310 | <input type="week" id="idw" value="1970-W01">
|
311 | </div>
|
312 | <div class="form--field">
|
313 | <label for="idt">Datetime input</label>
|
314 | <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
|
315 | </div>
|
316 | <div class="form--field">
|
317 | <label for="idtl">Datetime-local input</label>
|
318 | <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
319 | </div>
|
320 | </fieldset>
|
321 | </div>
|
322 | <div class="form--actions">
|
323 | <button type="submit" class="form--submit">button type = submit</button>
|
324 | <button type="button" class="form--button">button type = button</button>
|
325 | <button type="reset" class="form--reset">button type = reset</button>
|
326 | <a href="#" class="form--cancel">link type = cancel</a>
|
327 | </div>
|
328 | </form>
|
329 | </section>
|
330 |
|
331 | <section class="_style-guide--group">
|
332 | <h2 class="_style-guide--title">Alerts</h2>
|
333 | {% from "components/alert.html" import alert %}
|
334 | {{alert(alertData)}}
|
335 | </section>
|
336 |
|
337 | <section class="_style-guide--group">
|
338 | <h2 class="_style-guide--title">Tabular Data</h2>
|
339 | {% from "components/table.html" import table %}
|
340 | {{table(tableData)}}
|
341 | </section>
|
342 |
|
343 | <section class="_style-guide--group">
|
344 | <h2 class="_style-guide--title">Single Content Type</h2>
|
345 | {% from "components/basic-card.html" import basicCard %}
|
346 | {{basicCard(cardData)}}
|
347 | </section>
|
348 |
|
349 | <section class="_style-guide--group">
|
350 | <h2 class="_style-guide--title">Breadcrumb</h2>
|
351 | {% from "components/breadcrumb.html" import breadcrumb %}
|
352 | {{breadcrumb(breadcrumbData)}}
|
353 | </section>
|
354 |
|
355 | </div>
|
356 | {% endblock %}
|