Full width, two column layout

Screen sizeContent width
XS200-452px
S460-690px
M315-430px / 691-920px
L450px
XL570px

Some quite long and wordy subtitle, so that it spans multiple lines

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. In rutrum.

Screen sizes

Screen sizeBreakpointContent width
XSmargin 30px → ~300-452px
S≥512px90% → 460-690px
M≥768px90% → 691-920px
L≥1024px960px
XL≥1366px1200px

Full width one column layout

Some quite long and wordy subtitle, so that it spans multiple lines

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. In rutrum.

Wide

Screen sizeContent width
L545px
XL655px (715px)

Some quite long and wordy subtitle, so that it spans multiple lines

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. In rutrum.

Wide

Screen sizeContent width
L345px
XL415px

Some quite long and wordy subtitle, so that it spans multiple lines

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. In rutrum.

Tatami hero box

CSS třídy: .full, .double, .tatami

Zatím není nikde použitý

Obrázek má maximální šířku 570px a zmenšuje se s šířkou obrazovky. Pokud je obrázek rastr, měl by být připraven ve dvou rozměrech:

  • 570px široký
  • 2× 570px = 1140px široký pro HiDPI displeje
Dojo

Full hero box

CSS třídy: .full, .double

Použité např. na stránkách:

Obrázek má maximální šířku 570px a zmenšuje se s šiřkou obrazovky. Pokud je obrázek rastr, měl by být připraven ve dvou rozměrech:

  • 570px široký
  • 2× 570px = 1140px široký pro HiDPI displeje
Dojo

Half hero box s nadpisem a doplňujícím textem

CSS třídy: .left, .half, .hero

Fotka naproti je min 450px vysoká, badge vždy 300px široká.

Tento blok je vysázen v MDX (Markdown s JSX). V každém .hero boxu jsou šipky automaticky tučné.

Scrum Master Dojo

Nadpis h1 2rem

Nadpis h2 1.5rem

Nadpis h3 1.2rem

Nadpis h4 1rem

Odstavec. 1rem = 16px

Odstavec s .check

Odstavec s .cross

Odstavec s .arrow-left

Odstavec s .arrow-right

Barvy

#fd5b52 červená
#fc908d červená střední
#ffeeec červená světlá
#fda93b oranžová
#fdd18c oranžová střední
#fcefe0 oranžová světlá
#0bbccb tyrkysová
#7dd3d3 tyrkysová střední
#eefcff tyrkysová světlá
#028097 modrá
#2dacb5 modrá střední
#eaf0f4 modrá světlá
#0ab599 zelená
#80d485 zelená střední
#e7f2e7 zelená světlá
#000 černá
#222 černá střední
#333 černá světlá
#d0d0d0 šedá
#eaeaea šedá střední
#f4f4f4 šedá světlá

Konverzní

#ffcc00 Konverzní
#f5dd7b :hover

Scrum.org

#89805f Scrum
#405a70 Scrum Master
#80a33e Product Owner
#cf4827 Applying Scrum
#087152 Agile Leadership
#1699b5 Nexus
#660d3b Kanban
#f7921d Skill Based

LeSS

#293682 LeSS