Your browser isn't quite dressed for Casual Friday.

Things may look a little odd. A current browser will fix that.

Component preview

Jump to component

Browser warning

Your browser isn't quite dressed for Casual Friday.

Things may look a little odd. A current browser will fix that.

Heading roles

These specimens intentionally demonstrate different heading levels. Choose a tag for the document outline and a class for its visual role. The decorative face is a separate, explicit opt-in.

Default tags

h4.heading.heading--title — title appearance

Make it Friday

h2 — heading; no class

Make it Friday

h3 — sub; no class

Make it Friday

h4 — subsub; no class

Make it Friday

h5 — subsubsub; no class

Make it Friday

h6 — bold copy; no class or heading role

Make it Friday

Roles on paragraphs

p.heading.heading--title — title

Make it Friday

p.heading — heading

Make it Friday

p.heading.heading--sub — sub

Make it Friday

p.heading.heading--2sub — subsub

Make it Friday

p.heading.heading--3sub — subsubsub

Make it Friday

p.heading.heading--byline — byline; no default tag

From the back bar

Tag and visual role are independent

h4.heading.heading--sub — h4 outline, sub appearance

Make it Friday

h4.heading.heading--title — h4 outline, title appearance

Make it Friday

h4.heading — h4 outline, heading appearance

Make it Friday

h2.heading--sub — block class optional on headings

Make it Friday

Decorative face, every role

The face and weight change; each role keeps its size, line height and tracking. All specimens below are paragraphs, not headings.

p / heading heading--title heading--deco — title

Make it Friday

p / heading heading--deco — heading

Make it Friday

p / heading heading--sub heading--deco — sub

Make it Friday

p / heading heading--2sub heading--deco — subsub

Make it Friday

p / heading heading--3sub heading--deco — subsubsub

Make it Friday

p / heading heading--byline heading--deco — byline

From the back bar

Prose rhythm

div.flow — direct children only. Labels name each tag and class. The section title and this explanation sit outside the prose stream.

p / no class — Start with a drink you enjoy, a clean glass and enough ice. Good preparation leaves more time to spend with your guests.

p / no class — This second paragraph demonstrates the paragraph-to-paragraph gap. The following heading gets a larger pause before it.

h2 / no class — Before you pour

p / no class — The space after a heading is tighter than the space between paragraphs.

h3 / no class — Prepare the glass

p / no class — Set out your ingredients before you start mixing, then follow the short checklist below.

  • ul > li / no classes — Chill your glass.

  • li > p / no class — Measure the ingredients.

    li > p / no class — These nested paragraphs receive no spacing from the outer flow.

p / no class — A paragraph after a list uses the list-to-paragraph spacing, with no competing top margin.

One last touch

h4.heading.heading--title above has a title's appearance but keeps h4 spacing. This p has no class and no trailing margin.

section-heading — byline before the heading

Ingredients

Learn more about the essential bottles!

Page grid

Twelve equal columns share the page gutter. Header, main, and footer align to these same columns at every viewport width.

1 2 3 4 5 6 7 8 9 10 11 12

Containers

Each width is shown as a default container followed by its extended version. Neutral bars mark the content columns; the extended background uses the zone-a token. Below 480px it reaches the viewport edges; from 480px it extends one gutter beyond the content on each side.

container container--full
container container--full container--extended
container container--wide
container container--wide container--extended
container container--two-thirds
container container--two-thirds container--extended
container container--half
container container--half container--extended
container container--third
container container--third container--extended

Subgrid wrappers

Compare each direct container with the same width inside the article below. The article uses page-grid__section to inherit the page columns and gutter without discarding its semantics.

Direct: container container--wide

Direct: container container--two-thirds

Direct: container container--half

Article on the inherited grid

Subgrid: container container--wide

Subgrid: container container--two-thirds

Subgrid: container container--half

Uncontained paragraph: spans every inherited column by default.

End of content

end-of-content — decorative, theme-aware article ending.

Mission statement

page-grid__section mission-statement — the page heading is h1 on the homepage; this specimen uses h3.

