Heading 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Heading 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Heading 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

The palatable sensation we lovingly refer to as The Cheeseburger has a distinguished and illustrious history. It was born from humble roots, only to rise to well-seasoned greatness. The palatable sensation we lovingly refer to as The Cheeseburger has a distinguished and illustrious history. It was born from humble roots, only to rise to well-seasoned greatness.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

• This is a list item
  • This is a list item
  • This is a list item
• This is a list item
• This is a list item
• This is a list item

Callouts

Callouts are used at the top of a page to present timely content.

Images

Content Banner

Full-width image across the top of a content page. (See gray placeholder image at the top of this web page.) When used, it must appear as the first content element, above the H1. Required dimensions are 850 pixels by 250 pixels. 

Image Floated Left

This is an example of an image floated left. Floated images should not have a width that exceeds 250 pixels. Select an image in the WYSIWYG and choose the Align left and wrap text button.

Image Floated Right

This is an example of an image floated right. Floated images should not have a width that exceeds 250 pixels. Select an image in the WYSIWYG and choose the Align right and wrap text button.

Cover Art Images

Should not exceeds 150 pixels on the longest side. 

Buttons

Primary

Use to signify a primary action, such as the "Submit" button on a form. May also be used as a call-to-action element in the content area.

Primary Button

Secondary

Use for secondary actions, such as the "Clear" button on a form.

Secondary Button

Table

Use tables for tabular information, including data, comparisons or content in which a grid structure allows information to be consumed quickly—such as listing fees and fines. Ideally, tables should have no more than four columns due to space constraints on mobile devices.

Wrap large tables in a .table-responsive div to make them scrollable on mobile devices.

Icon Bubble Lists

The icon bubble is intended to call out a group of common or primary actions. Think of them as "multi-CTAs." By default, they arrange into rows of three on desktop. While not always possible, try to group topics in a way that avoids orphans.

Within each list item, two layouts currently approved for use: an icon and CTA link; or a bold label, icon and CTA link. Under the Additional Font Awesome settings button, be sure to set the size to 2X.

Accordion

Allows large amounts of copy to be condensed and hidden from view. Accordions are ideal for secondary content that the majority of users won't need to see, or would only need to see part of. It's also helpful for organizing large amounts of related content into helpful categories. It's also helpful in organizing content if there is more than one audience viewing the page—this allows users to read only what they are interested in without having to read what doesn't.

When an anchor is included in an accordion panel, the panel will automatically open and the page will scroll to the anchor.

Events Feed 

Can be used on page to pull in a list of upcoming events. This component is configurable to display events of a certain type, age group, location or "featured" status. Use the dynamic list, upcoming events content item to add an events feed to a page.

Form

LibAnswers Forms

LibAnswers question forms also open a modal window and direct submissions directly to a third-party tool. These forms are embedded on our pages via a vendor-provided snippet that is modified to fit our UI. 

Drupal Forms

Drupal forms should always be included in a modal window tiggered by a CTA button unless they are the only element on the page. 

Step List

Allows complex, multistep processes to be demonstrated visually. Add text as a basic numbered list using the button in Drupal's WYSIWYG. Then, select 

1. Add your text to the web page.
2. Use the Numbered List button in Drupal's WYSIWYG to apply the basic 1. 2. 3. etc. numbered list.
3. From the Block Styles dropdown, select Step list. This will automatically convert the basic numbered list into the step list you see here with the purple, circled numbers.

Responsive Video

Adds border and radius to an embedded video. Will work inside of a grid, or stand alone.

Cover Flow Carousels

Carousels featuring recommended titles are populated by Polaris record sets and can be placed on any page via the Add Book Carousel content item. The carousel ID must match an existing BRS number in Polaris. When adding a carousel, always include a heading that describes the list, such as "Recommended Nonfiction" or "Spooky Halloween Reads for Kids" and include a "View All" link back to the Polaris.