General
Key datasets
View more datasetsUsage notes
Use where you have a header of undetermined length right next to an action, like a link or a button.
Usage notes
Use where you'd want the headers and actions to appear nearly right next to each other, right-aligned, and behaving nicely responsively
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consectetur quas dolorum veritatis nam! Id fuga, similique earum totam beatae nobis quo debitis rerum quasi suscipit ab consequatur eius ea!
Vero velit blanditiis, molestias facere placeat, quaerat ab ipsam quisquam unde minima asperiores dolorem, iure ducimus ullam dignissimos deleniti quia dolore incidunt deserunt cupiditate. Voluptates, optio vel sapiente nisi. Voluptatum.
Perferendis accusamus hic dolorem delectus illo ullam at corporis voluptas totam. Veritatis blanditiis culpa aut laboriosam error inventore repellendus saepe, nisi porro officiis quisquam molestias eum officia recusandae ea cupiditate!
Fanny pack disrupt vegan tote bag, Kickstarter shabby chic meggings. Truffaut scenester kogi, hoodie art party ethical slow-carb. Lo-fi plaid Godard master cleanse Schlitz, ugh fanny pack cardigan trust fund narwhal Pitchfork. Locavore banh mi scenester jean shorts tofu asymmetrical chia selvage, readymade food truck letterpress cardigan fashion axe you probably haven't heard of them Echo Park. Flexitarian crucifix bespoke, Cosby sweater leggings authentic 90's irony locavore whatever Odd Future scenester Marfa single-origin coffee Pinterest. Organic fanny pack keffiyeh, semiotics try-hard asymmetrical ugh Banksy kogi gastropub drinking vinegar McSweeney's Tumblr Wes Anderson. Locavore tote bag plaid, next level you probably haven't heard of them distillery vegan Thundercats ethical butcher fingerstache.
Usage notes
Use when you want to display a small amount of content and have the option for the content to go into more depth, but space is critical, like content page introductions.
Usage notes
This is a small component, and very simple. Works with and without a leading 0 for 1st-9th, as it's centrally-aligned and width-restricted.
Usage notes
Lightweight dividers, to create clearer sections with horizontal space on medium viewports and up ('tablet') and vertical space on narrow viewports ('mobile')
Cold
Fat
Opaque lozenge for use on backgrounds
Opaque, fat lozenge
Usage notes
Lozenges are used for displaying statuses. Available in a standard format, and a couple of variations.