Nullam quis risus eget urna mollis
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
NCCS Parts Kit
This page contains demo site components. To see how to include on a page, view the template in the repo.
Layout
On a normal page (like this one), there are 4 container classes that control container width via CSS grid column definitions.
There are two Grid layouts: .grid-content and .grid-sidebar. These container classes only apply to .grid-content
.full
.feature
.popout
.content
Flow
Space inbetween elements is created by the .flow utility. This spacing only applies to the top-level elements in a .flow container
The default flow spacing is 1em, but can be increased with .flow-X, where X is a number between 1 and 4.
Alternatively, the spacing can be varied on the elements themselves to acheive variable spacing.
.flow
.flow-2
.flow-3
.flow-4
Variable
1
4
3
2
1
Buttons
Primary
Secondary
Tertiary
Text
Light
Icons
Found in _includes/svg. Each svg must be a single path with a fill of currentColor to allow coloring the icons with text color definitions.
arrow-right
article
chapter
chart-bar-alt
chart-bar
chart-stacked
check
chevron-down
chevron-left
chevron-right
close
copy
database
document
download
dropdown
email
external
facebook
files
full
github
instagram
link
linkedin
logo
mastodon
minus
open
pdf
play
plus
preview
project
project-bar
project-database
project-line
reddit
rss
search
twitter
video
visibility
youtube
Dividers
Primary
Secondary
Typography and Rich Text
Type is set with fluid definitions which scale linearly between 640px (min) and 1440px viewports (max).
Nullam id dolor id nibh ultricies vehicula ut id elit.
.text-6xl
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
.text-5xl
Sit dicta ipsa vero saepe temporibus? Doloremque provident nihil.
.text-4xl
Nullam quis risus eget urna mollis ornare vel eu leo.
.text-3xl
Pellentesque ornare sem lacinia quam venenatis vestibulum.
.text-2xl
Nulla vitae elit libero, a pharetra augue.
.text-xl
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
.text-reg
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
.text-sm
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
.text-xs
Defaults
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
- Donec id elit non mi porta gravida at eget metus.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
- Nulla vitae elit libero, a pharetra augue.
- Maecenas faucibus mollis interdum.
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicolus mus.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibolum.
- Donec id elit non mi porta gravida at eget metus.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibolum.
- Nolla vitae elit libero, a pharetra augue.
- Maecenas faucibus mollis interdum.
- Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicolus mus.
- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibolum.
Sit alias aperiam non minus alias! Porro eum ipsum vel optio in asperiores Error iusto quod impedit nobis rerum aspernatur! Quas sit modi blanditiis unde illo? Blanditiis ipsam ullam inventore.
Hero
Requires a .feature sizing wrapper.
Welcome to the National Center for Charitable Statistics (NCCS) open data platform
Consectetur atque culpa ad quidem ex? Deleniti atque error necessitatibus cumque quisquam. Fugit necessitatibus commodi eveniet.
Sample CTAContent CTA
Used to highlight a particular link or piece of content, with both a light and a dark variant.
Nullam quis risus eget urna mollis
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Filter Controls
This only represents the control elements but does not add JavaScript functionality, see index.html for an example of a full implementation.
Light Filter Control
Dark Filter Control
Card - Horizontal
Card Sample
Donec ullamcorper nulla non metus auctor fringilla.
one
two
three
four
Card - Vertical
type1 type2
Vertical Card Text Only
Donec ullamcorper nulla non metus auctor fringilla.
one
two
three
four
Vertical Card Icon, No Eyebrow
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
one
two
three
four
type1 type2
Vertical Card with Image
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
one
two
three
four
Content Feature
Pulls featured content to the top. 3 styles: light, dark, and image (Stories only).
Light Variant
test
Story Sample
Amet amet maxime sit neque cumque Maxime explicabo maxime est accusamus exercitationem ad Dolor nulla ipsum rem nemo ab deserunt eligendi quas hic Quo impedit vel perspiciatis quam.
other
other
Dark Variant
test
Story Sample
Amet amet maxime sit neque cumque Maxime explicabo maxime est accusamus exercitationem ad Dolor nulla ipsum rem nemo ab deserunt eligendi quas hic Quo impedit vel perspiciatis quam.
other
other
Image Variant
Requires image to be set. Only for _stories. Reverts to dark variant if the first two images do not have image set. (This demo may not work if the first two featured stories do not have images.)
test
Story Sample
Amet amet maxime sit neque cumque Maxime explicabo maxime est accusamus exercitationem ad Dolor nulla ipsum rem nemo ab deserunt eligendi quas hic Quo impedit vel perspiciatis quam.
other
Sidebar
Requires the sidebar grid, intended to only be used at a layout level.
Because the links require an object, this demo is stubbed out with dummy data
Person
Displays information intended to be pulled from _data/people.yml
