Pattern Library
Here Thar Be Dragons
Experimental playground. Early developments, temporary works-in-progress. Code will appear and disappear here. This is just a place for working out ideas.
Stacked - Unedited
Stacked - Edited
Horizonal - Unedited
Horizontal - Edited
SVG Eye Icons CSS
Look at me!
Stop looking at me!
.eye-show::before {
display: inline-block;
content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='1.3333' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' d='M16 21.333c2.946 0 5.333-2.388 5.333-5.333s-2.388-5.333-5.333-5.333c-2.946 0-5.333 2.388-5.333 5.333s2.388 5.333 5.333 5.333zM16 25.333c7.821 0 13.333-8 13.333-9.333s-5.512-9.333-13.333-9.333c-7.821 0-13.333 8-13.333 9.333s5.512 9.333 13.333 9.333z'%3E%3C/path%3E%3C/svg%3E");
width: 1em;
height: 1em;
font-size: 22px; /* sets the size of the icon */
margin-right: 8px;
vertical-align: bottom;
}
.eye-hide::before {
display: inline-block;
content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='1.3333' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' d='M16 21.333c2.946 0 5.333-2.388 5.333-5.333s-2.388-5.333-5.333-5.333c-2.946 0-5.333 2.388-5.333 5.333s2.388 5.333 5.333 5.333zM16 25.333c7.821 0 13.333-8 13.333-9.333s-5.512-9.333-13.333-9.333c-7.821 0-13.333 8-13.333 9.333s5.512 9.333 13.333 9.333zM5.333 26.667l21.333-21.333'%3E%3C/path%3E%3C/svg%3E");
width: 1em;
height: 1em;
font-size: 22px; /* sets the size of the icon */
margin-right: 8px;
vertical-align: bottom;
}
<p class="eye-show">Look at me!</p>
<p class="eye-hide">Stop looking at me!</p>
Account - Password Component Icons
- Success!
- Warning!
- Fail!
@mixin icon-content-success-disc($icon-stroke: '%23fff', $icon-fill: '%23222') {
$svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill='#{$icon-fill}' stroke='#{$icon-stroke}' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M22 12c0 5.523-4.477 10-10 10s-10-4.477-10-10c0-5.523 4.477-10 10-10s10 4.477 10 10z'%3E%3C/path%3E%3Cpath fill='none' stroke='#{$icon-stroke}' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='2' d='M8 13l2.96 3 5.040-8'%3E%3C/path%3E%3C/svg%3E";
content: url($svg);
}
@mixin icon-content-alert-triangle($icon-stroke: '%23b00', $icon-fill: '%23fff') {
$svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath fill='#{$icon-fill}' stroke='#{$icon-stroke}' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M13.752 4.186l7.617 13.85c0.532 0.968 0.179 2.184-0.789 2.716-0.295 0.162-0.627 0.248-0.964 0.248h-15.235c-1.105 0-2-0.895-2-2 0-0.337 0.085-0.669 0.248-0.964l7.617-13.85c0.532-0.968 1.748-1.321 2.716-0.789 0.332 0.183 0.606 0.456 0.789 0.789z'%3E%3C/path%3E%3Cpath fill='#{$icon-fill}' stroke='#{$icon-stroke}' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M13 17c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z'%3E%3C/path%3E%3Cpath fill='#{$icon-fill}' stroke='#{$icon-stroke}' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='2' d='M12 8v6'%3E%3C/path%3E%3C/svg%3E";
content: url($svg);
}
@mixin icon-content-alert-circle($icon-stroke: '%23b00', $icon-fill: '%23fff') {
$svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cg fill='#{$icon-fill}' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='10' stroke='#{$icon-stroke}' /%3E%3Cpath stroke='#{$icon-stroke}' stroke-width='2' d='M12,15 L12,17 M12,7 L12,13' /%3E%3C/g%3E%3C/svg%3E";
content: url($svg);
}
.password-requirements {
list-style: none;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 24px;
}
.password-success,
.password-warning,
.password-fail {
display: block;
}
.password-success::before,
.password-warning::before,
.password-fail::before {
display: inline-block;
content: "";
width: 1em;
height: 1em;
font-size: 20px; // sets the size of the icon
margin-right: 8px;
vertical-align: sub;
}
.password-success::before {
// default colors are set to fill: #222; stroke: #fff;
@include icon-content-success-disc;
// to change the color of the icon, pass URL encoded hex value
//@include icon-content-success-disc($icon-stroke: '%23b00', $icon-fill: '%23fff');
}
.password-warning::before {
// default colors are set to fill: #fff; stroke: #b00;
@include icon-content-alert-triangle;
// to change the color of the icon, pass URL encoded hex value
//@include icon-content-alert-triangle($icon-stroke: '%23222', $icon-fill: '%23eed202');
}
.password-fail::before {
// default colors are set to fill: #fff; stroke: #b00;
@include icon-content-alert-circle;
// to change the color of the icon, pass URL encoded hex value
//@include icon-content-alert-circle($icon-stroke: '%23222', $icon-fill: '%23fff');
}
<ul class="password-requirements">
<li class="password-success">Success!</li>
<li class="password-warning">Warning!</li>
<li class="password-fail">Fail!</li>
</ul>
Always Underlined Links
Some places require links to always be underlined to meet accessibility requirements.
Mixin
@mixin body-copy-link-underlined($color:$link, $focus-ring-color:$grayMedium) {
color: $color;
text-decoration: none;
position: relative;
&::before {
content:"";
display: block;
position: absolute;
top: -2px;
right: 0;
bottom: -2px;
left: 0;
border-bottom: solid 1px $color;
}
&:hover {
text-decoration: none;
outline: 0;
}
&:focus {
text-decoration: none;
outline: 0;
&::before {
right: -4px;
left: -4px;
border: dotted 1px $focus-ring-color;
}
}
}
SCSS
.link-underlined {
@include body-copy-link-underlined();
}
.link-underlined-alert {
@include body-copy-link-underlined($alert, $grayMedium);
}
HTML
<a href="somehere.html" class="link-underlined">Always Underlined Link</a>
<a href="somehere.html" class="link-underlined-alert">Always Underlined Red Link</a>