Thank God it's Friday!

Your go-to destination for recipes of cocktails and alcohol-free drinks. Level up your homebar game with us!

Button

Links navigate; action buttons are demonstration controls without an action. Colour treatments are primary, secondary and ghost. Icon position follows source order. Icon-only controls take their name from one sr-only span.

All treatments and structures

  • Icon only — button button--primary button--icon-only

    Browse bottles

  • Icon then text — button button--primary

    Browse bottles

  • Text then icon — button button--primary

    Browse bottles

  • Text only — button button--primary

    Browse bottles

  • Icon only — button button--secondary button--icon-only

    Browse bottles

  • Icon then text — button button--secondary

    Browse bottles

  • Text then icon — button button--secondary

    Browse bottles

  • Text only — button button--secondary

    Browse bottles

  • Icon only — button button--ghost button--icon-only

    Browse bottles

  • Icon then text — button button--ghost

    Browse bottles

  • Text then icon — button button--ghost

    Browse bottles

  • Text only — button button--ghost

    Browse bottles

Large size

  • Icon only — button button--ghost button--large button--icon-only

    Browse bottles

  • Icon then text — button button--ghost button--large

    Browse bottles

  • Text then icon — button button--ghost button--large

    Browse bottles

  • Text only — button button--ghost button--large

    Browse bottles

Unavailable controls

The inactive modifier changes appearance only. Action buttons also require disabled. Unavailable links are non-interactive span elements with no href or tabindex.

  • Native disabled — button button--primary

    Modifier plus native disabled — button button--primary button--inactive

    Span stand-in — button button--primary button--inactive

    Unavailable

  • Native disabled — button button--secondary

    Modifier plus native disabled — button button--secondary button--inactive

    Span stand-in — button button--secondary button--inactive

    Unavailable

  • Native disabled — button button--ghost

    Modifier plus native disabled — button button--ghost button--inactive

    Span stand-in — button button--ghost button--inactive

    Unavailable

Secondary and ghost on a coloured surface

button button--secondary

Browse bottles

button button--ghost

Browse bottles

Long label

button button--secondary

Explore every bottle on the virtual back bar and find something new for your next Casual Friday

Placement colour override

button button--ghost button-demo

The placement class supplies all six colour properties without changing another button.

Browse bottles

Text link

text-link — default trailing arrow

All Genever drinks recipes

text-link text-link--icon-start — leading arrow

All Gin drinks recipes

text-link — long wrapping label

Explore all our favourite Genever drinks recipes for relaxed evenings and long weekends

text-link text-link--youtube — YouTube icon

Watch it on YouTube

text-link text-link--website text-link--icon-start — leading website icon

Visit the producer’s website

Page title block

page-title-block in container--two-thirds

Welcome to the virtual back bar

Learn more about the bottles on our shelf and feel free to take a shelfie!

Filter pills

filter-pills — current reset, unselected types; static links do not filter.

filter-pills__reset — unselected; filter-pills__type[aria-current="page"] — selected; filter-pills__pill--hover — Rum hover equivalent.

filter-pills__reset filter-pills__pill--hover — reset hover equivalent; selected type and long-label wrapping.

Pager

Static listing controls: links expose example query parameters but do not paginate or change item counts; the native select changes its selected option only. Each example has unique label and select IDs. The full example provides the upper navigation landmark; the repeated lower example uses a div, as do the other specimens on this preview page.

Full pager / upper placement

pager — groups: pager__group; navigation controls: button button--primary button--icon-only.

12 24 per page

Magazine — pagination only

pager with one pager__group. The per-page group is optional and omitted for Ghost; no sort group is needed. This specimen uses a div so the full example above remains the sole pager navigation landmark.

First page Previous page

you are on page 6 of 11

Next page Last page

Without sort

pager — groups: pager__group; sort group omitted; navigation controls: button button--primary button--icon-only.

First page Previous page

you are on page 6 of 11

Next page Last page
12 24 per page

First page

pager — groups: pager__group; navigation controls: button button--primary button--icon-only button--inactive.

