styleguide
UI Style guide
NPGA
Color
— Primary Colors
#67ae3d
#003767
#0064b8
#c9c9c9
#f4f4f4
— Secondary Colors
#f26d22
#ffc300
#020202
#e53834
Typography
— Font Weights
— Headings
H1 - The quick brown fox jumps over the lazy dog.
H2 - The quick brown fox jumps over the lazy dog.
H3 - The quick brown fox jumps over the lazy dog.
H4 - The quick brown fox jumps over the lazy dog.
H5 - The quick brown fox jumps over the lazy dog.
H6 - The quick brown fox jumps over the lazy dog.
H1 - The quick brown fox jumps over the lazy dog.
H2 - The quick brown fox jumps over the lazy dog.
H3 - The quick brown fox jumps over the lazy dog.
H4 - The quick brown fox jumps over the lazy dog.
H5 - The quick brown fox jumps over the lazy dog.
H6 - The quick brown fox jumps over the lazy dog.
— Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.
— Buttons
— Page Elements
Notices
Success Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.
Info Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.
Warning Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.
Error Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.
Modals
Accordions
-
Lorem ipsum dolor sit amet
-
Call To Action
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet
-
Call To Action
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Icons
We use Font Awesome as our default icon font. For more icons and documentation, visit http://fortawesome.github.io/Font-Awesome/
Or, to generate your own icon set, you may use the IcoMoon App.
Loading Elements
Social Sharing
We have some built-in functions that make use of data attributes to make sharing on common social networks easier. You can find out more by viewing the "lib/wl-share.js" file.
Favicons
iPad 3 Retina (144x144)
iPhone 4 Retina (114x114)
iPad (72x72)
iPhone Apple Touch (57x57)
Favicon Retina (32x32)
Favicon (16x16)
This is a modal title
Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.
This is a modal title
Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.
This is a modal title
Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.
This is a modal title
Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.
This is a modal title
Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.
This is a modal title
Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.