A simple box for displaying numeric data, with a short description of that data.

The data box, but with help available to further explain the data on display.

This is the standard box used to display content within the Superfeedr app.

Use for collecting data from the user, or for giving them input of some kind over the application.

Used to provide the content within with the padding and appearance of being in a box, without actually adopting box styles.

Allows the user to provide input, and offers help.

Contains an element for a chart, useful for visualising user data. This could take the form of analytics data, like the number of feeds subscribed to, or the form of user data, like the credit usage over a certain period.

Pattern Library note: the chart rendered here is created using data copied from the application. In actual implementation, this data is included in a canvas element attached to the markup output by the Rails application.

Used to display properly formatted sample code, or console output. Note that applying the class code__highlight to a line of code gives it emphasis. This is effective when combined with a query builder or something similar, linking the parameter being adjusted to the resulting code.

A normal box, on the surface, but the table inside is actually taking on the classes of the box in order to achieve the proper look. Used to display tabular data of any sort.

Note: we use the u-cell-trim-text-tds on the table to constrain cells when their contents are too long for their container.

Provide a form with a reference table. Shown here in the case of a pricing table, this can be used for other applications too, if necessary.

Note: currently, this pattern uses a custom pricing-table class, which provides alternating coloured rows among other styles—this could be abstracted. Furthermore, note that we zero out the padding on the second of the two .box__content containers with our utility class u-p-0. Also, the code used to document this pattern was generated by Angular, so it may have some odd qualities to it.

Provides lengthy, timely information to a reader.

Read state for Message box.

Open state for Message box.

A box with the side margins removed, to sit flush with text when used in a column (as in the docs, for example).