First page Previous page

you are on page 1 of 11

Next page Last page
12 24 per page

Last page

pager — groups: pager__group; navigation controls: button button--primary button--icon-only button--inactive.

First page Previous page

you are on page 11 of 11

Next page Last page
12 24 per page

Large page count

pager — groups: pager__group; navigation controls: button button--primary button--icon-only.

First page Previous page

you are on page 128 of 340

Next page Last page
12 24 per page

Narrow container

pager — groups: pager__group; navigation controls: button button--primary button--icon-only; placement: pager__specimen-narrow.

First page Previous page

you are on page 6 of 11

Next page Last page
12 24 per page

Single-page listing

pager — groups: pager__group; navigation controls: button button--primary button--icon-only button--inactive.

First page Previous page

you are on page 1 of 1

Next page Last page
12 24 per page

Repeated lower placement

pager — groups: pager__group; navigation controls: button button--primary button--icon-only.

First page Previous page

you are on page 6 of 11

Next page Last page
12 24 per page

Bottle grid

bottle-grid in container--full — 24 slots: sponsor plus 23 bottles. bottle-grid__item[data-bottle="saigon-baigur"] sets --bottle-sink: 4%; other bottles use 2%.

bottle-grid in container--wide — 13 bottles, no sponsor; incomplete final row.

  • Bulldog gin bottle
  • Eck Koblenz dry gin bottle
  • Muscatel gin bottle
  • Old Pilot’s gin bottle
  • Oslo gin bottle
  • Saigon Baigur gin bottle
  • Bulldog gin bottle
  • Eck Koblenz dry gin bottle
  • Muscatel gin bottle
  • Old Pilot’s gin bottle
  • Oslo gin bottle
  • Saigon Baigur gin bottle
  • Bulldog gin bottle

bottle-grid in container--two-thirds — sponsor plus six bottles; narrower placement.

Bottle hero

bottle-hero — Default gradient; complete data and links

Citadelle Gin

Mehr Zitrus als in einem Sack Zitronen

  • Bulldog gin bottle (demo image)
Country
Spain
Alcohol
43.7%
Bottle size
700 ml
Producer
MG Destilerias
In short
A citrus bomb like no other
Botanicals
Kumquat, Grapefruit, Orange, Limette, Zitrone, Zitronengras, Wacholder, Mandarinen, Koriander
Official links:
Buy Citadelle Gin

These are paid links.See advertising disclosure

bottle-hero — Background image; fixed dark text

Citadelle Gin

Mehr Zitrus als in einem Sack Zitronen

  • Bulldog gin bottle (demo image)
Country
Spain
Alcohol
43.7%
Bottle size
700 ml
Producer
MG Destilerias
In short
A citrus bomb like no other
Botanicals
Kumquat, Grapefruit, Orange, Limette, Zitrone, Zitronengras, Wacholder, Mandarinen, Koriander
Official links:
Buy Citadelle Gin

These are paid links.See advertising disclosure

bottle-hero — Inverted text on a light gradient

Citadelle Gin

Mehr Zitrus als in einem Sack Zitronen

  • Bulldog gin bottle (demo image)
Country
Spain
Alcohol
43.7%
Bottle size
700 ml
Producer
MG Destilerias
In short
A citrus bomb like no other
Botanicals
Kumquat, Grapefruit, Orange, Limette, Zitrone, Zitronengras, Wacholder, Mandarinen, Koriander
Official links:
Buy Citadelle Gin

These are paid links.See advertising disclosure

bottle-hero — Glass product; optional category tag, three facts then one linked fact

Glasses

Nick & Nora

Very elegant and just the right size

  • Nick & Nora glass
Volume
120–160 ml
Brand
Nude Glass
Model
26002
Use to serve
Last Word, Hanky Panky, Martinez
Official links:
Buy Nick & Nora glass

These are paid links.See advertising disclosure

Article grid

