Accordion

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.

US Ecology Detroit North

US Ecology Detroit North is a technological leader in the treatment of inorganic aqueous wastes. The facility supports a wide range of companies across several industry sectors that depend on our innovative and cost effective treatment technology, unsurpassed customer service, and track record of proven results.  Additional support is provided to industry, including a specialized transportation fleet that is comprised of box vans, bulk tankers, stainless steel vacuum tankers and fiberglass reinforced vacuum tankers. The facility’s treatment process converts hazardous inorganic waste liquids into non-hazardous residues. As a result, RCRA hazardous waste liabilities and other long-term risks associated with disposal are minimized.

What is the airspeed velocity of an unladen swallow?

Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour.

Blockquote

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 "Text (brief)" component 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

Here's a really long quote, demonstrating the placement of the closing mark.

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.

Cards

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.

1.2 Million Tons of Waste Safely Disposed Annually

74 Million Gallons of Wastewater Treated Annually

1 Million Gallons of Oil Recovered Annually

A separate card type with similar fields is the 'Biography' card. This is for highlighting a particular professional in your organization.

Brad Czerniak

Director of Technology

Brad is a human person from the United States state of Michigan. He breathes, has cardiac rhythm, and both drinks and eats for sustenance.

Ryan Hirst

Drupal Developer

Ryan is likewise a human in Michigan.

Regular cards and biographies can be put right next to each other, though that seems like a pretty uncommon use case.

Ryan Hirst

Drupal Developer

Ryan is likewise a human in Michigan.

1.2 Million Tons of Waste Safely Disposed Annually

Heading

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 (for page titles)

Heading level 2 (for sections)

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Headings have a number of optional settings:

  • Font weight
  • Icon (for industries and services)
  • 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)

Transparent

Black

Grey (dark)

Grey

Grey (light)

White

Main

Main (dark)

Main (light)

Second

Second (dark)

Second (light)

Third

Third (dark)

Third (light)

Teal accent

Layout

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.

One-third column

Two-thirds column

This column has a light green background, an animation, lots of horizontal padding, and center-aligned text.

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.

This column will take up the entirety of the space for the layout when you collapse the screen down to tablet/mobile width.

Link(s)

The Link(s) 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 multiple links from the component as they display by default, side-by-side with some space between:

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

Here's all the buttons in theme colors:

Media

The media component lets you enter images, videos, video embeds, audio, and documents. Below I will insert all of these. The image has a caption and link, whereas the others operate on the defaults without the additional fields.

This is the caption for Brad's picture

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.

More often than not, images are set alongside some text for context and story-telling purposes. This column is wide, whereas the image column is a little bit narrow. Note how it naturally takes the column's width.

Here's an audio component

Here's a video. This is a video uploaded to the site rather than embedded from a service like YouTube.

And this is a video embed from YouTube:

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 ♦.

Spacer

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.

Special: Block

The 'Block' flavor of the Special 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 is the social icons block:

Special: 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:

Sample Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. 

As you can see above, different content types have different ways of displaying as teasers (per the designs), so in practice these listings are best for showing items of the same type.

Below is the same content as above, side-by-side, but now it's the small display mode. Smalls tend to all be white-bordered boxes with just a little text and maybe an icon or thumbnail:

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

Sample Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. 

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.

Special: Content Listing (Resources)

Resources can also be inserted in content listings, and displayed in the usual ways. Any stripe with a content listing of resources is also reusable on multiple pages via the "Add existing Section" button.

Resources can be laid out side-by-side, akin to other places (Views). They can also be placed in slideshows, though as you can see below it's strange and we wouldn't necessarily recommend it. You can also put them in layouts and have them display in columns, which gives you a lot of control over their display.

Special: Term listing

The term listing special component works similarly to the content listing special component, but instead of content it shows tags and terms as teasers and smalls in layouts.

Here's some term teasers side-by-side:

Those same terms, side-by-side, but as smalls instead of teasers:

Teasers in a single column:

And six teasers in a carousel:

Special: View

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:

Special: Webform

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.

This is an element description.
I'm interested in knowing what element 'more' is.
This is presumably some kind of code field. Doubt this will be used on this site. Or any site?
Enter an integer between 0 and 100
Choose a number between zero and 100
Sign above
This is some example ToS content
A validated field for entering a link
Basic address
Advanced address
Contact
Name (with all the trimmings)
Title
Telephone advanced

This is some markup set to display within the form.

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.
Buttons
Checkboxes (plus other)
QuestionsVery UnsatisfiedUnsatisfiedNeutralSatisfiedVery Satisfiedna
Radios

Text (brief)

The Text (brief) component lets you enter a little bit of text and style it. It's most useful for quote bylines and other places where you don't need a heading. Here's Text (brief) by default:

This is some brief text.