Case header
On a real case page, the cover sits beside the text from 900px.
Clean · light
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
- Client
- byrd technologies
- Year
- 2020–2024
- Role
- Senior, then lead product designer
- Links
2 months for the redesign, against a 2-quarter estimate
96 → ~11 colour values
58 components, 240 variants
152 layered icons
Clean · dark
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
- Client
- byrd technologies
- Year
- 2020–2024
- Role
- Senior, then lead product designer
- Links
2 months for the redesign, against a 2-quarter estimate
96 → ~11 colour values
58 components, 240 variants
152 layered icons
Vector
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
- Client
- byrd technologies
- Year
- 2020–2024
- Role
- Senior, then lead product designer
- Links
2 months for the redesign, against a 2-quarter estimate
96 → ~11 colour values
58 components, 240 variants
152 layered icons
Comic
ByrdView Design System
A design system built from the ground up as the sole designer, using 10% of my weekly time.
- Client
- byrd technologies
- Year
- 2020–2024
- Role
- Senior, then lead product designer
- Links
2 months for the redesign, against a 2-quarter estimate
96 → ~11 colour values
58 components, 240 variants
152 layered icons
Markup contract
header.case-header > .case-header__back, .case-header__title, .case-header__summary,
figure.case-header__media, dl.case-header__facts (holds ul.case-header__outcomes and ul.case-header__links),
ul.case-header__stats > li > p.stat.
Reads title, summary, cover, client, year, role, outcomes, links, stats. The last three are optional.
`stats` = [{ value, label }] shows a row of big numbers, for cases with several results. Use it instead of `outcomes`.
Set `morph` to true on the real case page, so the card's cover moves into this one.