container container--wide article-grid; each list item is li.article-grid__item, containing a card with its card--title-l, card--title-m or card--title-s modifier. The twelve-item cycle preserves DOM and tab order, with nine tagged cards. Cards aim for square proportions and can grow for longer content; the 7/5-column layout stays near-square. Partial cycles keep their prescribed spans and natural empty slots.

container container--wide article-grid — 12 cards; one complete cycle.

Recipes

container container--wide article-grid — 24 cards; item 13 restarts the cycle.

Recipes

container container--wide article-grid — 2 cards; incomplete cycle, no placeholder cards.

Recipes

container container--wide article-grid — 6 cards; incomplete cycle, no placeholder cards.

Recipes

container container--wide article-grid — 7 cards; incomplete cycle, no placeholder cards.

Recipes

container container--wide article-grid — 11 cards; incomplete cycle, no placeholder cards.

Recipes

Article grid — magazine

container container--wide article-grid article-grid--magazine — 26 articles: two complete cycles and an incomplete third. Each item is li.article-grid__item with the same card markup and no title-size modifier. The grid sets --card-title-size and --card-excerpt-display. Items 13 and 25 restart the cycle; omitted articles do not produce placeholders.

Featured recipes

Cards

Each card is one link, named by its heading. Tab through the cards to inspect the global rounded focus ring, hover with a pointer, or press on touch. Hover-equivalent specimens expose the same end state without requiring a pointer.

Ratios are preferred, not a text-clipping constraint. Long titles and enlarged text may grow the card; split cards keep equal side-by-side columns. The placing grid owns spacing and may override --card-aspect-ratio. Images and tags retain light text in both OS themes; CTA surfaces follow the theme.

card — Narrow; default state container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card card--hover — Narrow; hover-equivalent state container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card — Medium; default state container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card card--hover — Medium; hover-equivalent state container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card — Wide; default state container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card card--hover — Wide; hover-equivalent state container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card card--title-s — Title size s; independent layout and title modifiers container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A Friday worth staying in for

Make room for a new favorite.
card card--title-m — Title size m; independent layout and title modifiers container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A Friday worth staying in for

Make room for a new favorite.
card card--title-l — Title size l; independent layout and title modifiers container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A Friday worth staying in for

Make room for a new favorite.
card card--split — Narrow; default state container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split card--hover — Narrow; hover-equivalent state container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split — Medium; default state container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split card--hover — Medium; hover-equivalent state container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split — Wide; default state container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split card--hover — Wide; hover-equivalent state container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split card--title-s — Title size s; independent layout and title modifiers container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A Friday worth staying in for

Make room for a new favorite.
card card--split card--title-m — Title size m; independent layout and title modifiers container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A Friday worth staying in for

Make room for a new favorite.
card card--split card--title-l — Title size l; independent layout and title modifiers container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A Friday worth staying in for

Make room for a new favorite.
card card--cta — Narrow; default state container

All cocktail and alcohol-free recipes

Find something for your next Friday.
card card--cta card--hover — Narrow; hover-equivalent state container

All cocktail and alcohol-free recipes

Find something for your next Friday.
card card--cta — Medium; default state container

All cocktail and alcohol-free recipes

Find something for your next Friday.
card card--cta card--hover — Medium; hover-equivalent state container

All cocktail and alcohol-free recipes

Find something for your next Friday.
card card--cta — Wide; default state container

All cocktail and alcohol-free recipes

Find something for your next Friday.
card card--cta card--hover — Wide; hover-equivalent state container

All cocktail and alcohol-free recipes

Find something for your next Friday.
card card--cta card--title-s — Title size s; independent layout and title modifiers container

A Friday worth staying in for

Make room for a new favorite.
card card--cta card--title-m — Title size m; independent layout and title modifiers container

A Friday worth staying in for

Make room for a new favorite.
card card--cta card--title-l — Title size l; independent layout and title modifiers container

A Friday worth staying in for

Make room for a new favorite.
card — No tag; no reserved tag space container
Espresso Martini in a stemmed glass with three coffee beans on the foam.

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card — No supporting text; title at the bottom container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

Espresso Martini

card card--title-l — Very long, untruncated title container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

