Steps, parts, and offers

Examples

When to use it

When order or count is the point. Three to six items.

Live: Management README (steps), Unresolved and Hirsla (parts), Advisory (offers).

Anatomy

Group rule

4px ink, 5px from 1024, for all three.

Number

Tabular, secondary ink.

Title

Instrument Sans 500.

Description

Newsreader (parts, offers)

Variants

Steps

ol.steps: number and a short sentence. Title 26/32, 34/40 desktop; number column 40, 56 desktop; 1px ink between items.

Parts

ol.parts with .parts-t and .parts-d. Title 22/28, 28/36 desktop; number column 32, 56 desktop.

Offers

.offers > .offer with .offer-h, .offer-price and description. Heading 22/28, 28/34 desktop (name and price on one line); price 16/24, 20/28; hairline between offers, ink on desktop. Followed by .fine and .after-offers, and the contact address set large in .mail-big.

Behaviour

Phone, tablet, desktop

Sizes and number columns step up at 1024 (see Variants).

Motion

None.

Accessibility

Ordered lists for steps and parts.

Words

Steps as short sentences with full stops. Offer prices as they are on the site.

Code

Classes: .steps .parts .parts-t .parts-d .offers .offer .offer-h .offer-price .fine. Styles in site/assets/css/site.css.

<ol class="steps">
<li><span class="n">01</span><span class="t">Analyse calmly.</span></li>
<li><span class="n">02</span><span class="t">Fix the root cause.</span></li>
<li><span class="n">03</span><span class="t">Move forward.</span></li>
</ol>