pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #76 from dod-ccpo/ui/icons

Browse Source 
Icons!
This commit is contained in:
andrewdds 2018-07-18 11:26:10 -04:00 committed by GitHub
commit 2bfa33079d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 114 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -79,3 +79,10 @@ following to `~/.vim/filetype.vim` for syntax highlighting:
:au BufRead *.html.to set filetype=mustache :au BufRead *.html.to set filetype=mustache
## Icons
To render an icon use `{% module Icon('name') %}` in a template, where `name` is the filename of an svg file in `static/icons`.
All icons used should be from the Noun Project, specifically [this collection](https://thenounproject.com/monstercritic/collection/tinicons-a-set-of-tiny-icons-perfect-for-ui-elemen/) if possible.
SVG markup should be cleaned an minified, [Svgsus](http://www.svgs.us/) works well.

3
atst/app.py
View File

@ -15,10 +15,10 @@ from atst.handlers.dev import Dev
from atst.home import home from atst.home import home
from atst.api_client import ApiClient from atst.api_client import ApiClient
from atst.sessions import RedisSessions from atst.sessions import RedisSessions
from atst import ui_modules
ENV = os.getenv("TORNADO_ENV", "dev") ENV = os.getenv("TORNADO_ENV", "dev")
def make_app(config, deps, **kwargs): def make_app(config, deps, **kwargs):
routes = [ routes = [
@ -100,6 +100,7 @@ def make_app(config, deps, **kwargs):
static_path=home.child("static"), static_path=home.child("static"),
cookie_secret=config["default"]["COOKIE_SECRET"], cookie_secret=config["default"]["COOKIE_SECRET"],
debug=config["default"].getboolean("DEBUG"), debug=config["default"].getboolean("DEBUG"),
ui_modules=ui_modules,
**kwargs, **kwargs,
) )
app.config = config app.config = config

7
atst/ui_modules.py Normal file
View File

@ -0,0 +1,7 @@
from tornado.web import UIModule
class Icon(UIModule):
def render(self, name, classes=''):
with open('static/icons/%s.svg' % name) as svg:
return self.render_string(
"components/icon.html.to", svg=svg.read(), name=name, classes=classes)

2
scss/atat.scss
View File

@ -3,6 +3,7 @@
@import 'core/base'; @import 'core/base';
@import 'core/grid'; @import 'core/grid';
@import 'core/util';
@import 'elements/typography'; @import 'elements/typography';
@import 'elements/inputs'; @import 'elements/inputs';
@ -10,6 +11,7 @@
@import 'elements/panels'; @import 'elements/panels';
@import 'elements/block_lists'; @import 'elements/block_lists';
@import 'elements/tables'; @import 'elements/tables';
@import 'elements/icons';
@import 'components/site_action'; @import 'components/site_action';
@import 'components/empty_state'; @import 'components/empty_state';

3
scss/core/_util.scss Normal file
View File

@ -0,0 +1,3 @@
.nowrap {
white-space: nowrap;
}

7
scss/core/_variables.scss
View File

@ -3,10 +3,9 @@
* =================================================== * ===================================================
*/ */
$gap: .8rem; // 8px at 10px $em-base $gap: .8rem; // 8px at 10px $em-base
$topbar-height: 4.8rem; $topbar-height: 4.8rem;
$icon-size-small: 2.4rem;
/* /*
* USWDS Variables * USWDS Variables

28
scss/elements/_icons.scss Normal file
View File

@ -0,0 +1,28 @@
@mixin icon {
display: inline-block;
vertical-align: bottom;
> svg {
width: 100%;
height: 100%;
}
}
@mixin icon-size($size) {
$icon-size: $size * .1rem;
width: $icon-size;
height: $icon-size;
margin: $icon-size / 4;
}
@mixin icon-style-default {
> svg * {
fill: $color-black;
}
}
.icon {
@include icon;
@include icon-size(16);
@include icon-style-default;
}

1
static/icons/alert.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 431 B

1
static/icons/avatar.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 16h-2v-3.225l-3.919-.781C9.455 11.869 9 11.314 9 10.675V9.242c0-.477.236-.921.631-1.187C9.919 7.86 11 6.595 11 5c0-1.853-1.558-3-3-3-1.449 0-3 1.206-3 3 0 1.596 1.081 2.859 1.371 3.056.395.268.629.711.629 1.186v1.433c0 .64-.455 1.194-1.083 1.319l-3.916.783L2 16H0v-3.221c0-.951.677-1.776 1.609-1.963L5 10.139v-.623C4.235 8.839 3 7.136 3 5c0-3.088 2.595-5 5-5 2.757 0 5 2.243 5 5 0 2.134-1.234 3.837-2 4.516v.623l3.396.679c.929.187 1.604 1.01 1.604 1.957V16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 540 B

1
static/icons/bell.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 12H2c-.552 0-1-.447-1-1s.448-1 1-1c.469 0 1 0 1-2V7c0-2.757 2.243-5 5-5s5 2.243 5 5v1c0 2 .531 2 1 2 .553 0 1 .447 1 1s-.447 1-1 1zm-9.261-2h6.521c-.173-.553-.26-1.22-.26-2V7c0-1.654-1.346-3-3-3S5 5.346 5 7v1c0 .78-.087 1.447-.261 2zM8 4c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v2c0 .552-.448 1-1 1z"/><circle cx="8" cy="14.5" r="1.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 424 B

1
static/icons/briefcase.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 16H1c-.552 0-1-.447-1-1V5c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v10c0 .553-.447 1-1 1zM2 14h12V6H2v8zm10-8H4V3c0-1.102.896-1.999 1.999-1.999h4.002C11.104 1.001 12 1.898 12 3v3zM6 4h4V3l-4.001.001L6 4zm2 8l-.275-.038-7-2 .55-1.923L8 9.96l6.726-1.921.549 1.923-7 2L8 12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 350 B

1
static/icons/caret_down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 13c-.256 0-.512-.098-.707-.293l-7-7c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0L8 10.586l6.293-6.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-7 7C8.512 12.902 8.256 13 8 13z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

1
static/icons/caret_left.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 16c-.256 0-.512-.098-.707-.293l-7-7c-.391-.391-.391-1.023 0-1.414l7-7c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414L5.414 8l6.293 6.293c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

1
static/icons/caret_right.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414L10.586 8 4.293 1.707c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l7 7c.391.391.391 1.023 0 1.414l-7 7C5.512 15.902 5.256 16 5 16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

1
static/icons/caret_up.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 12c-.256 0-.512-.098-.707-.293L8 5.414l-6.293 6.293c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l7-7c.391-.391 1.023-.391 1.414 0l7 7c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
static/icons/chart.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 13H1c-.552 0-1-.447-1-1V2c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v10c0 .553-.447 1-1 1zM2 11h12V3H2v8zm6-8c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zM3.999 16c-.19 0-.383-.055-.554-.168-.459-.307-.583-.927-.277-1.387l2-3c.306-.46.926-.584 1.387-.277.459.307.583.927.277 1.387l-2 3c-.193.289-.51.445-.833.445zm8.002 0c-.323 0-.641-.156-.833-.445l-2-3c-.306-.46-.182-1.08.277-1.387.46-.307 1.08-.183 1.387.277l2 3c.307.46.183 1.08-.277 1.387-.171.113-.364.168-.554.168zM4 10c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l3-3c.391-.391 1.023-.391 1.414 0L9 6.586l2.293-2.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-3 3c-.391.391-1.023.391-1.414 0L7 7.414 4.707 9.707C4.512 9.902 4.256 10 4 10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 818 B

1
static/icons/cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.5 15H5c-2.757 0-5-2.243-5-5 0-2.204 1.446-4.126 3.511-4.769C4.395 3.277 6.335 2 8.5 2c2.773 0 5.058 2.034 5.434 4.727C15.205 7.548 16 8.972 16 10.5c0 2.481-2.019 4.5-4.5 4.5zm-3-11c-1.493 0-2.819.962-3.3 2.394-.115.342-.407.596-.762.664C3.025 7.326 2 8.563 2 10c0 1.654 1.346 3 3 3h6.5c1.379 0 2.5-1.121 2.5-2.5 0-.972-.553-1.835-1.441-2.254-.339-.16-.561-.495-.573-.869C11.918 5.483 10.387 4 8.5 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

1
static/icons/document.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 16H2c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1h13c.553 0 1 .448 1 1v14c0 .553-.447 1-1 1zM3 14h11V2H3v12zM5 4h7v2H5zm0 3h7v2H5zm0 3h4v2H5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

1
static/icons/download.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 16H0v-6h2v4h12v-4h2zm-8-4c-.256 0-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0L8 9.586l3.293-3.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-4 4C8.512 11.902 8.256 12 8 12zm0 0c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1s1 .448 1 1v10c0 .553-.448 1-1 1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 366 B

1
static/icons/folder.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 16H2c-1.103 0-2-.897-2-2V2C0 .897.897 0 2 0h5.004c1.098 0 1.995.893 2 1.99V2H14c1.103 0 2 .897 2 2v10c0 1.103-.897 2-2 2zM7.005 1.99L2 2v12h12V4H6.995l.01-2.01z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 243 B

1
static/icons/help.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm-.081 10.972c-.274 0-.513-.086-.717-.259-.204-.173-.306-.415-.306-.726 0-.276.099-.508.296-.696.198-.188.44-.283.727-.283.283 0 .521.095.714.283.193.188.289.42.289.696 0 .307-.101.548-.303.723-.202.175-.435.262-.7.262zM4.634 5.773c0-.416.137-.837.411-1.264.274-.427.673-.781 1.198-1.061.525-.28 1.138-.42 1.838-.42.651 0 1.225.117 1.723.351.498.234.883.553 1.155.956.271.403.407.841.407 1.313 0 .373-.078.699-.232.979-.155.28-.339.522-.552.726-.214.204-.596.546-1.148 1.028-.153.136-.275.255-.367.358-.092.103-.16.197-.205.282-.045.086-.08.171-.105.257-.024.085-.061.235-.111.45-.085.455-.352.683-.801.683-.233 0-.43-.075-.589-.224-.159-.149-.239-.37-.239-.663 0-.368.059-.687.175-.956.117-.269.272-.506.465-.709.193-.204.453-.446.781-.726.287-.245.494-.43.622-.555.128-.125.236-.264.323-.417.088-.153.132-.32.132-.499 0-.351-.134-.646-.401-.887s-.611-.361-1.033-.361c-.494 0-.857.121-1.091.364-.233.243-.431.601-.592 1.074-.153.495-.442.742-.869.742-.251 0-.463-.086-.636-.259-.173-.173-.259-.36-.259-.562z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/icons/info.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm0 14c3.309 0 6-2.691 6-6s-2.691-6-6-6-6 2.691-6 6 2.691 6 6 6zm0-8c.552 0 1 .447 1 1v4.436c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.553.448-1 1-1zm0-3c.26 0 .52.11.71.29.18.19.29.45.29.71 0 .271-.11.521-.29.71-.38.37-1.05.37-1.42 0C7.11 4.521 7 4.26 7 4c0-.26.11-.52.29-.71.19-.18.45-.29.71-.29z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

1
static/icons/link.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.321 10.68c-.256 0-.512-.098-.707-.293-1.953-1.954-1.953-5.132 0-7.085L7.465 1.45C8.411.504 9.67-.017 11.008-.017s2.596.521 3.542 1.467 1.468 2.205 1.468 3.543-.521 2.596-1.468 3.542c-.391.391-1.023.391-1.414 0s-.391-1.024 0-1.414c.568-.569.882-1.325.882-2.128 0-.804-.313-1.56-.882-2.129-1.137-1.137-3.12-1.137-4.257 0L7.028 4.715c-1.173 1.174-1.173 3.083 0 4.257.391.391.391 1.023 0 1.414-.195.196-.451.294-.707.294zm-1.293 5.302c-1.338 0-2.596-.521-3.542-1.468C.54 13.569.018 12.31.018 10.972S.539 8.376 1.485 7.43c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414c-.569.568-.882 1.325-.882 2.129s.313 1.56.882 2.128c1.138 1.137 3.119 1.137 4.257 0l1.699-1.699c.568-.568.882-1.324.882-2.128s-.313-1.56-.882-2.129c-.391-.39-.391-1.023 0-1.414s1.023-.391 1.414 0c.946.946 1.468 2.204 1.468 3.543 0 1.338-.521 2.597-1.468 3.542L8.57 14.515c-.946.946-2.204 1.467-3.542 1.467z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 953 B

1
static/icons/ok.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12c-.266 0-.522-.106-.71-.296L3.915 8.297c-.389-.392-.386-1.025.006-1.414.392-.387 1.026-.386 1.414.007l2.574 2.597 6.302-8.101c.339-.435.967-.514 1.403-.176.436.339.515.968.175 1.403l-7 9c-.177.227-.442.367-.729.384L8 12zm0 4c-4.411 0-8-3.589-8-8s3.589-8 8-8c.964 0 1.906.17 2.803.505.517.193.779.77.586 1.287s-.765.783-1.287.586C9.431 2.127 8.724 2 8 2 4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6c0-.552.447-1 1-1s1 .448 1 1c0 4.411-3.589 8-8 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

1
static/icons/search.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

1
static/icons/shield.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8.062 0c1.63.026 3.239.416 4.83.823 0 0 1.684.547 1.774 2.016.035 1.688.162 3.415-.133 4.952-.684 3.559-3.511 6.351-6.271 8.202 0 0-.454.068-.898-.228-3.182-2.179-5.963-5.341-6.067-9.247C1.274 4.012.695 1.43 3.331.756 4.886.368 6.457-.009 8.062 0zm-.197 2.082c-1.533.052-4.529.829-4.538.843-.031 1.555-.173 3.193.119 4.578.542 2.566 2.436 4.623 4.512 6.118 0 0 .991-.743 1.58-1.323.273-.27.537-.548.79-.838 1.237-1.419 2.256-3.125 2.308-4.983.011-1.181.001-2.363.001-3.544 0-.212-1.634-.446-2.789-.648-.657-.114-1.32-.211-1.983-.203z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

1
static/icons/trash.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.098 16H4.902c-1.029 0-1.884-.772-1.987-1.798L2.095 6H1c-.552 0-1-.448-1-1s.448-1 1-1h2c.514 0 .944.389.995.9l.91 9.103L11.098 14l.907-9.1c.051-.511.481-.9.995-.9h2c.553 0 1 .448 1 1s-.447 1-1 1h-1.095l-.82 8.202C12.982 15.227 12.129 16 11.098 16zm-.993-12.553L9.382 2H6.618l-.723 1.447-1.79-.894 1-2C5.275.214 5.621 0 6 0h4c.379 0 .725.214.895.553l1 2-1.79.894zM2 4h12v2H2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 456 B

1
static/icons/x.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

2
templates/components/icon.html.to Normal file
View File

@ -0,0 +1,2 @@
{% autoescape None %}
<span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</span>

33
templates/styleguide.html.to
View File

@ -24,11 +24,6 @@
{% end %} {% end %}
{% block content %} {% block content %}
<div class='col'>
<div class='panel'>
<p>This is a panel</p>
</div>
</div>
<div class='col col--grow'> <div class='col col--grow'>
<div class='panel'> <div class='panel'>
@ -43,6 +38,7 @@
<p>This is a paragraph. <a href="\">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>This is a paragraph. <a href="\">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="row"> <div class="row">
<div class='col col--grow'>col 1</div> <div class='col col--grow'>col 1</div>
<div class='col col--grow'>col 2</div> <div class='col col--grow'>col 2</div>
@ -71,6 +67,33 @@
Another panel without padding Another panel without padding
</div> </div>
<div class='panel'>
<div class='panel__content'>
<h5>Icons</h5>
<span class='nowrap'>{% module Icon('trash') %} 'trash'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('document') %} 'document'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('cloud') %} 'cloud'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('chart') %} 'chart'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_up') %} 'caret_up'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_down') %} 'caret_down'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_right') %} 'caret_right'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_left') %} 'caret_left'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('x') %} 'x'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('search') %} 'search'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('avatar') %} 'avatar'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('download') %} 'download'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('briefcase') %} 'briefcase'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('bell') %} 'bell'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('folder') %} 'folder'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('help') %} 'help'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('shield') %} 'shield'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('info') %} 'info'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('alert') %} 'alert'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('link') %} 'link'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('ok') %} 'ok'&nbsp;&nbsp;&nbsp;</span>
</div>
</div>
<section class='block-list'> <section class='block-list'>
<header class='block-list__header'> <header class='block-list__header'>
<h3 class='block-list__title'>A Block List</h3> <h3 class='block-list__title'>A Block List</h3>