You are at the start of the main content


The accordion component is useful for when a brief string of text can describe a longer passage of text that is optional enough to be hidden by default.

This one is closed by default

Inside is some text that appears when you click/toggle the label.

But this one is open by default

The checkbox in the Settings tab lets you set this per accordion.

And another closed one

This is just for closure, rather than being a distinct state of accordion-ness. Imagine what this section would be like if there were just one open and one closed accordion!


The 'Block' flavor of component lets you insert system blocks. This is useful for dropping in social icons, forms for search and other listings, or filling in some blanks throughout the site when it comes to functionality other components don't handle. When in doubt, stay away from this component; it's used sparingly in day-to-day content entry.

Below are the blocks provided by frost's custom modules that you might find yourself using within content or, for instance, the site footer:


1428 Mark Ave
Lincoln Park, MI48146



The blockquote component allows you to show a quotation in a semantically-meaningful way in the HTML markup, and also makes the quotation stylized. It's best used in conjunction with a Heading component (set to regular text for semantics) as the byline below it, as illustrated below:

When you reach the end of your rope, tie a knot in it and hang on.

⁠—Franklin D. Roosevelt

The blockquote component has Settings for the inclusion of the opening and closing quotes separately, with both checked to include them by default, in case you want have or not have the stylized marks. See below for a blockquote without marks.

The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life; and the procedure, the process is its own reward.

⁠—Amelia Earhart

Finally, here's a very long quote with opening and closing quote marks, demonstrating the placement of the closing mark.

Blockquote can contain non-paragraph text.

Lorem ipsum dolor sit amet, sit verear bonorum fabellas ea, ea autem invidunt has. Pri at tibique ocurreret. Sea populo signiferumque necessitatibus cu, cum eu erat debitis. Ex odio quando torquatos nec, te his noluisse singulis consequat. Ius in zril officiis ocurreret.

Id aliquid oportere nec. Eu duo adipisci dissentiet ullamcorper, pro eu nobis partiendo definitiones, habemus commune prodesset pro ad. Ius saperet ancillae id, nec apeirian conclusionemque an, te vis conceptam complectitur. Ut pri facer denique consectetuer, ius no modus petentium efficiantur, sit putant postulant ne. Graece eripuit vel ei. Nec an ocurreret mnesarchum, duo cu propriae gubergren theophrastus, per probo iudicabit id.

Vis nemore putant eu, eam volumus expetenda ne. Albucius consetetur vituperata sit cu. Ad sit odio maluisset. Prima blandit no sea. Iudico invenire consequuntur eu cum. Ex nam delectus accommodare intellegebat, scaevola explicari cu vel.

Copiosae quaerendum has at. Ne odio delicatissimi mea, homero veritus appellantur cum id, ne mel impetus salutatus. Ad mundi oporteat sit, sea ea inani dolore integre. Id timeam appetere lucilius vix, tritani detracto pericula qui ei, omnis dissentiunt ei eum.

Ex has voluptua recusabo qualisque. Vero petentium nam te. In iisque nominavi consequat pro. Est an civibus nominati, sea ei commodo detraxit repudiare, esse clita impetus eum no. Novum dolore nec ex, maiorum omnesque deserunt mei ei, veniam mucius omittam est an.

This blockquote ends with a code tag, just to throw a wrench in the works.


Cards are bite-sized, reusable pieces of content that you can place all over the site. They're an optional image, title, some text, and an optional link. They appear styllized and side-by-side, but can be developed to appear in all kinds of ways.

Below, cards appear side-by-side.

Cards can also appear in carousels, as shown below.

Content Listing

The content listing special type lets you show snippets of other content on the site, whether it be news articles, events, services, service categories, industries, or others. You can mix and match them. And with the settings you can choose how they're laid out and whether to show a larger teaser or a small chiclet.

Below is side-by-side listing of teasers for various content types:

Here's the same content again, but with the teasers displaying vertically in the single column layout:

The third layout option for content is a slideshow/carousel. It displays three items and advances by one. Below is the same content plus some friends in teaser form, styled as a carousel.


The heading component inserts HTML <h*> tags and allows for styling. See below for the base heading type scale, as compared against this body text:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
Heading (regular text, span)

Headings have a number of optional settings:

  • Font weight
  • Size - any heading level can look like any other heading level
  • Text color - full suite of colors from the theme
  • Text transform - take regular-case text and style it as ALL-CAPS or other casing


