Kitchen sink

Check the re-usable components

Kleur

Gemeten uit het prototype. De namen zijn gelijk aan tokens.css.

Ink 900 --color-ink-900 #16140F primaire tekst, donkere secties
Ink 800 --color-ink-800 #3B382F body op licht
Ink 700 --color-ink-700 #5C584F secundaire tekst, captions
Ink 500 --color-ink-500 #8B857A
Ink 400 --color-ink-400 #A8A39A
Ink 300 --color-ink-300 #C7C2B8
Black --color-black #0A0A0A alleen in de Groeimotor
White --color-white #FFFFFF
Surface 1 --color-surface-1 #F4F3F1 paginagrond
Surface 2 --color-surface-2 #EFEDE9 grond Grey
Surface 3 --color-surface-3 #E4E1DA
Line --color-line #E1DDD4 randen, scheidingslijnen
Line soft --color-line-soft #ECEAE6 lijnen slanted grid
Orange --color-orange #FF7002 contact opnemen, nooit decoratief
Purple --color-purple #6C1AFF impact-accent, Groeimotor

Achtergronden

Zeven gronden. Notion noemt er zes; wit staat er niet in maar het prototype gebruikt het negentien keer.

Neutral

neutral

Wit

white

Grey

grey

Grey (grained)

grey-grained

Slanted grid

slanted

Wit + slanted grid

white-slanted

Black

black

Black slanted grid

black-slanted

Buttons

Default:

Ghost:

Naked:

Pill:

Closeable:

Icons:

Animation:

Sizes:

Sizes with icons:

Button that is closeable:

Button closeable

Button with a count:

Loading button:

Fancy button:

Symbols

check-in-green-circle

arrow-long-right

quotes

quotes-end

wobbly-arrow

Typography - Headings sizes

Aenean eu leo quam. (xxl)

Aenean eu leo quam. (xl)

Aenean eu leo quam. (l)

Aenean eu leo quam. (m)

Aenean eu leo quam. (s)

Aenean eu leo quam. (xs)

Aenean eu leo quam. (xxs)

Typography - Text sizes

Aenean eu leo quam. (xxl)

Aenean eu leo quam. (xl)

Aenean eu leo quam. (l)

Aenean eu leo quam. (m)

Aenean eu leo quam. (s)

Typography - content

h1 - Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

h2 - Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

h3 -Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

h4 -Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

h5 -Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

h6 -Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

p with link - Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

Shortcodes

Embed as: Or as:

Twig filters

Built in filters

Built in Twig filters can be found in the Timber documentation

Venenatis Fusce Malesuada|sanitize

Custom Twig filters

Are defined in the filters.php file in the theme folder

array|shuffleArray