Vedran Jukić

Styleguide

Page header

For plain pages. The picture is optional.

Clean · light

About

Lead product designer. 20+ years, from print to product to design in code.

Vedran Jukić leaning in from the edge of the page, head tilted, smiling, looking down at the text

Clean · dark

About

Lead product designer. 20+ years, from print to product to design in code.

Vedran Jukić leaning in from the edge of the page, head tilted, smiling, looking down at the text

Vector

About

Lead product designer. 20+ years, from print to product to design in code.

Vedran Jukić leaning in from the edge of the page, head tilted, smiling, looking down at the text

Comic

About

Lead product designer. 20+ years, from print to product to design in code.

Vedran Jukić leaning in from the edge of the page, head tilted, smiling, looking down at the text
Markup contract 
header.page-header > optional p.page-header__label + h1.page-header__title + optional p.page-header__summary + optional .page-header__measure + optional figure.page-header__media.
Reads label, title, summary, image, imageAlt, rail from the page's front matter.
.page-header__measure is decoration (aria-hidden), on rail pages with a picture. Its height is the token it labels.
page-inspect.js makes its readout live; without it the readout describes the measure itself.
The sizes are larger than the shown picture on purpose: a bigger image scaled down keeps fine detail like hair.