The Friday-night ritual of making time for one beautifully balanced drink, good company, and a story worth sharing

card — Long supporting text; three-line ellipsis container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
Classic cocktail

An Espresso Martini for a long Friday

Start with freshly brewed espresso, add vodka and coffee liqueur, then shake with ice until the drink is cold and the foam is thick. Pour into a chilled glass, take a moment to enjoy the aroma, and settle in for a relaxed Friday evening. This deliberately long preview continues beyond three lines so that the ellipsis can be inspected at every container width.

card — Magazine headline and standfirst; same content-agnostic component container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
The story behind the drink

Why the simplest home-bar rituals can make an ordinary Friday feel special

From a chilled glass to a carefully chosen garnish, small details change the way we experience a drink. Meet the home bartenders finding pleasure in doing a few things well, and discover the habits they return to week after week.

card card--split card--image-start card--title-s — Split image at the start container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Negroni

Bitter, bright, and built over ice.
card card--split card--title-l — Split card grows for long content; columns remain equal container
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

A slow Friday evening with old friends and a new favorite cocktail

A little time for something good.
card — Long informational tag container
Espresso Martini in a stemmed glass with three coffee beans on the foam.
A very long editorial label that should fill the available space before it truncates with an ellipsis

Espresso Martini

Coffee, vodka, and a rich layer of crema.

card — Fixed-height grid cell container; --card-aspect-ratio: auto
Red Negroni over ice with orange peel and rosemary on a wooden bar.
Classic cocktail

Fill the grid cell

This card inherits an automatic aspect ratio from its fixed-height placing cell.

Category card

card card--category — small, magazine-style tile; heading face with the default --step-0 title.

Gin
card card--category — larger, ingredients-style tile; the placing wrapper sets --card-title-size: var(--step-1), as category-grid does.

Gin

Category grid

Each category-grid__item contains a card card--category with one native link, a decorative image and its category name. Column counts follow the viewport; incomplete rows stay aligned to the start.

Narrow placement: container container--two-thirds with category-grid — fifteen ingredient cards, --card-title-size: var(--step-1).
Medium placement: container container--wide with category-grid — fifteen ingredient cards, --card-title-size: var(--step-1).
Wide placement: container container--full with category-grid — fifteen ingredient cards, --card-title-size: var(--step-1).

Tags

Tags are links here. Inside cards, the same tag uses a non-interactive span. The full label remains in the document when its visual presentation is truncated.

tag — normal linked tag
Tutorial
tag — deliberately narrow container; ellipsis
A long editorial label that exceeds its deliberately narrow container
tag tag--mini — normal linked tag
Tutorial
tag tag--mini — deliberately narrow container; ellipsis
A long editorial label that exceeds its deliberately narrow container
tag tag--link — ingredient link; hover and keyboard focus
Gin
tag tag--mini tag--link — linked treatment with the existing small size
Raspberry

Recipe hero

recipe-hero — Pink CMS injection; sponsor. Preview uses an h3 with the title/deco visual roles.
A pink Clover Club cocktail with a thick foam top, raspberries and a citrus twist in a stemmed glass.
Main ingredients

Clover Club

Gin, raspberry and a silky foam — a pre-Prohibition classic.

Presented by

See advertising disclosure
recipe-hero — Purple CMS injection; no sponsor. Preview uses an h3 with the title/deco visual roles.
A pink Clover Club cocktail with a thick foam top, raspberries and a citrus twist in a stemmed glass.
Main ingredients

Clover Club

Gin, raspberry and a silky foam — a pre-Prohibition classic.

recipe-hero — Default colours with no injection; sponsor. Preview uses an h3 with the title/deco visual roles.
A pink Clover Club cocktail with a thick foam top, raspberries and a citrus twist in a stemmed glass.
Main ingredients

Clover Club

Gin, raspberry and a silky foam — a pre-Prohibition classic.

Presented by

See advertising disclosure

Magazine hero

These specimens use h3 with the page-title visual role. On an article page the title is h1. The linked category leads to its index, not the current article.

