Class Reference

A few notes about classes:

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.
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--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--static Denotes a non-animated progress bar. Only used for "linear" progress bars.
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--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--next-prev Adds next/previous image navigation to a "grid" 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--facebook Video is a Facebook video.
content-video--youtube Video is a YouTube video.
content-video--vimeo Video is a Vimeo video.