Class Reference

A few notes about classes:

Generally speaking, class names follow the BEM methodology except in cases where BEM results in class names getting really long and awkward or unnecessarily verbose.
In the source, you'll occasionally see classes that begin with a "js-" prefix. These classes should only be used as jQuery selectors. They should not be used for CSS styling. (More info here and here.)
In the source, you'll occasionally see classes that begin with a "sb-" prefix. These classes are applied by settings in the Springboard and should not be used when coding design templates.

Class	Info
Grid
grid	Creates a new grid element.
grid--reverse	Displays the grid's columns in reverse order.
grid--compact	Displays the grid without any gutters between its columns.
grid--[breakpoint]-start	Children are aligned towards the start of the grid.
grid--[breakpoint]-center	Children are centered inside the grid.
grid--[breakpoint]-end	Children are aligned towards the end of the grid.
grid--[breakpoint]-around	Children are evenly distributed within the grid.
grid--[breakpoint]-between	Children are evenly distributed within the grid. The first child is pushed to the start, the last child to the end.
grid--[breakpoint]-top	Children are vertically aligned to the top of the grid.
grid--[breakpoint]-middle	Children are vertically aligned to the middle of the grid.
grid--[breakpoint]-bottom	Children are vertically aligned to the bottom of the grid.
grid--block	Creates a new block grid.
grid--block-horz-[alignment]	Controls the horizontal alignment of a block grid's elements. Available Values: "left", "center", "right"
grid--block-vert-[alignment]	Controls the vertical alignment of a block grid's elements. Available Values: "top", "middle", "bottom"
grid--block-[breakpoint]-[columns]	Specify how many columns the grid should be divided into for that breakpoint.
grid-col	Creates a new grid column.
grid-col--[breakpoint]-[columns]	This class is used to define how many columns wide the column should be for that breakpoint.
grid-col--[breakpoint]-expand	If set for a certain breakpoint, then it will expand as wide as possible for that breakpoint.
grid-col--[breakpoint]-shrink	If set for a certain breakpoint, then it will shrink as much as possible for that breakpoint.
grid-col--[breakpoint]-push-[columns]	Used to "push" grid columns around inside their parent grid. The number of columns specified can be 1-11.
grid-col--[breakpoint]-first	Displays the column at the beginning of the grid.
grid-col--[breakpoint]-last	Displays the column at the end of the grid.
Accordion
accordion	Denotes an accordion. Should be added to a `div`.
accordion__panel	Denotes an accordion panel. Should be added to a `div`.
accordion__panel--current	Denotes the currently selected accordion panel.
accordion-panel-trigger	Denotes the trigger used to select/view a panel. Should be added to a `button`.
accordion-panel-content	Holds the content of an accordion panel.
Buttons
button	Creates a new button. Can be added to an `a`, `button`, or `input`.
button--xs	Creates an extra small button.
button--sm	Creates a small button.
button--lg	Creates a large button.
button--xl	Creates an extra large button.
button--disabled	Applies disabled styling to a button.
button--expand	Makes a button expand to the width of its container.
button--link	Makes a button look like a normal text link.
button--icon	Indicates the button contains an icon.
button--selected	Applies selected styling to a button. Can be used to denote which button in a bar or group is currently selected.
button-group	Creates a new button group. Should be added to a `div`.
button-group--xs	Creates an extra small button.
button-group--sm	Creates a small button.
button-group--lg	Creates a large button.
button-group--xl	Creates an extra large button.
button-group--dropdown	Indicates button group is a split dropdown menu.
button--dropdown-trigger	Denotes the button used to trigger the display of the dropdown menu.
button-group__dropdown	Container for the button group's dropdown menu.
button-bar	Creates a new button bar (a collection of button groups). Should be added to a `div`.
button-bar--xs	Creates an extra small button.
button-bar--sm	Creates a small button.
button-bar--lg	Creates a large button.
button-bar--xl	Creates an extra large button.
Forms
form--horizontal	Denotes a form with labels displaying beside controls. Should be added to a `form`.
form--inline	Denotes a form with controls displaying on same line. Should be added to a `form`.
form--inline--buttons	Denotes an "inline" form with one or more buttons.
form--inline--no-button	Denotes an "inline" form with no buttons.
form--inline-labels	Denotes a form with labels displaying inside controls. Should be added to a `form`.
form-title	Denotes a form title element. Should be added to a `h5`.
form-row	Denotes a form row element. Should be added to a `div`.
form-actions	Denotes a form footer element containing a submit button. Should be added to a `div`.
form-row--field-collection	Denotes a form row element that contains a field collection.
form-row--required	Denotes a form row element that contains a required field.
form-row--has-errors	Denotes a form row element that contains an error message.
form-row--sub-options	Denotes a form row element that contains a field with sub-options.
form-row--text	Denotes a form row element that contains a "text" `input`.
form-row--password	Denotes a form row element that contains a "password" `input`.
form-row--radio	Denotes a form row element that contains a "radio" `input` list.
form-row--checkbox	Denotes a form row element that contains a "checkbox" `input` list.
form-row--switch	Denotes a form row element that contains a "switch" field.
form-row--search	Denotes a form row element that contains a "search" `input`.
form-row--file	Denotes a form row element that contains a "file" `input`.
form-row--email	Denotes a form row element that contains an "email" `input`.
form-row--number	Denotes a form row element that contains a "number" `input`.
form-row--date	Denotes a form row element that contains a "date" `input`.
form-row--date-picker	Denotes a date field with a datepicker.
form-row--date-fields	Denotes a date field with dropdown fields.
form-row--date-range-picker	Denotes a date range field with a datepicker.
form-row--date-range-fields	Denotes a date range field with dropdown fields.
form-row--time	Denotes a form row element that contains a "time" `input`.
form-row--time-picker	Denotes a time field with a timepicker.
form-row--time-fields	Denotes a time field with dropdown fields.
form-row--time-range-picker	Denotes a time range field with a timepicker.
form-row--time-range-fields	Denotes a time range field with dropdown fields.
form-row--datetime	Denotes a form row element that contains a "datetime" `input`.
form-row--datetime-picker	Denotes a datetime field with date and time pickers.
form-row--datetime-fields	Denotes a datetime field with dropdown fields.
form-row--datetime-range-picker	Denotes a datetime range field with date and time pickers.
form-row--datetime-range-fields	Denotes a datetime field with dropdown fields.
form-row--select	Denotes a form row element that contains a `select`.
form-row--tel	Denotes a form row element that contains a "tel" `input`.
form-row--textarea	Denotes a form row element that contains a `textarea`.
form-row--url	Denotes a form row element that contains a "url" `input`.
form-row__label	Denotes a form label element. Should be added to a `div`.
form-row__controls	Denotes a form controls element. Should be added to a `div`.
field-collection--address	Denotes a collection of address-related fields.
field-collection--name	Denotes a collection of name-related fields.
field-collection--payment	Denotes a collection of payment-related fields.
has-sub-options	Denotes a form control that has sub-options. Should be added to a `ol` or `select`.
control-sub-option	Denotes the container for a particular control's sub-options. Should be added to a `div`.
control-sub-option--show	Forces a "control-sub-option" element to show its contents.
control-sub-options	Denotes the container for a group of "control-sub-option" elements. Should be added to a `div`.
form-response	Denotes the container for the form response message. Should be added to a `div`.
form-response__text	Denotes the container for the form response message text. Should be added to a `div`.
form-response__fields	Denotes the container for the form response message fields list. Should be added to a `div`.
form-alert	Denotes the container for an alert for the form (e.g., required fields are missing). Should be added to a `div`.
Info Rows
info-rows	Denotes a group of info rows. Should be added to a `div`.
info-rows--compact	Removes some of the padding from the info rows to make them more compact.
info-row	Denotes a single info row. Should be added to a `div`.
info-row__label	Denotes the label container of an info row. Should be added to a `div`.
info-row__content	Denotes the content container of an info row. Should be added to a `div`. If the `div` also has an "empty" class, then it will display "n/a".
Labels
label	Denotes a label. Should be added to an inline element, like a `span`
label--pill	Displays the label as a pill (with fully rounded corners).
label--[status]	Available options are "good", "bad", "warning", and "info".
Lightbox (External Docs)
lightbox	Denotes a lightbox element.
lightbox--image	Denotes a single lightbox image element.
lightbox--video	Denotes a single lightbox video element.
lightbox--inline	Denotes a single inline lightbox element.
lightbox--modal	Denotes a single modal lightbox element.
inline-popup	Background for lightbox content.
lightbox--group	Denotes a group of lightbox image elements. For example, a slideshow.
inline-popup--[width]	Sets the max-width of an inline popup or modal popup. Values are the same as breakpoints.
inline-popup__header	Container for the inline popup's header. Should be added to a `div`.
inline-popup__content	Container for the inline popup's content. Should be added to a `div`.
inline-popup-disclaimer	Container for the inline popup's disclaimer. Should be added to a `div`.
modal-popup	Background for modal content. Used in conjunction with the "inline-popup" class.
modal-popup__actions	Container for the modal popup's actions (e.g., "Close" button). Should be added to a `div`.
modal-popup--progress-bar	Denotes a "progress bar" modal.
modal-popup--spinner	Denotes a "spinner" modal.
modal-popup-close	Close button for modal.
mfp-content	Magnific class for primary lightbox container. Added to a `div`.
mfp-figure	Magnific class for lightbox content container. Added to a `div`.
mfp-img	Magnific class for lightbox image. Added to an `img`.
mfp-bottom-bar	Magnific class for lightbox title, description, and counter container. Added to a `div`.
mfp-title	Magnific class for lightbox title and description. Added to a `div`.
mfp-caption	Magnific class for lightbox caption. Added to a `div`.
mfp-action	Magnific class for lightbox action text. Added to a `div`.
mfp-counter	Magnific class for lightbox counter container. Added to a `div`.
mfp-close	Magnific class for close button. Added to a `button`.
mfp-arrow	Magnific class for left/right arrows. Added to a `button`.
mfp-arrow-left	Magnific class for left arrow. Added to a `button`.
mfp-arrow-right	Magnific class for right arrow. Added to a `button`.
Panels, Alerts & Wells
panel	Primary container. Should be added to a `div`.
panel--compact	Displays the panel with less padding.
panel--well	Styles the panel as a well, with inset shadows.
panel--alert	Denotes an "alert" style panel.
alert--[style]	Adds styling to the alert. Available Values: "good", "bad", "warning", "info", "dark"
alert__title	Contains the title of the alert. Should be added to a `h5`.
alert__content	Contains the content of the alert. Should be added to a `div`.
alert__close	The alert's close button. Should be added to a `button`.
Progress Bars
progress-bar	Primary container. Should be added to a `div`.
progress-bar--linear	Denotes a linear progress bar.
progress-bar--radial	Denotes a radial progress bar.
progress-bar--animated	Adds animation to the progress bar. Only used for "linear" progress bars.
progress-[percentage]	Denotes how much the progress bar is filled out. Percentages are in increments of 5.
progress-bar__trench	The trench of the progress bar. Should be added to a `div`.
progress-bar__meter	The colored portion of the progress bar. Should be added to a `div`.
progress-bar__metrics	Container for the progress bar metrics. Should be added to a `div`.
progress-bar__meta	Meta information about the progress bar. Should be added to a `div`.
progress-bar-start	Starting point. Should be added to a `div`.
progress-bar-goal	End goal. Should be added to a `div`.
progress-bar-percent	Percent of the bar that's filled up. Should be added to a `div`.
Sliders (External Docs)
slider	Primary container. Should be added to a `div`.
slider--no-bg	If applied, slide images are converted to background images for their respective slides.
slider--carousel	By default, a slider displays as a carousel.
slider--no-carousel	Denotes a no-carousel slider. This removes carousel-specific styles and behaviors.
slider__contents	Contains the slides and next/previous links. Should be added to a `div`.
slide	A single slide. Should be added to an `li`.
slide--active	The currently active slide.
slide--[number]	Each slide has a unique number class for identification purposes.
slide__image	Contains the slide's image. Should be added to a `div`. If the "slider--no-bg" class is present, this container will be hidden.
slide__overlay	Contains the slide's overlay. Should be added to a `div`.
slide-text	Contains the slide's text and content. Should be added to a `div`.
slide-text__title	Contains the slide's title. Should be added to a `div`.
slide-text__content	Contains the slide's main text content. Should be added to a `div`.
slide-text__action	Contains the slide's action link/button. Should be added to a `div`.
slider__controls	Contains the slider's controls (e.g., next/previous links, pager). Should be added to an `a`.
slider-nav	General class for next/previous links. Should be added to an `a`.
slider-nav--prev	Previous slide link.
slider-nav--next	Next slide link.
slider-controls-pager	Main container for slider page. Should be added to an `div`.
slider-controls-pager__active	The pager control representing the currently active slide.
Tabs
tabs	Primary container. Should be added to a `div`.
tabs--vertical	Tabs should be displayed vertically.
tabs--thumbnails	Tabs are displayed with thumbnails.
tabs__nav	Tab navigation. Should be added to a `ul`.
tabs__panels	Container for all tab panels. Should be added to a `div`.
tab-panel	Container for a single tab panel. Should be added to a `div`.
tab-panel--[number]	Identifier for a specific tab panel. X should be replaced with the tab panel's ordinal value.
tab-panel--current	Identifies the currently selected/visible tab panel.
Tables
table--bordered	Wraps the table in a border. Should be added to a `table`.
table--compact	Removes padding from the table cells. Should be added to a `table`.
table--striped	Applies zebra striping to the rows in the `tbody` tag. Should be added to a `table`.
table--item-pricing	Used for item pricing tables. Causes the "item-pricing-quantity" `td` to expand as wide as possible.
table--responsive	Makes a table responsive.
is-link	Identifies a table row as being a "linked" row. Should be added to a `tr`.
empty	Identifies an empty table cell, and will insert "n/a" in it. Should be added to a `th` or `td`.
numeric	Should be used for cells that only contain a number. Aligns text to the right. Should be added to a `th` or `td`.
rotated	Causes `th` text to display vertically. Should be added to a `thead`.
row-headers	Highlights the first `td` in each `tr`. Should be added to a `tbody`.
flex-table	Denotes a "flex-table" element. Should be added to a `div`.
flex-table--has-links	Indicates that the "flex-table" element's rows are linked.
flex-table__tr	Denotes a "flex-table" row element. Should be added to a `div`.
flex-table__tr--header	Denotes a "flex-table" row header element.
flex-table-td	Denotes a "flex-table" cell element. Should be added to a `div`.
flex-table-td--expand	Increases the width of a "flex-table-td" element.
Tooltips (External Docs)
tooltip	Primary identifier. Should be added to a `span`.
tooltip--trigger	Trigger used to initiate the tooltip.
tooltipster-default	Primary container of the tooltip.
tooltipster-content	Content of the tooltip.
tooltipster-arrow	The tooltip arrow.
Wizards
wizard	Primary container. Should be added to a `div`.
wizard__steps	Container for the list of wizard steps. Should be added to a `div`.
wizard-step	A single wizard step.
wizard-step--current	The wizard step that you are currently on.
wizard-step--completed	A completed wizard step.
wizard-step--incomplete	A wizard step that hasn't been completed yet.
wizard-step--previous	The step that has just been completed.
wizard-step--next	The next step in the process.
wizard__content	Container for the current step's content. Should be added to a `div`.
wizard__actions	The actions available to take for the current step. Should be added to a `div`.
wizard-action	A single wizard action. Should be added to a `button`.
wizard-action--[action]	Available options include: "continue", "back", and "cancel".
Helper Classes
border-[size]	Adds specified border to all sides of element. Available Values: "none" (0px), "thin" (1px), "medium" (3px), "thick" (6px).
border-[side]-[size]	Adds specified border to specified side of the element. Available Values: "top", "bottom", "left", "right".
box-shadow-none	Removes box shadow from element.
box-shadow-1px-border-top	Add 1px box shadow top border to element.
box-shadow-1px-border-bottom	Add 1px box shadow bottom border to element.
box-shadow-3px-border-bottom	Add 3px box shadow bottom border to element.
center-[orientation]	Aligns elements to the specified center of their parent container. Available Values: 'horz", "vert".
clearfix	Self-clearing floats.
display-block	Converts element to a block element.
display-inline-block	Converts element to an inline block element.
display-none	Hides element.
font-style--[style]	Applies specified font style to the element's text. Available Values: "normal", "italic".
font-weight--[weight]	Applies specified font weight to the element's text. Available Values: "light" (200), "normal" (400), "semi-bold" (500), "bold" (700), "extra-bold" (900).
float-left	Floats element to the left.
float-right	Floats element to the right.
float-none	Removes floats from element.
hidden	Hide element from both screenreaders and browsers.
hidden-visually	Hide element only visually, but have it available for screenreaders.
invisible	Hide element visually and from screenreaders, but maintain layout
ir	Used for text/image replacement.
list--plain	Removes default list styling.
list--inline	Displays list items inline. Useful for horizontal lists.
margin-[size]	Adds specified margin to all sides of element. Available Values: "none" (0px), "thin" (8px), "medium" (12px), "thick" (16px), "scale" (24px).
margin-[side]-[size]	Adds specified margin to specified side of the element. Available Values: "top", "bottom", "left", "right".
padding-[size]	Adds specified padding to all sides of element. Available Values: "none" (0px), "thin" (8px), "medium" (12px), "thick" (16px), "scale" (24px).
padding-[side]-[size]	Adds specified padding to specified side of the element. Available Values: "top", "bottom", "left", "right".
nowrap	Removes text wrapping from element.
show-[breakpoint]	Reveals element at the specified breakpoint. Available Values: "small", "medium", "large", "xlarge", "xxlarge".
hide-landscape	Hides element on landscape orientation. Mainly used for mobile devices.
hide-portrait	Hides element on portrait orientation. Mainly used for mobile devices.
show-landscape	Reveals element on landscape orientation. Mainly used for mobile devices.
show-portrait	Reveals element on portrait orientation. Mainly used for mobile devices.
show-touch	Reveals element on touch-enabled devices.
hide-touch	Hides element on touch-enabled devices.
show-retina	Reveals element on retina/HD devices.
hide-retina	Hides element on retina/HD devices.
text-[alignment]	Aligns text to the specified alignment. Available Values: "left", "right", "center", "justify".
width--auto	Sets element width to auto.
width--99p	Sets element width to 99% of its parent.
width--100p	Sets element width to 100% of its parent.
Basic Payment Button
basic-payment-button	Primary container. Should be added to a `div`.
basic-payment-button--paypal-buy-now	Denotes a PayPal "Buy Now" button.
basic-payment-button--paypal-donate	Denotes a PayPal "Donate" button.
Bible Search
bible-search	Primary container. Should be added to a `div`.
bible-search__form	Denotes the search form element. Should be added to a `form`.
bible-search__keywords	Denotes the container for the keywords `input` element. Should be added to a `div`.
bible-search__input	Denotes the keywords `input` element. Should be added to a `input`.
bible-search__version	Denotes the container for the version `select` element. Should be added to a `div`.
Collections
collection	Primary container. Should be added to a `div`.
collection--gallery	Denotes a "gallery" collection.
collection--glossary	Denotes a "glossary" collection.
collection--list	Denotes a "list" collection.
collection--has-toc	Denotes that the collection has a table of contents.
collection-item--details	Denotes a single collection item's details page. Should be added to a `div`.
collection__nav	Denotes collection navigation. Used with "glossary" collection. Should be added to a `div`.
collection__items	Denotes a group of collection items. Should be added to a `ul`.
collection__return	Denotes a "return to list" link on an item details page. Should be added to a `div`.
collection-item	Denotes a single collection item. Should be added to a `li` (collection item list) or `div` (collection item details page).
collection-item--has-image	Indicates that the collection item contains an image.
collection-item--has-icon	Indicates that the collection item contains a FontAwesome icon.
collection-item__content	Denotes the container for all of a single collection item's content. Should be added to a `div`.
collection-item-image	Denotes a collection item's image; extends the image content type. Should be added to a `div`.
collection-item-icon	Denotes a collection item's FontAwesome icon. Should be added to a `div`.
collection-item-label	Denotes a collection item's label. Should be added to a `div`.
collection-item-description	Denotes a collection item's description. Should be added to a `div`.
collection-item-details	Denotes a collection item's details. Should be added to a `div`.
collection-item-action	Denotes a collection item's action (e.g., button). Should be added to a `div`.
Data Tables
data-table	Primary container. Should be added to a `div`.
Donation Tiers
data-table	Primary container. Should be added to a `div`.
Facebook Feed
facebook-feed	Primary container. Should be added to a `div`.
Fundraising Campaign Progress
fundraising-campaign-progress	Primary container. Should be added to a `div`.
fundraising-campaign-status	Denotes container for fundraising campaign status. Should be added to a `form`.
fundraising-campaign-status__amount	Denotes the current amount raised. Should be added to a `span`.
IFrames
iframe	Primary container. Should be added to a `div`. The width and height should be set via the "style" attribute.
Images
image	Primary container. Should be added to a `div`. The max-width should be set via the "style" attribute.
content-image	Primary container. Helps differentiate content type images from images in other content types (e.g., collections).
image--is-background	If added to an "image" `div`, then the image will be set as the background of the "image" `div`'s immediate parent container.
image__text	Denotes the text associated with the image. Should be added to a `div`.
image-text__title	Denotes the image's title. Should be added to a `h5`.
image-text__caption	Denotes the image's caption. Should be added to a `div`.
Image Gallery
image-gallery	Primary container. Should be added to a `div`.
image-gallery--grid	Denotes a "grid" image gallery.
image-gallery--grid--next-prev	Adds next/previous image navigation to a "grid" image gallery.
image-gallery--slideshow	Denotes a "slideshow" image gallery.
image-gallery--carousel	Denotes a "carousel" image gallery.
image-gallery-item	Denotes a single image gallery item. Should be added to a `li` or `div`.
image-gallery-item--details	Denotes a single image gallery item's details page.
image-gallery-item__content	Denotes the container for all of a single gallery item's content. Should be added to a `div`.
image-gallery-item-image	Denotes a gallery item's image; extends the image content type. Should be added to a `div`.
image-gallery-item-overlay	Denotes a gallery item's overlay. Used for "slideshow" and "carousel" galleries.
image-gallery-item-details	Denotes a gallery item's details. Should be added to a `div`.
image-gallery-item-title	Denotes a gallery item's title. Should be added to a `div`.
image-gallery-item-caption	Denotes a gallery item's caption. Should be added to a `div`.
image-gallery-item-action	Denotes a gallery item's action text. Should be added to a `div`.
image-gallery__return	Denotes a "return to list" link on a gallery item details page. Should be added to a `div`.
Inline Process Code
inline-process-code	Primary container. Should be added to a `div`.
Locations & Hours
locations-hours	Primary container. Should be added to a `div`.
locations-hours--icons	Denotes "Primary Location Icons" view.
locations-hours--standard	Denotes "standard" view.
locations-hours--variable	Denotes "variable output" view.
location	Denotes a single location. Should be added to a `div`.
location--[num]	Denotes a single location. Should be added to a `div`.
location__image	Denotes a location's image. Should be added to a `div`.
location__title	Denotes a location's title. Should be added to a `div`.
location__hours	Denotes the location's hours and other information. Should be added to a `div`.
location__info	Denotes a location's info. Should be added to a `div`.
location__address	Denotes a location's address. Should be added to a `div`.
location-address	Generic class for all of a location's address lines. Should be added to a `div`.
location-address--[num]	Denotes a single line in a location's address. Should be added to a `div`. A location can have up to 5 address lines.
location__phone	Denotes a location's address. Should be added to a `div`.
location-phone	Generic class for all of a location's phone lines. Should be added to a `div`.
location-phone--[num]	Denotes a single phone number for a location's address. Should be added to a `div`. A location can have up to 3 numbers. A phone number's label is wrapped in `strong` tags.
location__links	Denotes a location's various links. Should be added to a `div`.
location-links-email	Denotes a location's email address. Should be added to a `div`.
location-links-contact-form	Denotes a link to the location's contact form. Should be added to a `div`.
location-links-social	Denotes container for the location's social media links. Should be added to a `div`.
location-links-social__facebook	Denotes container for the location's Facebook link. Should be added to a `div`.
location-links-social__twitter	Denotes container for the location's Twitter link. Should be added to a `div`.
location-links-social__linkedin	Denotes container for the location's LinkedIn link. Should be added to a `div`.
News Articles
news-articles	Primary container. Should be added to a `div`.
news-articles--list	Denotes a list of news articles.
news-articles--article	Denotes a single article view.
news-article	Denotes a single news article. Should be added to a `div`.
news-article-image	Denotes an article's image. Should be added to a `div`.
news-article-details	Contains the article's header, meta info, and description. Should be added to a `div`. Only appears on article list view.
news-article-header	Denotes an article's header, including title and meta info (date, author). Should be added to a `div`.
news-article-title	The article's title container. Should be added to a `div`.
news-article-meta	Denotes a "news article meta info" container. Should be added to a `div`.
news-article-meta--date	The article's post date container. Should be added to a `span`.
news-article-meta--author	The article's author container. Should be added to a `span`.
news-article-description	Denotes an article's description. Should be added to a `div`. Only appears on article list view.
news-article-content	Denotes an article's content (e.g., image, text) Should be added to a `div`. Only appears on single article view.
news-article-comments	Denotes an article's comments. Should be added to a `div`. Only appears on single article view.
news-articles-archive	Denotes a link to the article archive. Should be added to a `div`. Only appears on article list view.
news-article-return	Denotes a "return to articles list" link. Should be added to a `div`. Only appears on single article view.
Order History
order-history	Primary container. Should be added to a `div`.
order-history__header	Denotes the "order history" element's header. Should be added to a `div`.
order-history-header__contents	Denotes the contents of the "order history" element's header. Should be added to a `div`.
order-history-header__toggle	Denotes the toggle between the "order history" element's views. Should be added to a `div`.
toggle-orders	Button to switch to "orders" view. Should be added to a `a`.
toggle-items	Button to switch to "items" view. Should be added to a `a`.
order-history-header__search	Denotes the "order history" element's search form. Should be added to a `div`.
order-history-header__actions	Denotes the container for the "order history" element's actions. Should be added to a `div`.
action-cart	Button to go to shopping cart. Should be added to a `a`.
action-export	Button to export order history. Should be added to a `a`.
table--order-history	Denotes the history list table. Should be added to a `table`.
table--order-items	Denotes the items list table. Should be added to a `table`.
order-history--export	Denotes the "export order history" view.
order-history--history--order-list	Denotes a list of previous orders.
order-history--history--order-view	Denotes the details of a previously placed order.
order-history--history--reorder	Denotes form for reordering a previously placed order.
order-history--history--preview	Denotes a preview for a previously placed order.
order-history--history--cart	Denotes the "order history" shopping cart.
order-history--history--receipt	Denotes the receipt for reordering a previously placed order.
order-history--items--item-list	Denotes a list of previously ordered items.
order-history--items--item-edit	Denotes the form for modifying a previously ordered item.
order-history--items--preview	Denotes a preview for a previously ordered item.
Policy Links
policy-links	Primary container. Should be added to a `div`.
policy-link	Denotes a single policy link. Should be added to a `div`.
policy-link--[type]	Specifies the type of policy link. Available Values: "privacy", "terms-conditions"
Twitter Feed
twitter-feed	Primary container. Should be added to a `div`.
twitter-feed--embedded	Twitter feed is displayed as embedded tweets.
twitter-feed--list	Twitter feed is displayed as a list.
twitter-feed--list--no-avatars	Twitter feed is displayed as a list without avatars.
tweet	Container for a single tweet. Should be added to a `div`.
tweet__content	Container for all content for a single tweet. Should be added to a `div`. Only in "list" view.
tweet__text	Container the tweet's text. Should be added to a `div`. Only in "list" view.
tweet__meta	Container the tweet's meta info. Should be added to a `div`. Only in "list" view.
tweet__author	Container the tweet's author name as a link to their profile page. Should be added to a `div`. Only in "list" view.
tweet__datetime	Container the tweet's date and time info as a link to the tweet on twitter.com. Should be added to a `div`. Only in "list" view.
Search Form
search-form	Primary container. Should be added to a `div`.
search-form__results	Denotes container for search results. Should be added to a `div`.
Videos
content-video	Primary container. Should be added to a `div`.
content-video--youtube	Video is a YouTube video.
content-video--vimeo	Video is a Vimeo video.

Introduction

Coding Standards

Class Reference

Foundation

Components

Content Types

Class Reference