Known follow-up: the existing tag--link has insufficient contrast in dark mode, at rest and on hover. It is unchanged in this component.

magazine-hero — wide container, Tutorials, no caption

Making clear ice at home using tap water

Clear ice cubes with frosted edges on a plum-coloured surface.

magazine-hero — wide container, Bars, optional caption

Quintessenz restaurant at Fraser Suites

A curved white bar beneath illuminated bottle shelves in a wood-panelled room.
A figcaption worth having as it is a picture taken from a source. (cc) by sa "bar at night" by @pixeldan1999.

magazine-hero — narrow container, long title

Making clear ice at home using tap water, everyday equipment and enough freezer space for your next cocktail night

Clear ice cubes with frosted edges on a plum-coloured surface.

Recipe author

recipe-author — centred author credit; # profile placeholders.

A recipe by Sam Deluxe @samshakingdeluxe

recipe-author — narrow placement; same source order.

A recipe by Sam Deluxe @samshakingdeluxe

Media-text

media-text in container--wide — image first at every width. The image-end variant is deferred.
A pink Clover Club cocktail with a layer of foam and a citrus garnish.

The finishing touch

Prepare the lemon zest before you shake. Once the drink is strained into the chilled glass, express the zest over the cocktail to finish.

Recipe sheet

recipe-sheet — shared heading, shelf and list rows; supplied demo product imagery. Block headings use h3 here to preserve the preview outline, with the default heading visual role.

Bar tools & Glassware

  • 1
    Nick & Nora glass
  • 1
    Shaker
  • 1
    Fine strainer

Ingredients

  • 50 ml
    Gin
  • 20 ml
    Lemon juice
  • 15 ml
    Raspberry syrup
  • 15 ml
    Egg white / foamer / aquafaba

    Aquafaba or a commercial foamer make the drink vegan.

  • 1
    Lemon zest as garnish
  • plenty
    Ice for shaking

Before you start

  • Chill the glass with ice
  • Prepare the zest before you shake

Steps to make the drink

  1. Fill a shaker with

    • 50 ml
      Gin
    • 20 ml
      Lemon juice
    • 15 ml
      Raspberry syrup
    • 15 ml
      Egg white
  2. Dry shake without ice to build the foam
  3. Shake again with ice until very cold
  4. Empty the chilled glass
  5. Strain through a fine strainer into the glass
  6. Express the lemon zest over the drink

Recipe list

recipe-list recipe-list--quantities
  • 50 ml
    Gin
  • 20 ml
    Lemon juice
  • 15 ml
    Raspberry syrup
  • 15 ml
    Egg white / foamer / aquafaba

    Aquafaba or a commercial foamer make the drink vegan.

  • 1
    Lemon zest as garnish
  • plenty
    Ice for shaking
recipe-list recipe-list--checklist
  • Chill the glass with ice
  • Prepare the zest before you shake
recipe-list recipe-list--steps

  1. Fill a shaker with

    • 50 ml
      Gin
    • 20 ml
      Lemon juice
    • 15 ml
      Raspberry syrup
    • 15 ml
      Egg white
  2. Dry shake without ice to build the foam
  3. Shake again with ice until very cold
  4. Empty the chilled glass
  5. Strain through a fine strainer into the glass
  6. Express the lemon zest over the drink

Ingredient showcase

ingredient-showcase with shelf ingredient-showcase__shelf — 15 linked bottles; custom height and gap

Ingredients

Learn more about the essential bottles!

Teaser

teaser — default title; demo cocktail photo
Red Tequila Sunrise in a stemmed glass with an orange-peel twist. Tutorial

How to balance a drink

teaser — long title; no truncation
Moscow Mule in a ribbed highball glass with a citrus slice and mint. Tutorial

How to balance a drink with the bottles you already have at home, from your first experiment to a relaxed Friday evening with friends

Teaser row

teaser-row — narrow container--third
teaser-row — medium container--two-thirds
teaser-row — wide container--full
teaser-row — seven stories, visual-only indicator; wide container--full
teaser-row — one story; no dots when everything fits