Below is a heading level 2 styled to look like a heading level 3 with a color.

Looks like a heading 3, doesn't it?

Below is heading level 2 with all the theme colors:

Dark (inherit)


Grey (dark)


Grey (light)



Main (dark)

Main (light)


Second (dark)

Second (light)


Third (dark)

Third (light)



The iframe component lets you insert content from other sites. This component should be used sparingly, as iframes are unpredictable and don't work very well on mobile.

Here's an example iframe:


What's cool about layouts is that you can mix and match all the other components on this page, and place them into logical layouts of infinite configurability.

The way you do that is by making a Layout component (a 'row') and then placing columns within it. The Layout row only has two options:

  • Column spacing - what to do with any remaining space between columns, which is rare
  • Reverse? - Allowing you to make a row appear in reverse order for creating alternating rows


Each column has a lot more Settings:

  • Animate - whether you want an animation to reveal the column as a user scrolls down to it
  • Animation type - A bunch of effects to choose from that activate when you click the Animate checkbox
  • Background color - Theme colors you can use to add some color to the column
  • Padding (horizontal) - How much left-right space to introduce to either side of the content
  • Text alignment - Left/Right/Center/Justified text within the column
  • Text color - either Dark or light, depending on the background color you choose
  • Vertical alignment - how you want the content of the column to align with content in other columns
  • Width - the relative width of the column compared to the others. If you make a Small column and a medium column in a layout row, the result will be a 1/3-2/3 layout, which is pretty common


Here's that very layout for your testing.

A common use case for layouts is that one column will be empty, while the other has content in it. In these cases, there's usually a background image that takes up the empty space, and it disappears or becomes less-usefully smaller on tablet and mobile. For these layouts, the empty column (a column containing only one spacer) will disappear entirely when you get to mobile view.


The Link component lets you enter links in a way that helps preserve paths on the site (in case the URLs for pages change, the links will auto-update). It also has a couple Settings that allow you to display links as buttons.

Here's a link as it displays by default:

And here's a link rendered as a button in a theme color:

Here's all the buttons in theme colors:


The media component lets you enter images, videos, video embeds, audio, and documents. Below I will insert an image with a caption and hotspots:

Brad Czerniak

Brad Czerniak made a lot of the base-level components in this system.


Brad has a nosering. No, not really.

As you can see, the image is really big. Images are responsive on this site, so inserting the same image into a layout causes it to be constrained. You can also upload smaller images and they will max out at their natural width.

And this is a video embed from YouTube:

Video caption


Do video hotspots work? This should be in the bottom left corner.

Media listing

The media listing component lets you place media side-by-side, vertically, in a slider, and potentially other layouts. A toggle lets you choose to display the contents in a lightbox when the user clicks an individual media item.

The business section of a newspaper
Toy bricks that look similar to LEGO
Radiation meters


The message component uses the same markup as system messages in Drupal, and can be used for sitewide alerts, or for other purposes like catching a user's attention in the middle of a large block of content.

All message components are dismissible, and once dismissed will not appear for the user again unless they clear their browser's localStorage cache.

This is a status-level message, for good news and low-priority notifications

This warning-level message can guide a user when something is important but not urgent.

Error-level messages are for the most dire of circumstances.

Rich text

This is rich text. It's a WYSIWYG that can take a bunch of text of your choosing.

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. 

The rich text WYSIWYG includes the ability to include bold text, as well as italic text, superscriptssquared, plus subscriptsbelow.

You can insert horizontal rules:

And within the text you can add links, though this is surprisingly rare in this design system.

Additionally, you can add bulleted lists:

  • First
  • Second
  • Third


Plus! Here's a numbered list:

  1. One
  2. Two
  3. Three


The WYSIWYG also includes some utility buttons, including one to insert symbols like ♦.


The spacer component lets you put vertical breathing room between other components in a consistent manner. Below is an example of the 32x spacer, the biggest one available. There should be a lot of empty space below this text.


