Pattern Library Notes

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:


Pattern Section: Uncategorized

These are patterns that aren’t yet categorized. We’ll classify them eventually.

Messages button

Sits in the user header bar, notifying them of how many unread messages they have and giving them a link to access them.

Toggle pattern display width

Messages button with unread count

Same as Messages button pattern, but in the unread messages state.

Toggle pattern display width

Product feature

Shows off a feature of the product to a potential customer.

Toggle pattern display width

Product feature list

A list of features related to a certain product.

Toggle pattern display width

Product features for user type

A big showcase of how Superfeedr can help certain types of users.

Note: Must contain exactly three feature points.

Toggle pattern display width

Testimonial

A user of the product saying something about it.

Toggle pattern display width

User logos testimonials

An implicit testimonial of sorts, showcasing big-name users of the service.

Note: This pattern makes use of the logo grid pattern, reconfiguring its layout for the purposes of this component.

Toggle pattern display width

Screenshot slider

A showcase of the product’s various features, and notes about their merits.

Toggle pattern display width

Pricing table

A comparison of two featuresets across two product types.

Toggle pattern display width

Logo grid

A set of service logos that we want to show off our connection to.

Note: This pattern is often included in others, its layout behaviour controlled by them.

Toggle pattern display width

Sign up call to action

A generic call to action, directing people to the sign up form for whichever product they’re interested in.

Toggle pattern display width

Sign up block

A row containing our boiled-down sales pitch, encouraging someone to sign up for Superfeedr.

Toggle pattern display width

News scroller

A ticker that shows a brief preview of the latest articles posted to the Superfeedr blog. (JavaScript-dependent.)

Toggle pattern display width

Hero section

A big bold opening to a page on the marketing site, providing a brief snapshot of that page’s most valuable contents and directions to act. Contains the Hero header navigation pattern.

Toggle pattern display width

Overlay

A generic loading overlay, when making network requests.

Toggle pattern display width

Notification

A notification used to flash a dismissable message at the user.

Toggle pattern display width

Notification (marketing)

A notification displayed on the marketing site.

Toggle pattern display width

Invoice meta block

Has all the meta information about the invoice (address, contact, etc.)

Toggle pattern display width

Invoice meta columns

Primary and secondary columns, these float our meta items where we want them. These can probably be replaced with normal columns.

Toggle pattern display width

Invoice meta item

A single meta item in the invoice meta block.

Toggle pattern display width

Invoice footer

Footer on an invoice.

Toggle pattern display width

Command demo

Ideal for showing off a curl or other CLI command. Used heavily in the docs.

Toggle pattern display width