Topic tiles

topic-tiles with card card--topic — centred, wrapping list

Category shelf

category-shelf + shelf shelf--centered category-shelf__shelf — narrow preview placement forces overflow; product height remains --space-3xl.

Bar tools

Measure, stir and strain with confidence. Explore practical tools that make preparing a good drink more consistent, from the first pour to the final strain.

See all bar tools

category-shelf + shelf shelf--single category-shelf__shelf — one linked product, no scrolling.

Glasses

The right glass brings a drink together. Find glassware that suits your favourite recipes, feels good in the hand and earns its place on your shelf.

See all glasses

category-shelf — missing-imagery example; the shelf is intentionally omitted.

Gear

Take a closer look at the equipment behind a well-equipped home bar, from a soda siphon for fresh fizz to a sous vide container for your next infusion project.

See all gear

Shelf

shelf — 15 products; scrolling
shelf — two products; no scrolling
shelf shelf--single — single product; no scrolling or fade
shelf shelf--large — larger bottles; default scrolling
shelf shelf--single shelf--large — one larger bottle; no scrolling or fade
shelf shelf--centered — centred when products fit; native scrolling when they overflow. Also used by the recipe sheet above.
  • Gin
  • Liqueur

Ingredient hero

ingredient-hero — background image; sponsor; 15-character title, 35-character subline

Classic Genever

Discover the original Dutch spirit.

Presented by Rutte

ingredient-hero — gradient; no sponsor; 15-character subline

Genever

Dutch gin roots

Ingredient recommendation

Generic supplied bottle artwork stands in for product packshots in these demos. Each block contains exactly three recommendations.

ingredient-recommendation in container container--wide — one sponsored recommendation

Genever recommendations

ingredient-recommendation in container container--wide — all sponsored

Genever recommendations

ingredient-recommendation in container container--wide — none sponsored

Genever recommendations

ingredient-recommendation in container container--wide — long bottle names

Genever recommendations

ingredient-recommendation in container container--half — medium container

Genever recommendations

ingredient-recommendation in container container--third — narrow container — wrapping

Genever recommendations

Aromacode® component

aromacode in container container--wide — nine-category demo; this example alone emits JSON-LD.

Aromacode®

Aroma profile of Citadelle Gin
  1. 1 Pine, 34 of 100
  2. 2 Citrus, 100 of 100
  3. 3 Fruits, 45 of 100
  4. 4 Blossoms, 32 of 100
  5. 5 Gras, 40 of 100
  6. 6 Herbs, 23 of 100
  7. 7 Wood, 11 of 100
  8. 8 Spices, 1 of 100
  9. 9 Sharpness, 22 of 100

The Aromacode® shows how strongly each aroma comes through. The larger the wedge, the stronger the aroma. Numbers match the list.

aromacode in container container--wide — six invented categories, using existing palette colours.

Aromacode®

Invented six-category aroma profile
  1. 1 Cocoa, 65 of 100
  2. 2 Coffee, 28 of 100
  3. 3 Caramel, 90 of 100
  4. 4 Vanilla, 52 of 100
  5. 5 Smoke, 12 of 100
  6. 6 Peel, 40 of 100

The Aromacode® shows how strongly each aroma comes through. The larger the wedge, the stronger the aroma. Numbers match the list.

aromacode in container container--wide — one value at 100, the rest at 0–2.

Aromacode®

Aroma profile with one dominant category
  1. 1 Pine, 0 of 100
  2. 2 Citrus, 100 of 100
  3. 3 Fruits, 2 of 100
  4. 4 Blossoms, 0 of 100
  5. 5 Gras, 1 of 100
  6. 6 Herbs, 2 of 100
  7. 7 Wood, 0 of 100
  8. 8 Spices, 1 of 100
  9. 9 Sharpness, 2 of 100

The Aromacode® shows how strongly each aroma comes through. The larger the wedge, the stronger the aroma. Numbers match the list.

aromacode in container container--wide — all values at 50: every wedge reaches the second ring.

Aromacode®