Stripes have a bunch of options, and this stripe has lots of them selected.

  • Background color ⁠— Theme colors you can set. If you use a background image, please set a color that similar to the darkness of the image being used
  • Background image ⁠— Reusable images that appear as the background
  • Background image alignment (horizontal) ⁠— A focal point horizontally
  • Background image alignment (vertical) ⁠— Focal point vertically in image
  • Background repeat ⁠— If you use a tiny image, you can tile it as a pattern
  • Background sizing ⁠— Usually fill the whole area. Can also do tricky things
  • Full width ⁠— Eliminate the maximum content area width, and have the stripe go all the way to the screen edges on big screens
  • Hide background image on mobile ⁠— If the background image is 'busy', hide it on narrow screens
  • Text alignment ⁠— Left, right, center, justify. Please never use justify
  • Text color ⁠— Light or dark. Please match it to the background color you choose (the one that matches the darkness of any background images used)
  • Unpad ⁠— Remove the top and bottom padding from the stripe so it's short and has less breathing room

Stripe Collection (Tabs)

Stripe collections primarily allow you to create interactive tabs. Those same tabs can also be rendered as a carousel, though this is not recommended, as carousels of that nature tend to be hated by users.

Tab 1

Content of the first tab

Every tab can be styled separately, using the very same dials and switches as an atomic stripe.

Second tab

Tab 2 content

This tab has more stuff in it. Pretty fancy!


The Table component lets you insert semantic data tables on the site. Only simple numeric and plain-text data is allowed in the tables, so as to avoid using tables in an unsemantic manner. As we'll see, this limitation is also a way to allow us to make cool charts!

Here's a plain table of data that we'll reuse a bunch of times thereafter:

Analysis of breakfasts by column
BreakfastColumn 1Column 2Column 3Column 4
Pop tarts10446
English muffin2286

We can display table data (with some limitations) as a few different chart types:

  • Bar
  • Column
  • Pie
  • Line
  • Stacked

...along with some additional options like labels and replacing the table with the chart.


Here's the breakfast table with a bar chart:

Analysis of breakfasts by column
BreakfastColumn 1Column 2Column 3Column 4
Pop tarts10446
English muffin2286

Here's a vertical bar (column) chart, using the same data as the horizontal one, though you can't see because we hide the table and just represent the data as a chart visually:

Analysis of breakfasts by column
BreakfastColumn 1Column 2Column 3Column 4
Pop tarts10446
English muffin2286

Here's a pie chart. Notice that we're only using one column of numbers; we can actually put in more, but the chart looks weird if you do that. Charts are fault-tolerant, but are best when the right data is entered:

Analysis of breakfasts by column
BreakfastColumn 1
Pop tarts10
English muffin2

Here's a line graph of the original data:

Analysis of breakfasts by column
BreakfastColumn 1Column 2Column 3Column 4
Pop tarts10446
English muffin2286

And here's a stacked chart of the original data:

Analysis of breakfasts by column
BreakfastColumn 1Column 2Column 3Column 4
Pop tarts10446
English muffin2286


The View Special component lets you insert listings and dynamic content areas. Typically this sort of content would be built by the developer, and often placed by a developer as well. Only insert views if you are confident in what you are doing.

Below is an example view, in this case the three most recent pieces of content on the site (this can be filtered by type in the components additional options):


The Webform special is the way to insert forms on the site. First you make the form from the webforms section of the admin screens, then select the form you want when making the component.

Search a state or province name, and the autocomplete should start triggering around 2 letters
This is a code input, set to accept CSS code specifically.
Source →Destination
Alabama →
Alaska →
Arizona →
Arkansas →
California →
Colorado →
Connecticut →
Delaware →
District of Columbia →
Florida →
Georgia →
Hawaii →
Idaho →
Illinois →
Indiana →
Iowa →
Kansas →
Kentucky →
Louisiana →
Maine →
Maryland →
Massachusetts →
Michigan →
Minnesota →
Mississippi →
Missouri →
Montana →
Nebraska →
Nevada →
New Hampshire →
New Jersey →
New Mexico →
New York →
North Carolina →
North Dakota →
Ohio →
Oklahoma →
Oregon →
Pennsylvania →
Rhode Island →
South Carolina →
South Dakota →
Tennessee →
Texas →
Utah →
Vermont →
Virginia →
Washington →
West Virginia →
Wisconsin →
Wyoming →
Sign above
Terms of service
This is an example.
Basic Address
Advanced Address
Telephone Advanced
One file only.
64 MB limit.
Allowed types: gif, jpg, png, bmp, eps, tif, pict, psd, txt, rtf, html, odf, pdf, doc, docx, ppt, pptx, xls, xlsx, xml, avi, mov, mp3, ogg, wav, bz2, dmg, gz, jar, rar, sit, svg, tar, zip.