Boxes play a pretty central role to Superfeedr’s design. There are a few varieties of boxes that appear throughout the UI.
A simple box for displaying numeric data, with a short description of that data.Toggle pattern display width
The data box, but with help available to further explain the data on display.Toggle pattern display width
This is the standard box used to display content within the Superfeedr app.Toggle pattern display width
Use for collecting data from the user, or for giving them input of some kind over the application.Toggle pattern display width
Used to provide the content within with the padding and appearance of being in a box, without actually adopting box styles.Toggle pattern display width
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.