Aroma profile with all values at 50
  1. 1 Pine, 50 of 100
  2. 2 Citrus, 50 of 100
  3. 3 Fruits, 50 of 100
  4. 4 Blossoms, 50 of 100
  5. 5 Gras, 50 of 100
  6. 6 Herbs, 50 of 100
  7. 7 Wood, 50 of 100
  8. 8 Spices, 50 of 100
  9. 9 Sharpness, 50 of 100

The Aromacode® shows how strongly each aroma comes through. The larger the wedge, the stronger the aroma. Numbers match the list.

aromacode in container container--two-thirds — narrower container, with the same page-column wheel sizing.

Aromacode®

Aroma profile of Citadelle Gin
  1. 1 Pine, 34 of 100
  2. 2 Citrus, 100 of 100
  3. 3 Fruits, 45 of 100
  4. 4 Blossoms, 32 of 100
  5. 5 Gras, 40 of 100
  6. 6 Herbs, 23 of 100
  7. 7 Wood, 11 of 100
  8. 8 Spices, 1 of 100
  9. 9 Sharpness, 22 of 100

The Aromacode® shows how strongly each aroma comes through. The larger the wedge, the stronger the aroma. Numbers match the list.

Mixer pairing

mixer-pairing in container container--wide — five mixers, including a sponsored example; this example alone carries review JSON-LD.

Mixers tested with this Gin

Rating masks: 0–3

  • mixer-pairing__rating
    mixer-pairing__stars mixer-pairing__stars--0

    Fit: 0 out of 3

  • mixer-pairing__rating
    mixer-pairing__stars mixer-pairing__stars--1

    Fit: 1 out of 3

  • mixer-pairing__rating
    mixer-pairing__stars mixer-pairing__stars--2

    Fit: 2 out of 3

  • mixer-pairing__rating
    mixer-pairing__stars mixer-pairing__stars--3

    Fit: 3 out of 3

mixer-pairing in container container--third — narrow container, single mixer.

Mixers tested with this Gin

    Le Tribute Tonic Water

    Perfect Serve

    Fit: 3 out of 3

    The brand's own tonic, and it works wonderfully: a genuine match that plays perfectly with the gin.

mixer-pairing in container container--half — medium container, five mixers.

Mixers tested with this Gin

mixer-pairing in container container--wide — ten mixers; demo entries repeated to exercise wrapping, without additional structured data.

Mixers tested with this Gin

Recipe recommendation

recipe-recommendation in container container--full — wide container

recipe-recommendation in container container--half — medium container — two wrapped rows

recipe-recommendation in container container--third — narrow container — one column

recipe-recommendation in container container--full — long subject in the heading and onward link

recipe-recommendation — two cards in container--two-thirds.

Video card

video-card in container container--wide — wide container

Watch the Genever video

Watch the Genever video on YouTube

Watch it on YouTube

video-card in container container--half — medium container

Watch the profile video

Watch the Citadelle Gin profile video on YouTube

Watch it on YouTube

video-card in container container--third — narrow container

Watch the Gimlet video

Watch the Gimlet video on YouTube

Watch it on YouTube

video-card in container container--wide — long heading

Watch how to make a Gimlet with gin, fresh lime and simple ingredients for a relaxed Friday evening

Watch how to make a Gimlet with gin and fresh lime on YouTube

Watch it on YouTube

Pre-footer

pre-footer — responsive one-third / two-thirds split

Find a bottle

All the bottles we came across on one giant shelf…

pre-footer — stacked preview

Find a bottle

All the bottles we came across on one giant shelf…

Bottle promo

bottle-promo — 12rem container, capped by available space

Find a bottle

All the bottles we came across on one giant shelf…

bottle-promo — 20rem container, capped by available space

Find a bottle

All the bottles we came across on one giant shelf…

bottle-promo — 30rem container, capped by available space

Find a bottle

All the bottles we came across on one giant shelf…

Newsletter signup

Site footer

See the live footer on the homepage for the full-width component, including its sponsor, navigation, social links, and disclaimer.