Supabase Design System

supabase.com

PROEngine v4

Visual system

100% confidence

81% confidence

hero-displayDesign is intelligence made visibleManrope46px / 500 / 1

display-monoDesign is intelligence made visibleSource Code Pro46px / 450 / 1

heading-xlDesign is intelligence made visibleManrope34px / 500 / 1.2

stat-displayDesign is intelligence made visibleInter34px / 450 / 1.1

heading-lgDesign is intelligence made visibleManrope28px / 600 / 1.2

title-smDesign is intelligence made visibleManrope15px / 600 / 1.5

title-xsDesign is intelligence made visibleManrope14px / 600 / 1.45

bodyDesign is intelligence made visibleInter16px / 450 / 1.5

body-smDesign is intelligence made visibleInter14px / 450 / 1.45

nav-linkDesign is intelligence made visibleInter14px / 500 / 1.45

buttonDesign is intelligence made visibleInter14px / 500 / 1.15

caption-lgDesign is intelligence made visibleInter13px / 450 / 1.5

codeDesign is intelligence made visibleSource Code Pro13px / 500 / 1.7

captionDesign is intelligence made visibleInter12px / 450 / 1.35

labelDesign is intelligence made visibleInter12px / 500 / 1.35

100% confidence

button-primary-padding-y
4px

button-secondary-3-padding-y
4px

button-secondary-4-padding-y
4px

button-primary-5-padding-y
4px

button-secondary-6-padding-y
4px

button-secondary-7-padding-y
4px

button-primary-2-padding-y
8px

button-secondary-padding-y
8px

button-ghost-padding-y
8px

button-primary-3-padding-y
8px

button-primary-4-padding-y
8px

button-secondary-2-padding-y
8px

button-primary-6-padding-y
8px

button-secondary-5-padding-y
8px

button-ghost-2-padding-y
8px

input-3-padding-y
8px

input-4-padding-y
8px

textarea-padding-y
8px

button-primary-padding-x
10px

button-ghost-padding-x
10px

button-secondary-3-padding-x
10px

button-secondary-4-padding-x
10px

button-primary-5-padding-x
10px

button-secondary-6-padding-x
10px

button-ghost-2-padding-x
10px

button-secondary-7-padding-x
10px

button-primary-6-padding-x
12px

button-secondary-5-padding-x
12px

input-3-padding-x
12px

input-4-padding-x
12px

textarea-padding-x
12px

button-primary-2-padding-x
16px

button-secondary-padding-x
16px

button-primary-3-padding-x
16px

button-primary-4-padding-x
16px

button-secondary-2-padding-x
16px

section-padding-y
128px

header-landing-mobile-inner-max-width
1280px

header-inner-mobile-inner-max-width
1280px

100% confidence

xs · 2.66667px

sm · 4px

md · 5.33333px

lg · 6px

xl · 8px

2xl · 8.86154px

3xl · 9px

4xl · 9.29231px

5xl · 9.72308px

6xl · 10.6667px

7xl · 15px

8xl · 16px

9xl · 21.3333px

full · 9999px

Components

Button15

100% match

ghost · desktop

At rest100% match38 measurements match

Original Button, ghost on the site, at rest — Original

Isolated render of Button, ghost, at rest — Render

Hover100% match22 measurements match

Original Button, ghost on the site, hover — Original

Isolated render of Button, ghost, hover — Render

Focus100% match22 measurements match

Original Button, ghost on the site, focus — Original

Isolated render of Button, ghost, focus — Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match38 measurements match

Original Button, ghost (2) on the site, at rest — Original

Isolated render of Button, ghost (2), at rest — Render

Hover100% match22 measurements match

Original Button, ghost (2) on the site, hover — Original

Isolated render of Button, ghost (2), hover — Render

Focus100% match22 measurements match

Original Button, ghost (2) on the site, focus — Original

Isolated render of Button, ghost (2), focus — Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match24 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match24 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match24 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match23 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match23 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match78 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

Card5

Not checked

desktop

The recipe could not be rendered on its own.

Nothing was compared for this component.

Recipe in DESIGN.md

95% match

desktop

It renders 95% like the site, below the 96% bar.

At rest100% match109 measurements match

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

Hover100% match22 measurements match

Original Card (2) on the site, hover — Original

Isolated render of Card (2), hover — Render

Focus100% match2 of 22 measurements differ

Original Card (2) on the site, focus — Original

Isolated render of Card (2), focus — Render

At rest, instance 295% match109 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match109 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Root height is 218px, the site has 178px; Body height is 80px, the site has 40px.

At rest100% match2 of 82 measurements differ

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

At rest, instance 2100% match2 of 82 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match2 of 82 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 4100% match2 of 82 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

93% match

desktop

It renders 95% like the site, below the 96% bar.

At rest95% match564 measurements match

Original Card (4) on the site, at rest — Original

Isolated render of Card (4), at rest — Render

Hover95% match21 measurements match

Original Card (4) on the site, hover — Original

Isolated render of Card (4), hover — Render

Focus95% match8 of 21 measurements differ

Original Card (4) on the site, focus — Original

Isolated render of Card (4), focus — Render

At rest, instance 293% match564 measurements match

Original

No image stored

Render

No image stored

At rest, instance 395% match564 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match564 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

97% match

desktop

Icon x is 0px, the site has 628px; Icon y is 0px, the site has 52px and 11 more.

At rest97% match13 of 213 measurements differ

Original Card (5) on the site, at rest — Original

Isolated render of Card (5), at rest — Render

Hover97% match18 measurements match

Original Card (5) on the site, hover — Original

Isolated render of Card (5), hover — Render

Focus97% match3 of 18 measurements differ

Original Card (5) on the site, focus — Original

Isolated render of Card (5), focus — Render

At rest, instance 299% match13 of 213 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 398% match13 of 213 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra18

100% match

desktop

At rest100% match60 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match79 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match79 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match35 measurements match

Original Framework tab on the site, at rest — Original

Isolated render of Framework tab, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match35 measurements match

Recipe in DESIGN.md

100% match

desktop

Group 2 y is 884px, the site has 64px; Group 2 width is 1440px, the site has 1280px and 1 more.

At rest100% match3 of 344 measurements differ

Original Nav on the site, at rest — Original

Isolated render of Nav, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Group 2 y is 884px, the site has 64px; Group 2 width is 1440px, the site has 1280px and 1 more.

At rest100% match3 of 344 measurements differ

Original Nav menu on the site, at rest — Original

Isolated render of Nav menu, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match78 measurements match

Original Stat link on the site, at rest — Original

Isolated render of Stat link, at rest — Render

Hover100% match22 measurements match

Original Stat link on the site, hover — Original

Isolated render of Stat link, hover — Render

Focus100% match22 measurements match

Original Stat link on the site, focus — Original

Isolated render of Stat link, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match25 measurements match

Original Tab on the site, at rest — Original

Isolated render of Tab, at rest — Render

Hover100% match22 measurements match

Original Tab on the site, hover — Original

Recipe in DESIGN.md

100% match

desktop

At rest100% match22 measurements match

Original Tabs (2) on the site, at rest — Original

Isolated render of Tabs (2), at rest — Render

Focus100% match18 measurements match

Original Tabs (2) on the site, focus — Original

Isolated render of Tabs (2), focus — Render

Recipe in DESIGN.md

98% match

desktop

At rest100% match22 measurements match

Original Tabs (3) on the site, at rest — Original

Isolated render of Tabs (3), at rest — Render

Hover100% match18 measurements match

Original Tabs (3) on the site, hover — Original

Isolated render of Tabs (3), hover — Render

Focus98% match18 measurements match

Original Tabs (3) on the site, focus — Original

Isolated render of Tabs (3), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match229 measurements match

Original Tabs (4) on the site, at rest — Original

Isolated render of Tabs (4), at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match25 measurements match

Recipe in DESIGN.md

97% match

desktop

Row height is 64px, the site has 26px; Cell height is 64px, the site has 26px and 54 more.

At rest97% match56 of 245 measurements differ

Original Table on the site, at rest — Original

Isolated render of Table, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Root height is 217px, the site has 177px; Head height is 64px, the site has 44px and 38 more.

At rest100% match40 of 226 measurements differ

Original Table (2) on the site, at rest — Original

Isolated render of Table (2), at rest — Render

Recipe in DESIGN.md

98% match

desktop

Root height is 244px, the site has 4935px; Body height is 171px, the site has 4862px and 30 more.

At rest98% match32 of 774 measurements differ

Original Table (3) on the site, at rest — Original

Isolated render of Table (3), at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match82 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Recipe in DESIGN.md

Header4

100% match

desktop

Group 5 y is 63px, the site has -1px.

At rest100% match1 of 710 measurements differ

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Hovernot checked

Original Header (inner) on the site, hover — Original

Isolated render of Header (inner), hover — Render

Focusnot checked

Original Header (inner) on the site, focus — Original

Isolated render of Header (inner), focus — Render

Focus on cta 2100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta 3100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 3100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta 4100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 4100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta 5100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 5100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Group 5 height is 0px, the site has 310px.

At rest100% match1 of 619 measurements differ

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on cta 2100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 2100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 3100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta 4100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 4100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match173 measurements match

Hovernot checked

Focusnot checked

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match173 measurements match

Hovernot checked

Focusnot checked

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Footer8

97% match

desktop

Inner height is 807px, the site has 996px; Group 5 height is 120px, the site has 117px and 230 more.

At rest97% match232 of 2175 measurements differ

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Focusnot checked

Original Footer (inner) on the site, focus — Original

Isolated render of Footer (inner), focus — Render

Focus on cta97% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Inner height is 787px, the site has 976px; Group 5 height is 120px, the site has 117px and 230 more.

At rest100% match232 of 2175 measurements differ

Original Footer (inner, 2) on the site, at rest — Original

Isolated render of Footer (inner, 2), at rest — Render

Hovernot checked

Original Footer (inner, 2) on the site, hover — Original

Isolated render of Footer (inner, 2), hover — Render

Focusnot checked

Original Footer (inner, 2) on the site, focus — Original

Isolated render of Footer (inner, 2), focus — Render

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Inner height is 787px, the site has 976px; Group 5 height is 120px, the site has 117px and 230 more.

At rest100% match232 of 2175 measurements differ

Original Footer (inner, 3) on the site, at rest — Original

Isolated render of Footer (inner, 3), at rest — Render

Hovernot checked

Original Footer (inner, 3) on the site, hover — Original

Isolated render of Footer (inner, 3), hover — Render

Focusnot checked

Original Footer (inner, 3) on the site, focus — Original

Isolated render of Footer (inner, 3), focus — Render

Focus on cta100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Inner height is 807px, the site has 996px; Group 5 height is 120px, the site has 117px and 230 more.

At rest100% match232 of 2175 measurements differ

Original Footer (landing) on the site, at rest — Original

Isolated render of Footer (landing), at rest — Render

Hovernot checked

Original Footer (landing) on the site, hover — Original

Isolated render of Footer (landing), hover — Render

Focusnot checked

Original Footer (landing) on the site, focus — Original

Isolated render of Footer (landing), focus — Render

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Inner height is 525px, the site has 1860px; Group 3 height is 397px, the site has 1543px and 166 more.

At rest100% match168 of 2231 measurements differ

Hovernot checked

Focusnot checked

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Inner height is 525px, the site has 1860px; Group 3 height is 397px, the site has 1543px and 166 more.

At rest100% match168 of 2231 measurements differ

Hovernot checked

Focusnot checked

Focus on cta100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

92% match

mobile

Inner height is 525px, the site has 1860px; Group 3 height is 397px, the site has 1543px and 166 more.

At rest94% match168 of 2231 measurements differ

Hovernot checked

Original Footer (inner) on the site, hover — Original

Isolated render of Footer (inner), hover — Render

Focusnot checked

Focus on cta99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 295% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link92% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Inner height is 525px, the site has 1860px; Group 3 height is 397px, the site has 1543px and 166 more.

At rest100% match168 of 2231 measurements differ

Hovernot checked

Focusnot checked

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Input5

75% match

desktop

On hover, it renders 92% like the site, below the 97% bar.

At rest100% match26 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Hover92% match22 measurements match

Original Input on the site, hover — Original

Isolated render of Input, hover — Render

Focus75% match22 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

75% match

desktop

It renders 92% like the site, below the 97% bar.

At rest92% match26 measurements match

Original Input (2) on the site, at rest — Original

Isolated render of Input (2), at rest — Render

Focus75% match22 measurements match

Original Input (2) on the site, focus — Original

Isolated render of Input (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Input (3) on the site, at rest — Original

Isolated render of Input (3), at rest — Render

Hover100% match22 measurements match

Original Input (3) on the site, hover — Original

Isolated render of Input (3), hover — Render

Focus100% match22 measurements match

Original Input (3) on the site, focus — Original

Isolated render of Input (3), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Input (4) on the site, at rest — Original

Isolated render of Input (4), at rest — Render

Hover100% match22 measurements match

Original Input (4) on the site, hover — Original

Isolated render of Input (4), hover — Render

Focus100% match22 measurements match

Original Input (4) on the site, focus — Original

Isolated render of Input (4), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Textarea on the site, at rest — Original

Isolated render of Textarea, at rest — Render

Hover100% match22 measurements match

Original Textarea on the site, hover — Original

Isolated render of Textarea, hover — Render

Focus100% match22 measurements match

Original Textarea on the site, focus — Original

Isolated render of Textarea, focus — Render

Recipe in DESIGN.md

DESIGN.md

Supabase

Overview

Supabase presents itself as calm, credible developer infrastructure: a pure white canvas, near-black ink, and exactly one signal colour, emerald green. Nothing shouts. The brand green appears on the logo, the primary CTAs, links and checkmarks, and almost everything else is a disciplined grey ladder. Monospace numerals and code panels give it engineering credibility. Thin-line grey illustrations keep the tone understated rather than promotional.

Density is high at the component level and generous at the page level. UI copy lives at 13–16px Inter at a slightly heavy 450 weight, and controls are compact (the header CTA button-primary is only 26px tall). Sections are separated by large vertical gaps (section-padding-y, 128px) and full-width hairlines. The result feels like a well-organised console turned into a marketing page.

Hierarchy comes from three moves:

Family switching: Manrope for headings, Inter for UI and body, Source Code Pro for code and display numerals.
A grey text ladder: stepping from Ink (ink, #030303) down to Faint Grey (muted-subtle, #A0A0A0).
Etched surfaces: 1px translucent hairlines and stacked inset shadows that press elements into the page rather than lift them off it.

The only genuinely lifted layer is the header dropdown panel, and the sticky bars use frosted backdrop blur.

Key Characteristics:

White canvas (surface, #FFFFFF) with near-black ink (ink, #030303); green (primary, #0E7E4E) is the only chromatic signal in the UI.
Inter at weight 450 for body and UI, 500 for controls, 600 only on Manrope titles.
Manrope headings sit at weight 500–600 with normal tracking and tight 1.0–1.2 line heights.
Source Code Pro carries code (code) and large numeric displays (display-mono).
Buttons are etched: an inset hairline stack plus a faint 0px 1px 3px drop, never a heavy shadow.
The focus ring is consistent everywhere: a 2px #FDFDFD gap plus a 4px translucent green ring built on focus-ring (#30BA79).
Corners are modest and fractional (8px to 10.6667px), with true pills (rounded.full) for chips and badges.
Sticky header and sub-navigation use backdrop blur (blur(4px), blur(12px)) over a hairline bottom border.

Colors

A monochrome system with a single green family. Colour is reserved for action, brand and status; everything structural is ink, grey or translucent black.

Brand & Accent

Supabase Emerald (primary, #0E7E4E): the workhorse green.
- Default fill of every primary button (button-primary through button-primary-6).
- Inline and footer link colour (footer-landing-link).
- Hover and focus text colour of ghost nav buttons (button-ghost).
- Use it for anything interactive that should read as 'go'.
Signature Mint (brand, #3FCF8E): the logo and brand-mark green. Use it as a decorative accent, never as text on white.
Mint Tint (brand-tint, #A9F1CA): pale green wash for highlight backgrounds and illustration accents.
Forest (primary-deep, #15593B): a darker green for emphasised green text where primary feels too light.
Success Green (success, #1B9657): status text such as checkmarks and positive indicators.
Violet (accent-purple, #6B35DC): rare secondary accent text, used sparingly.
Amber (warning, #B45309): warning text only.

Interactive States

These are component and state colours, not part of the page palette.

Pressed Emerald (primary-fill, #007243): measured only on components. It is the hover fill of every primary button (button-primary-hover, footer-landing-button-hover). Swap to it on hover; do not use it as a resting fill.
Focus Green (focus-ring, #30BA79): the focus ring hue.
- Applied at partial alpha as #30BA798C in a 4px ring.
- The ring sits outside a 2px #FDFDFD gap.
- It is identical across buttons, tabs, inputs and nav links.

Surface

Paper White (surface, #FFFFFF): the page canvas. Also the fill of secondary buttons (button-secondary) and cards (card-3).
Off-White (surface-footer, #FDFDFD): the footer field (footer-landing), table headers (table-3-head) and tab fills (tab). It is barely distinguishable from white; it separates zones without a visible edge.
Translucent ink washes stand in for grey fills on components:
- input-3 rests on #00000004.
- button-secondary-hover shifts to #03030307.
- stat-link-hover uses #0303030A.

Text

Ink (ink, #030303): headings, body and button labels. This is the dominant text colour by far.
Graphite (ink-secondary, #464646): secondary body copy (card-5-body) and quiet header links (stat-link).
Slate (body-muted, #525252): muted paragraph copy.
Mid Grey (muted, #696969): captions, descriptions, footer text (footer-landing-text-2), inactive framework tabs (framework-tab).
Faint Grey (muted-subtle, #A0A0A0): tertiary metadata and placeholder-weight text.
Code Ink (code-ink, #24292F): code panel text.
On Primary (on-primary, #FFFFFF): text on green fills. The measured button label renders #FAFCFB (button-primary-label).

Hairlines & Borders

Borders are translucent ink, not solid greys, so they adapt to whatever surface they sit on.

Hairline: 1px solid #03030315, measured on card-3, tab, framework-tab and the header bottom edge (header-landing-mobile).
Field border: 1px solid #03030325 (input-3, textarea), darkening to #0303034C on hover and focus.
Selected outline: solid ink (1px solid #030303) marks the selected tab (tab-active).

Gradients

The screenshots show a green gradient treatment on one hero headline line. No gradient value was measured. Treat gradients as a one-off hero flourish built from brand and primary, never as a surface or button treatment.

The site ships a real dark theme that flips roles rather than re-tinting the brand:

Surface: the canvas goes to a near-black green-grey (#1B1D1C).
Text: ink inverts to #EDEFEE, the secondary ladder lifts to #BCBDBC and #989A99.
Brand green: links and accents brighten to #4ACD8B to hold contrast, while primary fills deepen to #006338.
Accents: violet lightens to #BDA4FF.

This implies semantic role tokens overridden per theme, so components should always reference roles, never raw hexes.

Dark Mode

The dark values below were measured with the dark color scheme forced on the page; the light values are the page's normal render.

Role	Light	Dark
Surface	`surface`	#1B1D1C
Text	`ink`	#EDEFEE
Text (secondary)	`muted`	#989A99
Dark only	not observed	#BCBDBC
Dark only	not observed	#006338
Dark only	not observed	#BDA4FF

Typography

Font Family

Inter: all UI, body copy, buttons, nav, tables and captions. It is run at weight 450 for reading text, a variable-font intermediate between regular and medium.
Manrope: headings and titles, from the hero (hero-display) down to card and footer column titles (title-sm, title-xs).
Source Code Pro: code snippets (code) and monospaced numeric display, such as pricing figures (display-mono).
Two of five captured pages rendered body text in ui-sans-serif (the system stack). Treat this as a fallback, not a design choice.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	46px	500	1	normal	Page H1 / hero headline (Manrope)
`display-mono`	46px	450	1	normal	Large monospaced numerals, e.g. prices (Source Code Pro)
`heading-xl`	34px	500	1.2	normal	Secondary page H1 (Manrope)
`stat-display`	34px	450	1.1	normal	Large stat figures in Inter
`heading-lg`	28px	600	1.2	normal	Section H2 (Manrope)
`title-sm`	15px	600	1.5	normal	Footer column and small headings (Manrope)
`title-xs`	14px	600	1.45	normal	Card titles / H3 (Manrope)
`body`	16px	450	1.5	normal	Default paragraph and link text
`body-sm`	14px	450	1.45	normal	Card descriptions, table cells, secondary copy
`nav-link`	14px	500	1.45	normal	Header navigation links
`button`	14px	500	1.15	normal	Standard button labels
`caption-lg`	13px	450	1.5	normal	List items, plan feature rows
`code`	13px	500	1.7	normal	Inline and block code
`caption`	12px	450	1.35	normal	Metadata, table text, dates
`label`	12px	500	1.35	normal	Small button labels, tags, table headers

Principles

Three weights only: 450, 500, 600.
- 450 is the reading weight.
- 500 is for anything clickable or display-sized in Manrope.
- 600 is reserved for Manrope titles at 28px and below.
- There is no 700 and no 300.
Tracking is always normal. Contrast comes from family and size, not letter-spacing. The one tighter value seen (-0.5px on card-5-title) sits on a flagged recipe and should not be generalised.
Line height tightens as size grows:
- 1.0 at 46px.
- 1.1–1.2 at 28–34px.
- 1.35–1.5 for 12–16px text.
- 1.7 for code, so it reads as a listing.
Compact UI sizing: buttons and labels sit at 12–15px. Never set body copy larger than body.

Note on Font Substitutes

Inter, Manrope and Source Code Pro are all open-source (Google Fonts), so no substitute is required. Two cautions:

Load the variable Inter so weight 450 renders. With static cuts, 450 snaps to 400 or 500 and the page loses its slightly dense texture. If only static cuts are available, use 400 for body text, not 500.
If Manrope is unavailable, use Inter at the same sizes, at weight 600 for titles.

Layout

Spacing System

No base step was published; the measured paddings are small multiples of 2 and 4. Component paddings come in four tiers:

Tier	Tokens	Value (y / x)	Read on
Compact controls	`button-primary-padding-y` / `button-primary-padding-x`	4px / 10px	`button-primary` (header CTA)
Compact controls (same values)	`button-secondary-3-`, `button-secondary-4-`, `button-primary-5-`, `button-secondary-6-`, `button-secondary-7-*`	4px / 10px	the matching buttons
Standard buttons	`button-primary-2-padding-y` / `button-primary-2-padding-x`	8px / 16px	`button-primary-2`
Standard buttons (same values)	`button-secondary-`, `button-primary-3-`, `button-primary-4-`, `button-secondary-2-`	8px / 16px	the matching buttons
Medium buttons	`button-primary-6-padding-y` / `button-primary-6-padding-x`	8px / 12px	`button-primary-6`
Medium buttons (same values)	`button-secondary-5-*`	8px / 12px	`button-secondary-5`
Ghost nav buttons	`button-ghost-padding-y` / `button-ghost-padding-x`	8px / 10px	`button-ghost`
Ghost nav buttons (same values)	`button-ghost-2-*`	8px / 10px	`button-ghost-2`
Fields	`input-3-padding-y` / `input-3-padding-x`	8px / 12px	`input-3`
Fields (same values)	`input-4-`, `textarea-`	8px / 12px	`input-4`, `textarea`

Section rhythm: section-padding-y (128px) is the vertical padding between the page's major sections. It was measured on the page itself, not on a component.

Grid & Container

Container: content is capped at header-landing-mobile-inner-max-width (1280px). The same 1280px cap appears as header-inner-mobile-inner-max-width, and content is centred with wide side margins.
Gaps: no grid gap token was verified, so gutter widths are not specified here.
Patterns seen in the screenshots:
- A two-part hero: headline on the left, descriptor on the right.
- A bento grid of feature cards, the first card spanning wider.
- A customer logo wall between full-width hairlines.
- Equal pricing columns with checklist rows, followed by full-width comparison tables.
- A blog index of a featured post, secondary posts and dense single-line list rows.
- A multi-column link footer.

Whitespace Philosophy

Whitespace is spent between sections, not inside components. Controls and cards are tight and information-dense, padded in the 4–16px range above. Large section-padding-y gaps and full-width hairlines then give each band of content room. When adding a section, keep the 128px rhythm and the 1280px container. Separate content with a hairline or a rhythm gap before reaching for a background change.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. section-padding-y is measured directly on the page sections and feeds no step.

section-padding-y: 128px (vertical padding repeated on the page sections: 2 section edges on 1 page)
header-landing-mobile-inner-max-width: 1280px (header-landing-mobile, max width of header-landing-mobile-inner)
header-inner-mobile-inner-max-width: 1280px (header-inner-mobile, max width of header-inner-mobile-inner)
button-primary-padding-y: 4px (button-primary, vertical padding of the root)
button-primary-padding-x: 10px (button-primary, horizontal padding of the root)
button-primary-2-padding-y: 8px (button-primary-2, vertical padding of the root)
button-primary-2-padding-x: 16px (button-primary-2, horizontal padding of the root)
button-secondary-padding-y: 8px (button-secondary, vertical padding of the root)
button-secondary-padding-x: 16px (button-secondary, horizontal padding of the root)
button-ghost-padding-y: 8px (button-ghost, vertical padding of the root)
button-ghost-padding-x: 10px (button-ghost, horizontal padding of the root)
button-primary-3-padding-y: 8px (button-primary-3, vertical padding of the root)
button-primary-3-padding-x: 16px (button-primary-3, horizontal padding of the root)
button-primary-4-padding-y: 8px (button-primary-4, vertical padding of the root)
button-primary-4-padding-x: 16px (button-primary-4, horizontal padding of the root)
button-secondary-2-padding-y: 8px (button-secondary-2, vertical padding of the root)
button-secondary-2-padding-x: 16px (button-secondary-2, horizontal padding of the root)
button-secondary-3-padding-y: 4px (button-secondary-3, vertical padding of the root)
button-secondary-3-padding-x: 10px (button-secondary-3, horizontal padding of the root)
button-secondary-4-padding-y: 4px (button-secondary-4, vertical padding of the root)
button-secondary-4-padding-x: 10px (button-secondary-4, horizontal padding of the root)
button-primary-5-padding-y: 4px (button-primary-5, vertical padding of the root)
button-primary-5-padding-x: 10px (button-primary-5, horizontal padding of the root)
button-primary-6-padding-y: 8px (button-primary-6, vertical padding of the root)
button-primary-6-padding-x: 12px (button-primary-6, horizontal padding of the root)
button-secondary-5-padding-y: 8px (button-secondary-5, vertical padding of the root)
button-secondary-5-padding-x: 12px (button-secondary-5, horizontal padding of the root)
button-secondary-6-padding-y: 4px (button-secondary-6, vertical padding of the root)
button-secondary-6-padding-x: 10px (button-secondary-6, horizontal padding of the root)
button-ghost-2-padding-y: 8px (button-ghost-2, vertical padding of the root)
button-ghost-2-padding-x: 10px (button-ghost-2, horizontal padding of the root)
button-secondary-7-padding-y: 4px (button-secondary-7, vertical padding of the root)
button-secondary-7-padding-x: 10px (button-secondary-7, horizontal padding of the root)
input-3-padding-y: 8px (input-3, vertical padding of the root)
input-3-padding-x: 12px (input-3, horizontal padding of the root)
input-4-padding-y: 8px (input-4, vertical padding of the root)
input-4-padding-x: 12px (input-4, horizontal padding of the root)
textarea-padding-y: 8px (textarea, vertical padding of the root)
textarea-padding-x: 12px (textarea, horizontal padding of the root)

Elevation & Depth

Supabase builds depth by etching, not lifting. Most surfaces sit on the white canvas and are separated by 1px hairlines. Controls carry a layered box-shadow: a whisper of outer shadow plus stacked inset rings, so buttons read as pressed into the page. Only floating menus get a real drop shadow, and the sticky chrome uses frosted blur. Every measured stack begins with four transparent 0px 0px 0px 0px placeholder layers, which the focus ring later fills. Keep that slot structure when you rebuild them.

Level	Treatment	Use
0 · Canvas	Plain fill: Paper White (`surface`, #FFFFFF), with Footer Mist (`surface-footer`, #FDFDFD) for the footer and tab rows	Page body, `footer-landing` (flagged: the `footer-landing-inner` height did not reproduce the measured 996px after 2 correction attempts), `tab`, `tab-active`
1 · Hairline	`1px solid #03030315` border	`card-3` (flagged: the `card-3` height did not reproduce the measured 178px after 2 correction attempts), `card-2` (flagged: the render matched 95% of the original pixels, below the 96% required (instance 2) after 2 correction attempts), `tab`, `framework-tab` / `framework-tab-active` right dividers, `table-3` row bottoms, the header bottom edge
1b · Field hairline	`1px solid #03030325` border on a `#00000004` tint; hover and focus darken it to `1px solid #0303034C`	`input-3`, `input-4`, `textarea`, footer newsletter row `footer-landing-inner-2`
2 · Etched control	`#0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset` (after the transparent slots)	Every green fill: `button-primary`, `button-primary-2` through `button-primary-6`, footer CTAs
2b · Etched secondary	Same stack plus a bottom bevel, `#0000000A 0px -1px 0px 0px inset`	White buttons: `button-secondary`, `button-secondary-2`, `button-secondary-4`, `button-secondary-5`, `button-secondary-6`
2c · Soft drop only	`#0000000A 0px 1px 3px 0px` with no inset rings	The dark-fill `button-secondary-3` (#030303), where an inset ring would disappear
3 · Floating panel	`#0000001A 0px 10px 15px -3px, #0000001A 0px 4px 6px -4px` plus `1px solid #03030315`, white fill, 16px radius (`rounded.8xl`)	Nav dropdown panel `header-inner-group-7` (flagged: the `header-inner-group-5` y did not reproduce the measured -1px after 2 correction attempts). Page sampling also shows a small variant, `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
Blur · Frosted chrome	`backdrop-filter: blur(4px)` over a transparent header with a `1px solid #03030315` bottom border	`header-landing` (flagged: the `header-landing-group-5` height did not reproduce the measured 310px after 2 correction attempts), `header-landing-mobile`, `header-inner-mobile`
Blur · Frosted sub-nav	`backdrop-filter: blur(12px)` over a `#FDFDFDE6` fill with a `1px solid #03030315` bottom border	Sticky secondary tab bar `tab-4`
Focus	Fills the placeholder slots with `#FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px` (a Focus Mint `focus-ring` halo at partial alpha) and keeps the underlying etch	Every button, tab, link, input and `copy-button`

Shadow philosophy. Shadows here are structural, not atmospheric.

Controls (levels 2–2c). The low-alpha stacks at #0000000A, #00000007 and #00000011 work as a crisp edge plus a hint of bevel. They give buttons their tactile, slightly recessed feel without breaking the hairline aesthetic.
Cards (level 1). Cards and tables take only the hairline.
Floating panels (level 3). The deeper 0px 10px 15px -3px drop is used only for panels that genuinely float above content, such as nav menus.
Sticky chrome (blur). The header uses blur(4px) and the sub-nav uses blur(12px). Both pair the blur with a hairline bottom border so they stay legible over scrolling content. Keep them translucent rather than opaque.
Focus. The focus ring is part of the shadow stack. Add the 2px #FDFDFD gap and the 4px #30BA798C halo into the reserved transparent slots instead of using an outline, so the control's etch survives in the focused state.
Do not invent tiers. No other elevation was measured, so do not add shadows heavier than level 3.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	2.66667px	Tiny inner marks and indicators
`rounded.sm`	4px	Small inline elements
`rounded.md`	5.33333px	View toggles (`view-toggle`), inner blocks of `card-2`
`rounded.lg`	6px	Small chips
`rounded.xl`	8px	Compact 26px buttons (`button-primary`, `button-secondary-4`); inputs (`input-3`, `textarea`); copy buttons; tabs (`tab-2`)
`rounded.2xl`	8.86154px	34px buttons (`button-primary-6`, `button-secondary-5`); ghost nav buttons (`button-ghost`)
`rounded.3xl`	9px	Occasional containers
`rounded.4xl`	9.29231px	38px buttons (`button-primary-2`, `button-secondary`)
`rounded.5xl`	9.72308px	42px buttons (`button-primary-3`, `button-secondary-2`)
`rounded.6xl`	10.6667px	Cards (`card-3`), table rows (`table-2-row-2`)
`rounded.7xl`	15px	Larger panels and mockup windows
`rounded.8xl`	16px	Dropdown panel (`header-inner-group-7`), large feature cards
`rounded.9xl`	21.3333px	Rare oversized containers
`rounded.full`	9999px	Pills: badges, category chips, filter tags, avatars

Geometry character

The fractional values (8.86154px, 9.29231px, 9.72308px) are not noise. Button radius scales with button size: the larger the control, the slightly larger its corner. Pick the radius that matches the button tier rather than normalising every button to 8px.

The overall character is softly rounded but never bubbly:

Cards: stay around rounded.6xl to rounded.8xl.
Controls: sit at rounded.xl to rounded.5xl.
Pills and circles: rounded.full is the most frequently observed radius on the page. It is reserved for pills (tags, badges, blog category chips) and circular avatars, not for primary CTAs, which keep their soft-rectangle shape.

Icons are thin-stroke outline glyphs that match this restrained geometry.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Button, primary

Verification: verified against the live page at desktop.

Anatomy

button-primary: the component root, a <a> (.c-button-primary)
button-primary-label: label text, 18 characters (.c-button-primary__label)

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">
    <span class="c-button-primary__label">lorem ipsum dolor</span>
  </a>
</div>

.c-button-primary-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-primary__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-primary:hover {
  background-color: #007243;
}

.c-button-primary:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-primary-hover): background-color #007243
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <a> (.c-button-primary-2)
button-primary-2-label: label text, 18 characters (.c-button-primary-2__label)

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">
    <span class="c-button-primary-2__label">lorem ipsum dolor</span>
  </a>
</div>

.c-button-primary-2-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 16px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 9.29231px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-primary-2__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-primary-2:hover {
  background-color: #007243;
}

.c-button-primary-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-primary-2-hover): background-color #007243
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <a> (.c-button-secondary)
button-secondary-label: label text, 14 characters (.c-button-secondary__label)

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <a class="c-button-secondary" href="#">
    <span class="c-button-secondary__label">lorem ipsum do</span>
  </a>
</div>

.c-button-secondary-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 16px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 9.29231px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary:hover {
  background-color: #03030307;
}

.c-button-secondary:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-secondary-hover): background-color #03030307
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-label: label text, 7 characters (.c-button-ghost__label)
button-ghost-icon: icon placeholder, 12px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__label">lorem i</span>
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
  right: 0px;
  bottom: -1px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-left: 4px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-button-ghost:hover {
  color: #0E7E4E;
}

.c-button-ghost:focus {
  color: #0E7E4E;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (button-ghost-hover): color #0E7E4E
focus (button-ghost-focus): color #0E7E4E, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Card

Verification: flagged, the recipe could not be rendered on its own.

Anatomy

Group: 3 instances in a 3-column grid; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-media: image placeholder, 299x390px (.c-card__media)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <span class="c-card__media" aria-hidden="true"></span>
  </div>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #696969;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card {
  display: inline-flex;
  align-items: flex-end;
  border-spacing: 0px;
  box-sizing: border-box;
  aspect-ratio: 330 / 430;
  position: relative;
  right: -40px;
  left: -40px;
  z-index: 10;
  color: #696969;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, -305.438, 0);
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  padding-bottom: 8px;
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 299px;
  height: 390px;
  max-width: 100%;
  aspect-ratio: 330 / 430;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Card (2)

Verification: flagged, the render matched 95% of the original pixels, below the 96% required (instance 2) after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-group: inner flex column (.c-card-2__group)
card-2-group-2: inner block (.c-card-2__group-2)
card-2-group-3: inner block (.c-card-2__group-3)
card-2-group-4: inner block (.c-card-2__group-4)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <div class="c-card-2__group-2"></div>
      <div class="c-card-2__group-3"></div>
    </div>
    <div class="c-card-2__group-4"></div>
  </div>
</div>

.c-card-2-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 96px;
  aspect-ratio: 9 / 16;
  color: #030303;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-top-color: #03030315;
  border-right-color: #03030315;
  border-bottom-color: #03030315;
}

.c-card-2__group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px;
}

.c-card-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 32px;
  height: 10px;
  border-radius: 5.33333px;
}

.c-card-2__group-3 {
  display: block;
  box-sizing: border-box;
  width: 64px;
  height: 10px;
  border-radius: 5.33333px;
}

.c-card-2__group-4 {
  display: block;
  box-sizing: border-box;
  width: 80px;
  aspect-ratio: 1 / 1;
  background-color: #6969691A;
  border-radius: 5.33333px;
  margin-top: 16px;
}

.c-card-2:hover {
  background-color: transparent;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #03030315;
}

.c-card-2:focus {
  background-color: transparent;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #03030315;
}

States

hover (card-2-hover): background-color transparent, border-left-width 1px, border-left-style solid, border-left-color #03030315
focus (card-2-focus): background-color transparent, border-left-width 1px, border-left-style solid, border-left-color #03030315

Card (3)

Verification: flagged, the card-3 height did not reproduce the measured 178px after 2 correction attempts.

Anatomy

Group: 4 instances in a 4-column grid, 12px gap; the recipe carries the values they all share
card-3: the component root, a <a> (.c-card-3)
card-3-group: inner flex row (.c-card-3__group)
card-3-media: image placeholder, 20px (.c-card-3__media)
card-3-title: heading, 10 characters (.c-card-3__title)
card-3-body: label text, 99 characters (.c-card-3__body)

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <a class="c-card-3" href="#">
    <div class="c-card-3__group">
      <span class="c-card-3__media" aria-hidden="true"></span>
    </div>
    <h4 class="c-card-3__title">lorem ipsu</h4>
    <p class="c-card-3__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit</p>
  </a>
</div>

.c-card-3-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 40px 24px;
  background-color: #FFFFFF;
  color: #030303;
  border: 1px solid #03030315;
  border-radius: 10.6667px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-card-3__group {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.c-card-3__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-card-3__body {
  display: flow-root;
  box-sizing: border-box;
  margin: 4px 0px 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

States

No hover or focus change was observed.

Framework tab

Verification: verified against the live page at desktop.

Anatomy

framework-tab-active: the component root, a <button> (.c-framework-tab-active)
framework-tab-active-icon: icon placeholder, 28px (.c-framework-tab-active__icon)

Recipe

HTML · CSS

<div class="c-framework-tab-active-scope">
  <button class="c-framework-tab-active" type="button">
    <span class="c-framework-tab-active__icon" aria-hidden="true"></span>
  </button>
</div>

.c-framework-tab-active-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-framework-tab-active {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 16px 0px;
  background-color: #FFFFFF;
  color: #030303;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  border-top: 0;
  border-right: 1px solid #03030315;
  border-bottom: 0;
  border-left: 0;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-framework-tab-active__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Framework tab

Verification: verified against the live page at desktop.

Anatomy

framework-tab: the component root, a <button> (.c-framework-tab)
framework-tab-icon: icon placeholder, 28px (.c-framework-tab__icon)

Recipe

HTML · CSS

<div class="c-framework-tab-scope">
  <button class="c-framework-tab" type="button">
    <span class="c-framework-tab__icon" aria-hidden="true"></span>
  </button>
</div>

.c-framework-tab-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-framework-tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 16px 0px;
  background-color: transparent;
  color: #696969;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  border-top: 0;
  border-right: 1px solid #03030315;
  border-bottom: 0;
  border-left: 0;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-framework-tab__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Tab

Verification: verified against the live page at desktop.

Anatomy

tab-active: the component root, a <button> (.c-tab-active), 12-character label

Recipe

HTML · CSS

<div class="c-tab-active-scope">
  <button class="c-tab-active" type="button">lorem ipsum</button>
</div>

.c-tab-active-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-tab-active {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px 32px;
  background-color: #FDFDFD;
  color: #030303;
  border: 1px solid #030303;
  border-radius: 3.35544e+07px;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

States

No hover or focus change was observed.

Tab

Verification: verified against the live page at desktop.

Anatomy

tab: the component root, a <button> (.c-tab), 10-character label

Recipe

HTML · CSS

<div class="c-tab-scope">
  <button class="c-tab" type="button">lorem ipsu</button>
</div>

.c-tab-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-tab {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px 32px;
  background-color: #FDFDFD;
  color: #030303;
  border: 1px solid #03030315;
  border-radius: 3.35544e+07px;
  opacity: 0.8;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-tab:hover {
  border: 1px solid #696969;
}

States

hover: border 1px solid #696969

Header (landing)

Verification: desktop flagged, the header-landing-group-5 height did not reproduce the measured 310px after 2 correction attempts; mobile verified against the live page at mobile.

Variant observed on https://supabase.com/.

Anatomy

header-landing: the component root, a <nav> (.c-header-landing)
header-landing-inner: inner flex row (.c-header-landing__inner)
header-landing-group: inner flex row (.c-header-landing__group)
header-landing-group-2: inner flex row (.c-header-landing__group-2)
header-landing-group-3: inner flex row (.c-header-landing__group-3)
header-landing-logo: icon placeholder, 124x24px (.c-header-landing__logo)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-group-4: inner block (.c-header-landing__group-4)
header-landing-nav-list: inner flex row (.c-header-landing__nav-list)
header-landing-nav-item: inner group (.c-header-landing__nav-item, 6 instances)
header-landing-cta: the button-ghost button, 7-character label (.c-header-landing__cta, 3 instances), content not captured
header-landing-nav-link: link (.c-header-landing__nav-link, 3 instances), content not captured
header-landing-group-5: inner flex row (.c-header-landing__group-5)
header-landing-group-6: inner flex row (.c-header-landing__group-6)
header-landing-group-7: inner flex row (.c-header-landing__group-7)
header-landing-cta-2: link (.c-header-landing__cta-2)
header-landing-group-8: inner group (.c-header-landing__group-8)
header-landing-group-9: inner flex row (.c-header-landing__group-9)
header-landing-icon: icon placeholder, 24px (.c-header-landing__icon)
header-landing-text: label text, 6 characters (.c-header-landing__text)
header-landing-cta-3: link (.c-header-landing__cta-3)
header-landing-text-2: label text, 7 characters (.c-header-landing__text-2, 2 instances)
header-landing-cta-4: the button-primary button (.c-header-landing__cta-4)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <div class="c-header-landing__inner">
      <div class="c-header-landing__group">
        <div class="c-header-landing__group-2">
          <div class="c-header-landing__group-3">
            <span class="c-header-landing__logo" aria-hidden="true"></span>
          </div>
          <nav class="c-header-landing__nav">
            <div class="c-header-landing__group-4">
              <ul class="c-header-landing__nav-list">
                <li class="c-header-landing__nav-item">
                  <button class="c-header-landing__cta" type="button">lorem i</button>
                </li>
                <li class="c-header-landing__nav-item">
                  <button class="c-header-landing__cta" type="button">lorem ipsu</button>
                </li>
                <li class="c-header-landing__nav-item">
                  <button class="c-header-landing__cta" type="button">lorem ips</button>
                </li>
                <li class="c-header-landing__nav-item">
                  <a class="c-header-landing__nav-link" href="#"></a>
                </li>
                <li class="c-header-landing__nav-item">
                  <a class="c-header-landing__nav-link" href="#"></a>
                </li>
                <li class="c-header-landing__nav-item">
                  <a class="c-header-landing__nav-link" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="c-header-landing__group-5"></div>
          </nav>
        </div>
        <div class="c-header-landing__group-6">
          <div class="c-header-landing__group-7">
            <a class="c-header-landing__cta-2" href="#">
              <span class="c-header-landing__group-8">
                <span class="c-header-landing__group-9">
                  <span class="c-header-landing__icon" aria-hidden="true"></span>
                  <span class="c-header-landing__text">lorem</span>
                </span>
              </span>
            </a>
            <a class="c-header-landing__cta-3" href="#">
              <span class="c-header-landing__text-2">lorem i</span>
            </a>
            <a class="c-header-landing__cta-4" href="#">
              <span class="c-header-landing__text-2">lorem ipsum dolor</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 40;
  color: #030303;
  backdrop-filter: blur(4px);
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-header-landing__inner {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  max-width: 1280px;
  position: relative;
  padding-right: 96px;
  padding-left: 96px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__group {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-landing__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-header-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 124px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-header-landing__nav {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  height: 64px;
  padding-left: 32px;
}

.c-header-landing__group-4 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__nav-list {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: list-item;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-landing__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-landing__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  color: #030303;
  border-radius: 8px;
  cursor: pointer;
  line-height: 14px;
  text-decoration-line: none;
}

.c-header-landing__group-5 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  right: 0px;
  left: 0px;
}

.c-header-landing__group-6 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-landing__group-7 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  color: #464646;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-landing__group-8 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-header-landing__group-9 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-header-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-landing__text-2 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-header-landing__cta-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-landing__cta:hover {
  color: #0E7E4E;
}

.c-header-landing__cta:focus {
  color: #0E7E4E;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing__nav-link:focus {
  color: #0E7E4E;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing__cta-2:hover {
  background-color: #0303030A;
  color: #030303;
}

.c-header-landing__cta-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing__cta-3:hover {
  background-color: #03030307;
}

.c-header-landing__cta-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

.c-header-landing__cta-4:hover {
  background-color: #007243;
}

.c-header-landing__cta-4:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

Mobile anatomy

header-landing-mobile: the component root, a <nav> (.c-header-landing-mobile)
header-landing-mobile-inner: inner flex row (.c-header-landing-mobile__inner)
header-landing-mobile-group: inner flex row (.c-header-landing-mobile__group)
header-landing-mobile-group-2: inner flex row (.c-header-landing-mobile__group-2, 2 instances)
header-landing-mobile-group-3: inner flex row (.c-header-landing-mobile__group-3)
header-landing-mobile-logo: icon placeholder, 124x24px (.c-header-landing-mobile__logo)
header-landing-mobile-button: button (.c-header-landing-mobile__button)
header-landing-mobile-text: label text, 14 characters (.c-header-landing-mobile__text)
header-landing-mobile-button-icon: icon placeholder, 24px (.c-header-landing-mobile__button-icon)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <nav class="c-header-landing-mobile">
    <div class="c-header-landing-mobile__inner">
      <div class="c-header-landing-mobile__group">
        <div class="c-header-landing-mobile__group-2">
          <div class="c-header-landing-mobile__group-3">
            <span class="c-header-landing-mobile__logo" aria-hidden="true"></span>
          </div>
        </div>
      </div>
      <div class="c-header-landing-mobile__group-2">
        <button class="c-header-landing-mobile__button" type="button">
          <span class="c-header-landing-mobile__text">lorem ipsum do</span>
          <span class="c-header-landing-mobile__button-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-landing-mobile-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-header-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 40;
  color: #030303;
  backdrop-filter: blur(4px);
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-header-landing-mobile__inner {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  max-width: 1280px;
  position: relative;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-landing-mobile__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing-mobile__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-header-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 124px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-header-landing-mobile__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #696969;
  border: 0;
  border-radius: 8px;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-header-landing-mobile__button-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing-mobile__button:hover {
  background-color: #FFFFFF;
  color: #464646;
}

.c-header-landing-mobile__button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

header-landing-cta hover (header-landing-cta-hover): color #0E7E4E
header-landing-cta focus (header-landing-cta-focus): color #0E7E4E, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-landing-nav-link focus (header-landing-nav-link-focus): color #0E7E4E, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-landing-cta-2 hover (header-landing-cta-2-hover): background-color #0303030A, color #030303
header-landing-cta-2 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-landing-cta-3 hover (header-landing-cta-3-hover): background-color #03030307
header-landing-cta-3 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none
header-landing-cta-4 hover (header-landing-cta-4-hover): background-color #007243
header-landing-cta-4 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none
mobile, header-landing-mobile-button hover (header-landing-mobile-button-hover): background-color #FFFFFF, color #464646
mobile, header-landing-mobile-button focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Verification: desktop flagged, the footer-landing-inner height did not reproduce the measured 996px after 2 correction attempts; mobile flagged, the footer-landing-mobile-inner height did not reproduce the measured 1860px after 2 correction attempts.

Variant observed on https://supabase.com/.

Anatomy

footer-landing: the component root, a <footer> (.c-footer-landing)
footer-landing-heading: heading, 6 characters (.c-footer-landing__heading)
footer-landing-group: inner block (.c-footer-landing__group)
footer-landing-columns: inner flex row (.c-footer-landing__columns)
footer-landing-column: inner flex row (.c-footer-landing__column)
footer-landing-text: label text, 21 characters (.c-footer-landing__text, 4 instances)
footer-landing-link: link, 16-character label (.c-footer-landing__link)
footer-landing-list: inner flex row (.c-footer-landing__list)
footer-landing-item: inner flex row (.c-footer-landing__item, 3 instances)
footer-landing-logo: icon placeholder, 16px (.c-footer-landing__logo)
footer-landing-text-2: label text, 9 characters (.c-footer-landing__text-2, 3 instances)
footer-landing-icon: icon placeholder, 16px (.c-footer-landing__icon, 2 instances)
footer-landing-group-2: inner block (.c-footer-landing__group-2)
footer-landing-inner: inner block (.c-footer-landing__inner), content not captured
footer-landing-columns-2: inner grid (.c-footer-landing__columns-2)
footer-landing-group-3: inner flex column (.c-footer-landing__group-3)
footer-landing-icon-2: icon placeholder, 160x30px (.c-footer-landing__icon-2)
footer-landing-columns-3: inner flex row (.c-footer-landing__columns-3)
footer-landing-link-2: link (.c-footer-landing__link-2, 5 instances)
footer-landing-text-3: label text, 7 characters (.c-footer-landing__text-3, 6 instances)
footer-landing-group-4: inner block (.c-footer-landing__group-4, 6 instances)
footer-landing-icon-3: icon placeholder, 22px (.c-footer-landing__icon-3, 6 instances)
footer-landing-link-3: link (.c-footer-landing__link-3)
footer-landing-group-5: inner flex column (.c-footer-landing__group-5)
footer-landing-text-4: label text, 43 characters (.c-footer-landing__text-4)
footer-landing-inner-2: inner flex row (.c-footer-landing__inner-2)
footer-landing-button: button (.c-footer-landing__button)
footer-landing-text-5: label text, 9 characters (.c-footer-landing__text-5)
footer-landing-columns-4: inner grid (.c-footer-landing__columns-4)
footer-landing-columns-5: inner grid (.c-footer-landing__columns-5), content not captured
footer-landing-group-6: inner block (.c-footer-landing__group-6, 3 instances), content not captured
footer-landing-heading-2: heading, 7 characters (.c-footer-landing__heading-2, 2 instances)
footer-landing-list-2: inner group (.c-footer-landing__list-2, 2 instances)
footer-landing-item-2: inner group (.c-footer-landing__item-2, 27 instances)
footer-landing-link-4: link (.c-footer-landing__link-4, 29 instances), content not captured

Desktop recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <h2 class="c-footer-landing__heading">lorem</h2>
    <div class="c-footer-landing__group">
      <div class="c-footer-landing__columns">
        <div class="c-footer-landing__column">
          <span class="c-footer-landing__text">lorem ipsum dolor sit</span>
          <a class="c-footer-landing__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-landing__list">
          <li class="c-footer-landing__item">
            <span class="c-footer-landing__logo" aria-hidden="true"></span>
            <span class="c-footer-landing__text">lorem ipsum</span>
            <span class="c-footer-landing__text-2">lorem ips</span>
          </li>
          <li class="c-footer-landing__item">
            <span class="c-footer-landing__icon" aria-hidden="true"></span>
            <span class="c-footer-landing__text">lorem</span>
            <span class="c-footer-landing__text-2">lorem ips</span>
          </li>
          <li class="c-footer-landing__item">
            <span class="c-footer-landing__icon" aria-hidden="true"></span>
            <span class="c-footer-landing__text">lorem ips</span>
            <span class="c-footer-landing__text-2">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-landing__group-2"></div>
    </div>
    <div class="c-footer-landing__inner">
      <div class="c-footer-landing__columns-2">
        <div class="c-footer-landing__group-3">
          <span class="c-footer-landing__icon-2" aria-hidden="true"></span>
          <div class="c-footer-landing__columns-3">
            <a class="c-footer-landing__link-2" href="#">
              <span class="c-footer-landing__text-3">lorem i</span>
              <div class="c-footer-landing__group-4">
                <span class="c-footer-landing__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing__link-2" href="#">
              <span class="c-footer-landing__text-3">lorem</span>
              <div class="c-footer-landing__group-4">
                <span class="c-footer-landing__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing__link-2" href="#">
              <span class="c-footer-landing__text-3">lorem i</span>
              <div class="c-footer-landing__group-4">
                <span class="c-footer-landing__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing__link-2" href="#">
              <span class="c-footer-landing__text-3">lorem i</span>
              <div class="c-footer-landing__group-4">
                <span class="c-footer-landing__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing__link-2" href="#">
              <span class="c-footer-landing__text-3">lorem</span>
              <div class="c-footer-landing__group-4">
                <span class="c-footer-landing__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing__link-3" href="#">
              <span class="c-footer-landing__text-3">lorem ips</span>
              <div class="c-footer-landing__group-4">
                <span class="c-footer-landing__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-landing__group-5">
            <p class="c-footer-landing__text-4">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-landing__inner-2"></div>
            <button class="c-footer-landing__button" type="button">
              <span class="c-footer-landing__text-5">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-landing__columns-4">
          <div class="c-footer-landing__columns-5">
            <div class="c-footer-landing__group-6">
              <h6 class="c-footer-landing__heading-2">lorem i</h6>
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <a class="c-footer-landing__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-landing__group-6">
              <h6 class="c-footer-landing__heading-2">lorem ips</h6>
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing__item-2">
                  <a class="c-footer-landing__link-4" href="#"></a>
                </li>
                <a class="c-footer-landing__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-landing__group-6"></div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-landing__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-landing__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-landing__columns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 112px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 40px 96px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__column {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-landing__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-landing__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__text-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
}

.c-footer-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 96px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__columns-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(7, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-landing__group-3 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-landing__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-landing__columns-3 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-landing__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-landing__text-3 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-landing__group-4 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-landing__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-landing__group-5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-landing__text-4 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-landing__inner-2 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 239.531px;
  height: 35px;
  max-width: 80%;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-landing__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-landing__text-5 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-landing__columns-4 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-landing__columns-5 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-landing__group-6 {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-landing__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-landing__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-landing__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-landing__link:hover {
  text-decoration-line: underline;
}

.c-footer-landing__link-2:hover {
  color: #030303;
}

.c-footer-landing__link-3:hover {
  color: #030303;
}

.c-footer-landing__button:hover {
  background-color: #007243;
}

.c-footer-landing__button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

Mobile anatomy

footer-landing-mobile: the component root, a <footer> (.c-footer-landing-mobile)
footer-landing-mobile-heading: heading, 6 characters (.c-footer-landing-mobile__heading)
footer-landing-mobile-group: inner block (.c-footer-landing-mobile__group)
footer-landing-mobile-columns: inner grid (.c-footer-landing-mobile__columns)
footer-landing-mobile-column: inner flex column (.c-footer-landing-mobile__column)
footer-landing-mobile-text: label text, 21 characters (.c-footer-landing-mobile__text, 4 instances)
footer-landing-mobile-link: link, 16-character label (.c-footer-landing-mobile__link)
footer-landing-mobile-list: inner flex column (.c-footer-landing-mobile__list)
footer-landing-mobile-item: inner flex row (.c-footer-landing-mobile__item, 3 instances)
footer-landing-mobile-logo: icon placeholder, 16px (.c-footer-landing-mobile__logo)
footer-landing-mobile-icon: icon placeholder, 16px (.c-footer-landing-mobile__icon, 2 instances)
footer-landing-mobile-group-2: inner block (.c-footer-landing-mobile__group-2)
footer-landing-mobile-inner: inner block (.c-footer-landing-mobile__inner), content not captured
footer-landing-mobile-group-3: inner block (.c-footer-landing-mobile__group-3, 4 instances)
footer-landing-mobile-group-4: inner flex column (.c-footer-landing-mobile__group-4)
footer-landing-mobile-icon-2: icon placeholder, 160x30px (.c-footer-landing-mobile__icon-2)
footer-landing-mobile-columns-2: inner flex row (.c-footer-landing-mobile__columns-2)
footer-landing-mobile-link-2: link (.c-footer-landing-mobile__link-2, 5 instances)
footer-landing-mobile-text-2: label text, 7 characters (.c-footer-landing-mobile__text-2, 6 instances)
footer-landing-mobile-group-5: inner block (.c-footer-landing-mobile__group-5, 6 instances)
footer-landing-mobile-icon-3: icon placeholder, 22px (.c-footer-landing-mobile__icon-3, 6 instances)
footer-landing-mobile-link-3: link (.c-footer-landing-mobile__link-3)
footer-landing-mobile-group-6: inner flex column (.c-footer-landing-mobile__group-6)
footer-landing-mobile-text-3: label text, 43 characters (.c-footer-landing-mobile__text-3)
footer-landing-mobile-group-7: inner flex row (.c-footer-landing-mobile__group-7)
footer-landing-mobile-button: button (.c-footer-landing-mobile__button)
footer-landing-mobile-text-4: label text, 9 characters (.c-footer-landing-mobile__text-4)
footer-landing-mobile-columns-3: inner grid (.c-footer-landing-mobile__columns-3)
footer-landing-mobile-columns-4: inner grid (.c-footer-landing-mobile__columns-4), content not captured
footer-landing-mobile-heading-2: heading, 7 characters (.c-footer-landing-mobile__heading-2, 3 instances)
footer-landing-mobile-list-2: inner group (.c-footer-landing-mobile__list-2, 3 instances), content not captured
footer-landing-mobile-item-2: inner group (.c-footer-landing-mobile__item-2, 28 instances), content not captured
footer-landing-mobile-link-4: link (.c-footer-landing-mobile__link-4, 29 instances), content not captured

Mobile recipe

HTML · CSS

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <h2 class="c-footer-landing-mobile__heading">lorem</h2>
    <div class="c-footer-landing-mobile__group">
      <div class="c-footer-landing-mobile__columns">
        <div class="c-footer-landing-mobile__column">
          <span class="c-footer-landing-mobile__text">lorem ipsum dolor sit</span>
          <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-landing-mobile__list">
          <li class="c-footer-landing-mobile__item">
            <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
            <span class="c-footer-landing-mobile__text">lorem ipsum</span>
          </li>
          <li class="c-footer-landing-mobile__item">
            <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-landing-mobile__text">lorem</span>
          </li>
          <li class="c-footer-landing-mobile__item">
            <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-landing-mobile__text">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-landing-mobile__group-2"></div>
    </div>
    <div class="c-footer-landing-mobile__inner">
      <div class="c-footer-landing-mobile__group-3">
        <div class="c-footer-landing-mobile__group-4">
          <span class="c-footer-landing-mobile__icon-2" aria-hidden="true"></span>
          <div class="c-footer-landing-mobile__columns-2">
            <a class="c-footer-landing-mobile__link-2" href="#">
              <span class="c-footer-landing-mobile__text-2">lorem i</span>
              <div class="c-footer-landing-mobile__group-5">
                <span class="c-footer-landing-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing-mobile__link-2" href="#">
              <span class="c-footer-landing-mobile__text-2">lorem</span>
              <div class="c-footer-landing-mobile__group-5">
                <span class="c-footer-landing-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing-mobile__link-2" href="#">
              <span class="c-footer-landing-mobile__text-2">lorem i</span>
              <div class="c-footer-landing-mobile__group-5">
                <span class="c-footer-landing-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing-mobile__link-2" href="#">
              <span class="c-footer-landing-mobile__text-2">lorem i</span>
              <div class="c-footer-landing-mobile__group-5">
                <span class="c-footer-landing-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing-mobile__link-2" href="#">
              <span class="c-footer-landing-mobile__text-2">lorem</span>
              <div class="c-footer-landing-mobile__group-5">
                <span class="c-footer-landing-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-landing-mobile__link-3" href="#">
              <span class="c-footer-landing-mobile__text-2">lorem ips</span>
              <div class="c-footer-landing-mobile__group-5">
                <span class="c-footer-landing-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-landing-mobile__group-6">
            <p class="c-footer-landing-mobile__text-3">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-landing-mobile__group-7"></div>
            <button class="c-footer-landing-mobile__button" type="button">
              <span class="c-footer-landing-mobile__text-4">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-landing-mobile__columns-3">
          <div class="c-footer-landing-mobile__columns-4">
            <div class="c-footer-landing-mobile__group-3">
              <h6 class="c-footer-landing-mobile__heading-2">lorem i</h6>
              <ul class="c-footer-landing-mobile__list-2">
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-landing-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-landing-mobile__group-3">
              <h6 class="c-footer-landing-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-landing-mobile__list-2">
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__item-2">
                  <a class="c-footer-landing-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-landing-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-landing-mobile__group-3">
              <h6 class="c-footer-landing-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-landing-mobile__list-2">
                <li class="c-footer-landing-mobile__item-2"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-landing-mobile__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-landing-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-landing-mobile__columns {
  display: grid;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 24px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-landing-mobile__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 64px 24px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing-mobile__group-4 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-landing-mobile__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-landing-mobile__columns-2 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-landing-mobile__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-landing-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-landing-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-landing-mobile__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-landing-mobile__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-landing-mobile__text-3 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-landing-mobile__group-7 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 342px;
  height: 33px;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-landing-mobile__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-landing-mobile__text-4 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-landing-mobile__columns-3 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-top: 48px;
}

.c-footer-landing-mobile__columns-4 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-landing-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-landing-mobile__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-landing-mobile__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-landing-mobile__link:hover {
  text-decoration-line: underline;
}

.c-footer-landing-mobile__link-2:hover {
  color: #030303;
}

.c-footer-landing-mobile__link-3:hover {
  color: #030303;
}

.c-footer-landing-mobile__button:hover {
  background-color: #007243;
}

.c-footer-landing-mobile__button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

footer-landing-link hover: text-decoration-line underline
footer-landing-link-2 hover (footer-landing-link-2-hover): color #030303
footer-landing-link-3 hover (footer-landing-link-3-hover): color #030303
footer-landing-button hover (footer-landing-button-hover): background-color #007243
footer-landing-button focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none
mobile, footer-landing-mobile-link hover: text-decoration-line underline
mobile, footer-landing-mobile-link-2 hover (footer-landing-mobile-link-2-hover): color #030303
mobile, footer-landing-mobile-link-3 hover (footer-landing-mobile-link-3-hover): color #030303
mobile, footer-landing-mobile-button hover (footer-landing-mobile-button-hover): background-color #007243
mobile, footer-landing-mobile-button focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, primary (3)

Verification: verified against the live page at desktop.

Anatomy

button-primary-3: the component root, a <a> (.c-button-primary-3)
button-primary-3-label: label text, 14 characters (.c-button-primary-3__label)

Recipe

HTML · CSS

<div class="c-button-primary-3-scope">
  <a class="c-button-primary-3" href="#">
    <span class="c-button-primary-3__label">lorem ipsum do</span>
  </a>
</div>

.c-button-primary-3-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-primary-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 42px;
  padding: 8px 16px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 9.72308px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-primary-3__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-primary-3:hover {
  background-color: #007243;
}

.c-button-primary-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-primary-3-hover): background-color #007243
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, primary (4)

Verification: verified against the live page at desktop.

Anatomy

button-primary-4: the component root, a <a> (.c-button-primary-4)
button-primary-4-label: label text, 11 characters (.c-button-primary-4__label)

Recipe

HTML · CSS

<div class="c-button-primary-4-scope">
  <a class="c-button-primary-4" href="#">
    <span class="c-button-primary-4__label">lorem ipsum</span>
  </a>
</div>

.c-button-primary-4-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-primary-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 42px;
  padding: 8px 16px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 9.72308px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-primary-4__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-primary-4:hover {
  background-color: #007243;
}

.c-button-primary-4:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-primary-4-hover): background-color #007243
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-2: the component root, a <a> (.c-button-secondary-2)
button-secondary-2-label: label text, 10 characters (.c-button-secondary-2__label)

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <a class="c-button-secondary-2" href="#">
    <span class="c-button-secondary-2__label">lorem ipsu</span>
  </a>
</div>

.c-button-secondary-2-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 42px;
  padding: 8px 16px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 9.72308px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary-2__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary-2:hover {
  background-color: #03030307;
}

.c-button-secondary-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-secondary-2-hover): background-color #03030307
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, secondary (3)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-3: the component root, a <button> (.c-button-secondary-3)
button-secondary-3-label: label text, 13 characters (.c-button-secondary-3__label)
button-secondary-3-group: inner flex row (.c-button-secondary-3__group)
button-secondary-3-icon: icon placeholder, 14px (.c-button-secondary-3__icon)

Recipe

HTML · CSS

<div class="c-button-secondary-3-scope">
  <button class="c-button-secondary-3" type="button">
    <span class="c-button-secondary-3__label">lorem ipsum d</span>
    <div class="c-button-secondary-3__group">
      <span class="c-button-secondary-3__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-secondary-3-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #030303;
  color: #FDFDFD;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary-3__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.c-button-secondary-3__group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-button-secondary-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-button-secondary-3:hover {
  background-color: #030303E6;
}

.c-button-secondary-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px;
  outline: none;
}

States

hover (button-secondary-3-hover): background-color #030303E6
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, outline none

Button, secondary (4)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-4: the component root, a <a> (.c-button-secondary-4)
button-secondary-4-label: label text, 27 characters (.c-button-secondary-4__label)

Recipe

HTML · CSS

<div class="c-button-secondary-4-scope">
  <a class="c-button-secondary-4" href="#">
    <span class="c-button-secondary-4__label">lorem ipsum dolor sit amet</span>
  </a>
</div>

.c-button-secondary-4-scope {
  background-color: #FFFFFF;
  color: #464646;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary-4__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary-4:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none

Card (4)

Verification: flagged, the render matched 95% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid; the recipe carries the values they all share
card-4: the component root, a <div> (.c-card-4)
card-4-group: inner block (.c-card-4__group)
card-4-group-2: inner flex row (.c-card-4__group-2)
card-4-group-3: inner flex row (.c-card-4__group-3)
card-4-title: heading, 4 characters (.c-card-4__title)
card-4-group-4: inner flex column (.c-card-4__group-4)
card-4-body: label text, 47 characters (.c-card-4__body)
card-4-link: link (.c-card-4__link)
card-4-text: label text, 14 characters (.c-card-4__text)
card-4-group-5: inner flex row (.c-card-4__group-5)
card-4-group-6: inner flex column (.c-card-4__group-6)
card-4-group-7: inner flex row (.c-card-4__group-7), content not captured
card-4-group-8: inner flex column (.c-card-4__group-8), content not captured
card-4-body-2: label text, 17 characters (.c-card-4__body-2)
card-4-list: inner group (.c-card-4__list)
card-4-item: inner flex column (.c-card-4__item, 7 instances)
card-4-group-9: inner flex row (.c-card-4__group-9, 7 instances), content not captured
card-4-body-3: label text, 23 characters (.c-card-4__body-3, 3 instances)
card-4-group-10: inner flex column (.c-card-4__group-10)
card-4-group-11: inner block (.c-card-4__group-11)
card-4-body-4: label text, 80 characters (.c-card-4__body-4)

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <div class="c-card-4">
    <div class="c-card-4__group">
      <div class="c-card-4__group-2">
        <div class="c-card-4__group-3">
          <h3 class="c-card-4__title">lore</h3>
        </div>
      </div>
      <div class="c-card-4__group-4">
        <p class="c-card-4__body">lorem ipsum dolor sit amet consectetur adipisci</p>
      </div>
      <a class="c-card-4__link" href="#">
        <span class="c-card-4__text">lorem ipsum do</span>
      </a>
      <div class="c-card-4__group-5">
        <div class="c-card-4__group-6">
          <div class="c-card-4__group-7"></div>
        </div>
      </div>
    </div>
    <div class="c-card-4__group-8">
      <p class="c-card-4__body-2">lorem ipsum dolor</p>
      <ul class="c-card-4__list">
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
        </li>
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
        </li>
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
          <p class="c-card-4__body-3">lorem ipsum dolor sit a</p>
        </li>
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
          <p class="c-card-4__body-3"></p>
        </li>
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
          <p class="c-card-4__body-3"></p>
        </li>
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
        </li>
        <li class="c-card-4__item">
          <div class="c-card-4__group-9"></div>
        </li>
      </ul>
      <div class="c-card-4__group-10">
        <div class="c-card-4__group-11">
          <p class="c-card-4__body-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-4-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FFFFFF;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card-4__group {
  display: block;
  box-sizing: border-box;
  padding-top: 24px;
  padding-right: 16px;
  padding-left: 16px;
}

.c-card-4__group-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-card-4__group-3 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding-bottom: 8px;
}

.c-card-4__title {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  margin: 0px;
  font-family: "Source Code Pro", "Source Code Pro Fallback", "Source Code Pro", "Office Code Pro", Menlo, monospace, "Source Code Pro", ui-monospace, Menlo, monospace;
  font-size: 22px;
  font-weight: 450;
  line-height: 29.3333px;
  text-transform: uppercase;
}

.c-card-4__group-4 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.c-card-4__body {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  color: #464646;
  font-size: 14px;
  line-height: 20px;
}

.c-card-4__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 8px 16px;
  position: relative;
  border-radius: 9.72308px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-card-4__text {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-card-4__group-5 {
  display: flex;
  align-items: baseline;
  box-sizing: border-box;
  min-height: 175px;
  font-size: 34px;
  line-height: 37.7778px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-card-4__group-6 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}

.c-card-4__group-7 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-card-4__group-8 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  padding: 24px 16px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.c-card-4__body-2 {
  display: block;
  box-sizing: border-box;
  margin: 8px 0px 16px;
  color: #696969;
  font-size: 13px;
  line-height: 19.5px;
}

.c-card-4__list {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  color: #696969;
  font-size: 13px;
  line-height: 19.5px;
  list-style-type: none;
}

.c-card-4__item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-card-4__group-9 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-card-4__body-3 {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 0px 24px;
}

.c-card-4__group-10 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  max-width: 663.586px;
  color: #464646;
  line-height: 28px;
  margin-top: auto;
}

.c-card-4__group-11 {
  display: block;
  box-sizing: border-box;
  margin-top: 48px;
}

.c-card-4__body-4 {
  display: block;
  box-sizing: border-box;
  margin: 16.25px 0px 0px;
  color: #696969;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  white-space: pre-wrap;
}

.c-card-4:hover {
  margin: 0px;
  border-radius: 16px 0px 0px 16px;
  border-top: 1px solid #03030315;
  border-right: 0;
  border-bottom: 1px solid #03030315;
  border-left: 1px solid #03030315;
}

.c-card-4:focus {
  margin: 0px;
  border-radius: 16px 0px 0px 16px;
  border-top: 1px solid #03030315;
  border-right: 0;
  border-bottom: 1px solid #03030315;
  border-left: 1px solid #03030315;
}

States

hover: margin 0px, border-radius 16px 0px 0px 16px, border-top 1px solid #03030315, border-right 0, border-bottom 1px solid #03030315, border-left 1px solid #03030315
focus: margin 0px, border-radius 16px 0px 0px 16px, border-top 1px solid #03030315, border-right 0, border-bottom 1px solid #03030315, border-left 1px solid #03030315

Table

Verification: flagged, the table-row height did not reproduce the measured 26px after 2 correction attempts.

Anatomy

table: the component root, a <table> (.c-table)
table-head: inner group (.c-table__head)
table-row: inner group (.c-table__row, 4 instances), content not captured
table-header-cell: label text, 12 characters (.c-table__header-cell, 6 instances)
table-body: inner group (.c-table__body), content not captured
table-cell: label text, 36 characters (.c-table__cell)
table-row-2: inner group (.c-table__row-2)
table-cell-2: label text, 5 characters (.c-table__cell-2, 23 instances)
table-row-3: inner group (.c-table__row-3)

Recipe

HTML · CSS

<div class="c-table-scope">
  <table class="c-table">
    <thead class="c-table__head">
      <tr class="c-table__row">
        <th class="c-table__header-cell">lorem ipsum</th>
        <th class="c-table__header-cell">lorem ips</th>
        <th class="c-table__header-cell">lorem i</th>
        <th class="c-table__header-cell">lorem</th>
        <th class="c-table__header-cell">lorem ipsum dolor s</th>
        <th class="c-table__header-cell">lorem ipsum dolor s</th>
      </tr>
    </thead>
    <tbody class="c-table__body">
      <tr class="c-table__row">
        <td class="c-table__cell">lorem ipsum dolor sit amet consectet</td>
      </tr>
      <tr class="c-table__row-2">
        <td class="c-table__cell-2">lorem</td>
        <td class="c-table__cell-2">lor</td>
        <td class="c-table__cell-2">lorem ipsum do</td>
        <td class="c-table__cell-2">lore</td>
        <td class="c-table__cell-2">lo</td>
        <td class="c-table__cell-2">lor</td>
      </tr>
      <tr class="c-table__row">
        <td class="c-table__cell-2">lorem</td>
        <td class="c-table__cell-2">lor</td>
        <td class="c-table__cell-2">lorem ipsum do</td>
        <td class="c-table__cell-2">lore</td>
        <td class="c-table__cell-2">lo</td>
        <td class="c-table__cell-2">lor</td>
      </tr>
      <tr class="c-table__row-3">
        <td class="c-table__cell-2">lorem</td>
        <td class="c-table__cell-2">lor</td>
        <td class="c-table__cell-2">lorem ipsum do</td>
        <td class="c-table__cell-2">lore</td>
        <td class="c-table__cell-2">lor</td>
        <td class="c-table__cell-2">lor</td>
      </tr>
      <tr class="c-table__row">
        <td class="c-table__cell-2">lorem</td>
        <td class="c-table__cell-2">lore</td>
        <td class="c-table__cell-2">lorem ipsum dolor s</td>
        <td class="c-table__cell-2">lore</td>
        <td class="c-table__cell-2">lor</td>
      </tr>
    </tbody>
  </table>
</div>

.c-table-scope {
  background-color: #FFFFFF;
  color: #464646;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-table {
  display: table;
  border-collapse: collapse;
  border-spacing: 2px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  border-bottom-right-radius: 5.33333px;
  border-bottom-left-radius: 5.33333px;
}

.c-table__head {
  display: table-header-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table__row {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table__header-cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 12px;
  vertical-align: middle;
  font-weight: 500;
  text-align: left;
}

.c-table__body {
  display: table-row-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table__cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 4px 12px;
  vertical-align: middle;
  background-color: #03030325;
  margin-right: -4px;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #03030325;
}

.c-table__row-2 {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: #FFFFFF;
  border: 4px solid #03030325;
  border-radius: 10.6667px;
}

.c-table__cell-2 {
  display: table-cell;
  box-sizing: border-box;
  padding: 12px;
  vertical-align: middle;
}

.c-table__row-3 {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: #FFFFFF;
  border-radius: 10.6667px;
}

States

No hover or focus change was observed.

Table (2)

Verification: flagged, the table-2 height did not reproduce the measured 177px after 2 correction attempts.

Anatomy

table-2: the component root, a <table> (.c-table-2)
table-2-head: inner group (.c-table-2__head)
table-2-row: inner group (.c-table-2__row)
table-2-header-cell: inner group (.c-table-2__header-cell)
table-2-header-cell-2: label text, 8 characters (.c-table-2__header-cell-2, 5 instances)
table-2-body: inner group (.c-table-2__body)
table-2-row-2: inner group (.c-table-2__row-2, 2 instances)
table-2-cell: inner group (.c-table-2__cell, 4 instances)
table-2-text: label text, 15 characters (.c-table-2__text, 2 instances)
table-2-break: line break (.c-table-2__break, 2 instances)
table-2-text-2: label text, 37 characters (.c-table-2__text-2, 2 instances)
table-2-cell-2: label text, 32 characters (.c-table-2__cell-2, 6 instances)
table-2-cell-3: label text, 5 characters (.c-table-2__cell-3, 2 instances)

Recipe

HTML · CSS

<div class="c-table-2-scope">
  <table class="c-table-2">
    <thead class="c-table-2__head">
      <tr class="c-table-2__row">
        <th class="c-table-2__header-cell"></th>
        <th class="c-table-2__header-cell-2">lorem ip</th>
        <th class="c-table-2__header-cell-2">lore</th>
        <th class="c-table-2__header-cell-2">lore</th>
        <th class="c-table-2__header-cell-2">lorem ipsu</th>
        <th class="c-table-2__header-cell-2">lorem ipsu</th>
      </tr>
    </thead>
    <tbody class="c-table-2__body">
      <tr class="c-table-2__row-2">
        <td class="c-table-2__cell">
          <span class="c-table-2__text">lorem ipsum dol</span>
          <br class="c-table-2__break">
          <span class="c-table-2__text-2">lorem ipsum dolor sit amet consectetu</span>
        </td>
        <td class="c-table-2__cell">lorem</td>
        <td class="c-table-2__cell-2">lorem ipsum dolor sit amet conse</td>
        <td class="c-table-2__cell-2">lorem ipsum dolor sit amet consectetur a</td>
        <td class="c-table-2__cell-2">lorem ipsum dolor sit amet consectetur</td>
        <td class="c-table-2__cell-3">lorem</td>
      </tr>
      <tr class="c-table-2__row-2">
        <td class="c-table-2__cell">
          <span class="c-table-2__text">lorem ipsum dolo</span>
          <br class="c-table-2__break">
          <span class="c-table-2__text-2">lorem ipsum dolor sit amet consec</span>
        </td>
        <td class="c-table-2__cell">lorem</td>
        <td class="c-table-2__cell-2">lorem ipsum d</td>
        <td class="c-table-2__cell-2">lorem ipsum dol</td>
        <td class="c-table-2__cell-2">lorem ipsum dolor sit amet con</td>
        <td class="c-table-2__cell-3">lorem i</td>
      </tr>
    </tbody>
  </table>
</div>

.c-table-2-scope {
  background-color: #FFFFFF;
  color: #464646;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-table-2 {
  display: table;
  border-collapse: collapse;
  border-spacing: 2px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  border-bottom-right-radius: 5.33333px;
  border-bottom-left-radius: 5.33333px;
}

.c-table-2__head {
  display: table-header-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table-2__row {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table-2__header-cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 0px;
  vertical-align: middle;
  font-weight: 700;
  text-align: center;
}

.c-table-2__header-cell-2 {
  display: table-cell;
  box-sizing: border-box;
  padding: 12px;
  vertical-align: middle;
  font-weight: 500;
  text-align: left;
}

.c-table-2__body {
  display: table-row-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table-2__row-2 {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: #FFFFFF;
  border-radius: 10.6667px;
}

.c-table-2__cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 12px;
  vertical-align: middle;
}

.c-table-2__text {
  display: inline;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 22.5px;
}

.c-table-2__text-2 {
  display: inline;
  box-sizing: border-box;
  color: #696969;
}

.c-table-2__cell-2 {
  display: table-cell;
  box-sizing: border-box;
  padding: 12px;
  vertical-align: middle;
  white-space: pre-line;
}

.c-table-2__cell-3 {
  display: table-cell;
  box-sizing: border-box;
  padding: 0px;
  vertical-align: middle;
}

States

No hover or focus change was observed.

Table (3)

Verification: flagged, the table-3 height did not reproduce the measured 4935px after 2 correction attempts.

Anatomy

table-3: the component root, a <table> (.c-table-3)
table-3-caption: label text, 23 characters (.c-table-3__caption)
table-3-head: inner group (.c-table-3__head)
table-3-row: inner group (.c-table-3__row)
table-3-header-cell: inner group (.c-table-3__header-cell)
table-3-text: label text, 10 characters (.c-table-3__text)
table-3-group: inner group (.c-table-3__group)
table-3-header-cell-2: inner group (.c-table-3__header-cell-2, 4 instances)
table-3-group-2: inner flex column (.c-table-3__group-2, 4 instances), content not captured
table-3-body: inner group (.c-table-3__body), content not captured
table-3-row-2: inner group (.c-table-3__row-2, 3 instances), content not captured
table-3-header-cell-3: inner group (.c-table-3__header-cell-3)
table-3-group-3: inner flex row (.c-table-3__group-3), content not captured
table-3-cell: inner group (.c-table-3__cell, 4 instances)
table-3-header-cell-4: inner flex row (.c-table-3__header-cell-4, 2 instances)
table-3-text-2: label text, 27 characters (.c-table-3__text-2, 2 instances)
table-3-button: button (.c-table-3__button), content not captured
table-3-cell-2: inner group (.c-table-3__cell-2, 5 instances)
table-3-group-4: inner group (.c-table-3__group-4, 5 instances), content not captured

Recipe

HTML · CSS

<div class="c-table-3-scope">
  <table class="c-table-3">
    <caption class="c-table-3__caption">lorem ipsum dolor sit a</caption>
    <thead class="c-table-3__head">
      <tr class="c-table-3__row">
        <th class="c-table-3__header-cell">
          <span class="c-table-3__text">lorem ipsu</span>
          <span class="c-table-3__group"></span>
        </th>
        <th class="c-table-3__header-cell-2">
          <span class="c-table-3__group-2"></span>
        </th>
        <th class="c-table-3__header-cell-2">
          <span class="c-table-3__group-2"></span>
        </th>
        <th class="c-table-3__header-cell-2">
          <span class="c-table-3__group-2"></span>
        </th>
        <th class="c-table-3__header-cell-2">
          <span class="c-table-3__group-2"></span>
        </th>
      </tr>
    </thead>
    <tbody class="c-table-3__body">
      <tr class="c-table-3__row-2">
        <th class="c-table-3__header-cell-3">
          <div class="c-table-3__group-3"></div>
        </th>
        <td class="c-table-3__cell"></td>
        <td class="c-table-3__cell"></td>
        <td class="c-table-3__cell"></td>
        <td class="c-table-3__cell"></td>
      </tr>
      <tr class="c-table-3__row-2">
        <th class="c-table-3__header-cell-4">
          <span class="c-table-3__text-2">lorem ipsum dolor sit amet</span>
          <button class="c-table-3__button" type="button"></button>
        </th>
        <td class="c-table-3__cell-2">
          <span class="c-table-3__group-4"></span>
        </td>
        <td class="c-table-3__cell-2">
          <span class="c-table-3__group-4"></span>
        </td>
        <td class="c-table-3__cell-2">
          <span class="c-table-3__group-4"></span>
        </td>
        <td class="c-table-3__cell-2">
          <span class="c-table-3__group-4"></span>
        </td>
      </tr>
      <tr class="c-table-3__row-2">
        <th class="c-table-3__header-cell-4">
          <span class="c-table-3__text-2">lorem ipsum dolor sit</span>
        </th>
        <td class="c-table-3__cell-2">
          <span class="c-table-3__group-4"></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

.c-table-3-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-table-3 {
  display: table;
  border-collapse: collapse;
  border-spacing: 2px;
  box-sizing: border-box;
  height: 1px;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-table-3__caption {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: -webkit-center;
  white-space: nowrap;
}

.c-table-3__head {
  display: table-header-group;
  box-sizing: border-box;
  position: sticky;
  top: 62px;
  z-index: 10;
  vertical-align: middle;
  background-color: #FDFDFD;
}

.c-table-3__row {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table-3__header-cell {
  display: table-cell;
  box-sizing: border-box;
  width: 33.3333%;
  padding: 8px 24px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  text-align: left;
}

.c-table-3__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-table-3__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.c-table-3__header-cell-2 {
  display: table-cell;
  box-sizing: border-box;
  width: 25%;
  padding: 0px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  text-align: left;
}

.c-table-3__group-2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  padding-top: 8px;
  padding-right: 8px;
  padding-left: 24px;
}

.c-table-3__body {
  display: table-row-group;
  box-sizing: border-box;
  vertical-align: middle;
}

.c-table-3__row-2 {
  display: table-row;
  box-sizing: border-box;
  vertical-align: middle;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-table-3__header-cell-3 {
  display: table-cell;
  box-sizing: border-box;
  padding: 12px 0px 12px 24px;
  position: sticky;
  top: 135px;
  z-index: 10;
  vertical-align: middle;
  background-color: #FDFDFD;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}

.c-table-3__group-3 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.c-table-3__cell {
  display: table-cell;
  box-sizing: border-box;
  padding: 20px 24px;
  vertical-align: middle;
  background-color: #FDFDFD;
}

.c-table-3__header-cell-4 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 24px;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  text-align: left;
}

.c-table-3__text-2 {
  display: block;
  box-sizing: border-box;
  margin-right: 4px;
}

.c-table-3__button {
  display: flex;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #030303;
  border: 0;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-table-3__cell-2 {
  display: table-cell;
  box-sizing: border-box;
  padding: 20px 8px 20px 24px;
  vertical-align: middle;
  text-align: center;
}

.c-table-3__group-4 {
  display: inline;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}

States

No hover or focus change was observed.

Verification: flagged, the nav-menu-group-2 y did not reproduce the measured 64px after 2 correction attempts.

Anatomy

nav-menu: the component root, a <nav> (.c-nav-menu)
nav-menu-group: inner block (.c-nav-menu__group)
nav-menu-list: inner flex row (.c-nav-menu__list)
nav-menu-item: inner group (.c-nav-menu__item, 6 instances)
nav-menu-button: button, 7-character label (.c-nav-menu__button, 3 instances), content not captured
nav-menu-link: link (.c-nav-menu__link, 3 instances), content not captured
nav-menu-group-2: inner flex row (.c-nav-menu__group-2)

Recipe

HTML · CSS

<div class="c-nav-menu-scope">
  <nav class="c-nav-menu">
    <div class="c-nav-menu__group">
      <ul class="c-nav-menu__list">
        <li class="c-nav-menu__item">
          <button class="c-nav-menu__button" type="button">lorem i</button>
        </li>
        <li class="c-nav-menu__item">
          <button class="c-nav-menu__button" type="button">lorem ipsu</button>
        </li>
        <li class="c-nav-menu__item">
          <button class="c-nav-menu__button" type="button">lorem ips</button>
        </li>
        <li class="c-nav-menu__item">
          <a class="c-nav-menu__link" href="#"></a>
        </li>
        <li class="c-nav-menu__item">
          <a class="c-nav-menu__link" href="#"></a>
        </li>
        <li class="c-nav-menu__item">
          <a class="c-nav-menu__link" href="#"></a>
        </li>
      </ul>
    </div>
    <div class="c-nav-menu__group-2"></div>
  </nav>
</div>

.c-nav-menu-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-nav-menu {
  display: inline-flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  padding-left: 32px;
}

.c-nav-menu__group {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-nav-menu__list {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav-menu__item {
  display: list-item;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-nav-menu__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-nav-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  color: #030303;
  border-radius: 8px;
  cursor: pointer;
  line-height: 14px;
  text-decoration-line: none;
}

.c-nav-menu__group-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  right: 0px;
  left: 0px;
}

States

No hover or focus change was observed.

Tabs (2)

Verification: verified against the live page at desktop.

Anatomy

tab-2: the component root, a <button> (.c-tab-2), 3-character label

Recipe

HTML · CSS

<div class="c-tab-2-scope">
  <button class="c-tab-2" type="button">lor</button>
</div>

.c-tab-2-scope {
  background-color: #03030307;
  color: #464646;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-tab-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 24px;
  padding: 4px 12px;
  background-color: #0303030E;
  color: #030303;
  border: 0;
  border-radius: 8px;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-tab-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Tabs (3)

Verification: verified against the live page at desktop.

Anatomy

tab-3: the component root, a <button> (.c-tab-3), 4-character label

Recipe

HTML · CSS

<div class="c-tab-3-scope">
  <button class="c-tab-3" type="button">lore</button>
</div>

.c-tab-3-scope {
  background-color: #03030307;
  color: #464646;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-tab-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 24px;
  padding: 4px 12px;
  background-color: transparent;
  color: #464646;
  border: 0;
  border-radius: 8px;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-tab-3:hover {
  background-color: #03030307;
}

.c-tab-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (tab-3-hover): background-color #03030307
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Input

Verification: flagged, the render matched 92% of the original pixels, below the 97% required on hover after 2 correction attempts.

Anatomy

input: the component root, a <input> (.c-input), 11-character placeholder

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="search" placeholder="lorem ipsum">
</div>

.c-input-scope {
  background-color: #00000004;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
}

.c-input {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 256px;
  height: 34px;
  padding: 8px 12px 8px 8px;
  margin: -1px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: text;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-input:hover {
  min-width: 0px;
  min-height: 0px;
}

.c-input:focus {
  min-width: 0px;
  min-height: 0px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 0px, #30BA798C 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover: min-width 0px, min-height 0px
focus: min-width 0px, min-height 0px, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 0px, #30BA798C 0px 0px 0px 0px, transparent 0px 0px 0px 0px, outline none

Input (2)

Verification: flagged, the render matched 92% of the original pixels, below the 97% required after 2 correction attempts.

Anatomy

input-2: the component root, a <input> (.c-input-2), 10-character placeholder

Recipe

HTML · CSS

<div class="c-input-2-scope">
  <input class="c-input-2" type="email" placeholder="lorem ipsu">
</div>

.c-input-2-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-input-2 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 240px;
  height: 35px;
  max-width: 80%;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-input-2:focus {
  min-width: 0px;
  min-height: 0px;
  border: 1px solid #0303034C;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

focus: min-width 0px, min-height 0px, border 1px solid #0303034C, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Stat link

Verification: verified against the live page at desktop.

Anatomy

stat-link: the component root, a <a> (.c-stat-link)
stat-link-group: inner group (.c-stat-link__group)
stat-link-group-2: inner flex row (.c-stat-link__group-2)
stat-link-icon: icon placeholder, 24px (.c-stat-link__icon)
stat-link-text: label text, 6 characters (.c-stat-link__text)

Recipe

HTML · CSS

<div class="c-stat-link-scope">
  <a class="c-stat-link" href="#">
    <span class="c-stat-link__group">
      <span class="c-stat-link__group-2">
        <span class="c-stat-link__icon" aria-hidden="true"></span>
        <span class="c-stat-link__text">lorem</span>
      </span>
    </span>
  </a>
</div>

.c-stat-link-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-stat-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  color: #464646;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-stat-link__group {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-stat-link__group-2 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-stat-link__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-stat-link:hover {
  background-color: #0303030A;
  color: #030303;
}

.c-stat-link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (stat-link-hover): background-color #0303030A, color #030303
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

View toggle

Verification: verified against the live page at desktop.

Anatomy

view-toggle: the component root, a <button> (.c-view-toggle)
view-toggle-group: inner group (.c-view-toggle__group)
view-toggle-group-2: inner group (.c-view-toggle__group-2)
view-toggle-icon: icon placeholder, 14px (.c-view-toggle__icon)

Recipe

HTML · CSS

<div class="c-view-toggle-scope">
  <button class="c-view-toggle" type="button">
    <span class="c-view-toggle__group"></span>
    <span class="c-view-toggle__group-2">
      <span class="c-view-toggle__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-view-toggle-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-view-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 0;
  border-radius: 5.33333px;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-view-toggle__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  border: 1px solid #03030315;
  border-radius: 5.33333px;
}

.c-view-toggle__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.c-view-toggle__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

View toggle (2)

Verification: verified against the live page at desktop.

Anatomy

view-toggle-2: the component root, a <button> (.c-view-toggle-2)
view-toggle-2-group: inner group (.c-view-toggle-2__group)
view-toggle-2-icon: icon placeholder, 14px (.c-view-toggle-2__icon)

Recipe

HTML · CSS

<div class="c-view-toggle-2-scope">
  <button class="c-view-toggle-2" type="button">
    <span class="c-view-toggle-2__group">
      <span class="c-view-toggle-2__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-view-toggle-2-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-view-toggle-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #464646;
  border: 0;
  border-radius: 5.33333px;
  cursor: default;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-view-toggle-2__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.c-view-toggle-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-view-toggle-2:hover {
  color: #030303;
}

States

hover (view-toggle-2-hover): color #030303

Verification: desktop flagged, the footer-inner-inner height did not reproduce the measured 996px after 2 correction attempts; mobile flagged, the footer-inner-mobile-inner height did not reproduce the measured 1860px after 2 correction attempts.

Variant observed on https://supabase.com/blog.

Anatomy

footer-inner: the component root, a <footer> (.c-footer-inner)
footer-inner-heading: heading, 6 characters (.c-footer-inner__heading)
footer-inner-group: inner block (.c-footer-inner__group)
footer-inner-columns: inner flex row (.c-footer-inner__columns)
footer-inner-column: inner flex row (.c-footer-inner__column)
footer-inner-text: label text, 21 characters (.c-footer-inner__text, 4 instances)
footer-inner-link: link, 16-character label (.c-footer-inner__link)
footer-inner-list: inner flex row (.c-footer-inner__list)
footer-inner-item: inner flex row (.c-footer-inner__item, 3 instances)
footer-inner-logo: icon placeholder, 16px (.c-footer-inner__logo)
footer-inner-text-2: label text, 9 characters (.c-footer-inner__text-2, 3 instances)
footer-inner-icon: icon placeholder, 16px (.c-footer-inner__icon, 2 instances)
footer-inner-group-2: inner block (.c-footer-inner__group-2)
footer-inner-inner: inner block (.c-footer-inner__inner), content not captured
footer-inner-columns-2: inner grid (.c-footer-inner__columns-2)
footer-inner-group-3: inner flex column (.c-footer-inner__group-3)
footer-inner-icon-2: icon placeholder, 160x30px (.c-footer-inner__icon-2)
footer-inner-columns-3: inner flex row (.c-footer-inner__columns-3)
footer-inner-link-2: link (.c-footer-inner__link-2, 5 instances)
footer-inner-text-3: label text, 7 characters (.c-footer-inner__text-3, 6 instances)
footer-inner-group-4: inner block (.c-footer-inner__group-4, 6 instances)
footer-inner-icon-3: icon placeholder, 22px (.c-footer-inner__icon-3, 6 instances)
footer-inner-link-3: link (.c-footer-inner__link-3)
footer-inner-group-5: inner flex column (.c-footer-inner__group-5)
footer-inner-text-4: label text, 43 characters (.c-footer-inner__text-4)
footer-inner-inner-2: inner flex row (.c-footer-inner__inner-2)
footer-inner-cta: the button-primary button (.c-footer-inner__cta)
footer-inner-text-5: label text, 9 characters (.c-footer-inner__text-5)
footer-inner-columns-4: inner grid (.c-footer-inner__columns-4)
footer-inner-columns-5: inner grid (.c-footer-inner__columns-5), content not captured
footer-inner-group-6: inner block (.c-footer-inner__group-6, 3 instances), content not captured
footer-inner-heading-2: heading, 7 characters (.c-footer-inner__heading-2, 2 instances)
footer-inner-list-2: inner group (.c-footer-inner__list-2, 2 instances)
footer-inner-item-2: inner group (.c-footer-inner__item-2, 27 instances)
footer-inner-link-4: link (.c-footer-inner__link-4, 29 instances), content not captured

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <h2 class="c-footer-inner__heading">lorem</h2>
    <div class="c-footer-inner__group">
      <div class="c-footer-inner__columns">
        <div class="c-footer-inner__column">
          <span class="c-footer-inner__text">lorem ipsum dolor sit</span>
          <a class="c-footer-inner__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-inner__list">
          <li class="c-footer-inner__item">
            <span class="c-footer-inner__logo" aria-hidden="true"></span>
            <span class="c-footer-inner__text">lorem ipsum</span>
            <span class="c-footer-inner__text-2">lorem ips</span>
          </li>
          <li class="c-footer-inner__item">
            <span class="c-footer-inner__icon" aria-hidden="true"></span>
            <span class="c-footer-inner__text">lorem</span>
            <span class="c-footer-inner__text-2">lorem ips</span>
          </li>
          <li class="c-footer-inner__item">
            <span class="c-footer-inner__icon" aria-hidden="true"></span>
            <span class="c-footer-inner__text">lorem ips</span>
            <span class="c-footer-inner__text-2">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-inner__group-2"></div>
    </div>
    <div class="c-footer-inner__inner">
      <div class="c-footer-inner__columns-2">
        <div class="c-footer-inner__group-3">
          <span class="c-footer-inner__icon-2" aria-hidden="true"></span>
          <div class="c-footer-inner__columns-3">
            <a class="c-footer-inner__link-2" href="#">
              <span class="c-footer-inner__text-3">lorem i</span>
              <div class="c-footer-inner__group-4">
                <span class="c-footer-inner__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner__link-2" href="#">
              <span class="c-footer-inner__text-3">lorem</span>
              <div class="c-footer-inner__group-4">
                <span class="c-footer-inner__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner__link-2" href="#">
              <span class="c-footer-inner__text-3">lorem i</span>
              <div class="c-footer-inner__group-4">
                <span class="c-footer-inner__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner__link-2" href="#">
              <span class="c-footer-inner__text-3">lorem i</span>
              <div class="c-footer-inner__group-4">
                <span class="c-footer-inner__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner__link-2" href="#">
              <span class="c-footer-inner__text-3">lorem</span>
              <div class="c-footer-inner__group-4">
                <span class="c-footer-inner__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner__link-3" href="#">
              <span class="c-footer-inner__text-3">lorem ips</span>
              <div class="c-footer-inner__group-4">
                <span class="c-footer-inner__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-inner__group-5">
            <p class="c-footer-inner__text-4">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-inner__inner-2"></div>
            <button class="c-footer-inner__cta" type="button">
              <span class="c-footer-inner__text-5">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-inner__columns-4">
          <div class="c-footer-inner__columns-5">
            <div class="c-footer-inner__group-6">
              <h6 class="c-footer-inner__heading-2">lorem i</h6>
              <ul class="c-footer-inner__list-2">
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner__group-6">
              <h6 class="c-footer-inner__heading-2">lorem ips</h6>
              <ul class="c-footer-inner__list-2">
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner__item-2">
                  <a class="c-footer-inner__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner__group-6"></div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-inner__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner__columns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 112px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 40px 96px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__column {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-inner__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner__text-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
}

.c-footer-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-inner__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 96px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__columns-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(7, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner__group-3 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-inner__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner__columns-3 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner__text-3 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-inner__group-4 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-inner__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner__group-5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner__text-4 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-inner__inner-2 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 239.531px;
  height: 35px;
  max-width: 80%;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-inner__text-5 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-inner__columns-4 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner__columns-5 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner__group-6 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-inner__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-inner__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner__cta:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

Mobile anatomy

footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)
footer-inner-mobile-heading: heading, 6 characters (.c-footer-inner-mobile__heading)
footer-inner-mobile-group: inner block (.c-footer-inner-mobile__group)
footer-inner-mobile-columns: inner grid (.c-footer-inner-mobile__columns)
footer-inner-mobile-column: inner flex column (.c-footer-inner-mobile__column)
footer-inner-mobile-text: label text, 21 characters (.c-footer-inner-mobile__text, 4 instances)
footer-inner-mobile-link: link, 16-character label (.c-footer-inner-mobile__link)
footer-inner-mobile-list: inner flex column (.c-footer-inner-mobile__list)
footer-inner-mobile-item: inner flex row (.c-footer-inner-mobile__item, 3 instances)
footer-inner-mobile-logo: icon placeholder, 16px (.c-footer-inner-mobile__logo)
footer-inner-mobile-icon: icon placeholder, 16px (.c-footer-inner-mobile__icon, 2 instances)
footer-inner-mobile-group-2: inner block (.c-footer-inner-mobile__group-2)
footer-inner-mobile-inner: inner block (.c-footer-inner-mobile__inner), content not captured
footer-inner-mobile-group-3: inner block (.c-footer-inner-mobile__group-3, 4 instances)
footer-inner-mobile-group-4: inner flex column (.c-footer-inner-mobile__group-4)
footer-inner-mobile-icon-2: icon placeholder, 160x30px (.c-footer-inner-mobile__icon-2)
footer-inner-mobile-columns-2: inner flex row (.c-footer-inner-mobile__columns-2)
footer-inner-mobile-link-2: link (.c-footer-inner-mobile__link-2, 5 instances)
footer-inner-mobile-text-2: label text, 7 characters (.c-footer-inner-mobile__text-2, 6 instances)
footer-inner-mobile-group-5: inner block (.c-footer-inner-mobile__group-5, 6 instances)
footer-inner-mobile-icon-3: icon placeholder, 22px (.c-footer-inner-mobile__icon-3, 6 instances)
footer-inner-mobile-link-3: link (.c-footer-inner-mobile__link-3)
footer-inner-mobile-group-6: inner flex column (.c-footer-inner-mobile__group-6)
footer-inner-mobile-text-3: label text, 43 characters (.c-footer-inner-mobile__text-3)
footer-inner-mobile-group-7: inner flex row (.c-footer-inner-mobile__group-7)
footer-inner-mobile-cta: button (.c-footer-inner-mobile__cta)
footer-inner-mobile-text-4: label text, 9 characters (.c-footer-inner-mobile__text-4)
footer-inner-mobile-columns-3: inner grid (.c-footer-inner-mobile__columns-3)
footer-inner-mobile-columns-4: inner grid (.c-footer-inner-mobile__columns-4), content not captured
footer-inner-mobile-heading-2: heading, 7 characters (.c-footer-inner-mobile__heading-2, 3 instances)
footer-inner-mobile-list-2: inner group (.c-footer-inner-mobile__list-2, 3 instances), content not captured
footer-inner-mobile-item-2: inner group (.c-footer-inner-mobile__item-2, 28 instances), content not captured
footer-inner-mobile-link-4: link (.c-footer-inner-mobile__link-4, 29 instances), content not captured

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <h2 class="c-footer-inner-mobile__heading">lorem</h2>
    <div class="c-footer-inner-mobile__group">
      <div class="c-footer-inner-mobile__columns">
        <div class="c-footer-inner-mobile__column">
          <span class="c-footer-inner-mobile__text">lorem ipsum dolor sit</span>
          <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-inner-mobile__list">
          <li class="c-footer-inner-mobile__item">
            <span class="c-footer-inner-mobile__logo" aria-hidden="true"></span>
            <span class="c-footer-inner-mobile__text">lorem ipsum</span>
          </li>
          <li class="c-footer-inner-mobile__item">
            <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-mobile__text">lorem</span>
          </li>
          <li class="c-footer-inner-mobile__item">
            <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-mobile__text">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-inner-mobile__group-2"></div>
    </div>
    <div class="c-footer-inner-mobile__inner">
      <div class="c-footer-inner-mobile__group-3">
        <div class="c-footer-inner-mobile__group-4">
          <span class="c-footer-inner-mobile__icon-2" aria-hidden="true"></span>
          <div class="c-footer-inner-mobile__columns-2">
            <a class="c-footer-inner-mobile__link-2" href="#">
              <span class="c-footer-inner-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-mobile__group-5">
                <span class="c-footer-inner-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-mobile__link-2" href="#">
              <span class="c-footer-inner-mobile__text-2">lorem</span>
              <div class="c-footer-inner-mobile__group-5">
                <span class="c-footer-inner-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-mobile__link-2" href="#">
              <span class="c-footer-inner-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-mobile__group-5">
                <span class="c-footer-inner-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-mobile__link-2" href="#">
              <span class="c-footer-inner-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-mobile__group-5">
                <span class="c-footer-inner-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-mobile__link-2" href="#">
              <span class="c-footer-inner-mobile__text-2">lorem</span>
              <div class="c-footer-inner-mobile__group-5">
                <span class="c-footer-inner-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-mobile__link-3" href="#">
              <span class="c-footer-inner-mobile__text-2">lorem ips</span>
              <div class="c-footer-inner-mobile__group-5">
                <span class="c-footer-inner-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-inner-mobile__group-6">
            <p class="c-footer-inner-mobile__text-3">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-inner-mobile__group-7"></div>
            <button class="c-footer-inner-mobile__cta" type="button">
              <span class="c-footer-inner-mobile__text-4">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-inner-mobile__columns-3">
          <div class="c-footer-inner-mobile__columns-4">
            <div class="c-footer-inner-mobile__group-3">
              <h6 class="c-footer-inner-mobile__heading-2">lorem i</h6>
              <ul class="c-footer-inner-mobile__list-2">
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-mobile__group-3">
              <h6 class="c-footer-inner-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-mobile__list-2">
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-mobile__item-2">
                  <a class="c-footer-inner-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-mobile__group-3">
              <h6 class="c-footer-inner-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-mobile__list-2">
                <li class="c-footer-inner-mobile__item-2"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-mobile__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-inner-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner-mobile__columns {
  display: grid;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 24px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-mobile__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-mobile__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-inner-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 64px 24px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-4 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-inner-mobile__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner-mobile__columns-2 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner-mobile__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-inner-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-inner-mobile__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-mobile__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-mobile__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-mobile__text-3 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-inner-mobile__group-7 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 342px;
  height: 33px;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-mobile__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif, Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-inner-mobile__text-4 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-inner-mobile__columns-3 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-top: 48px;
}

.c-footer-inner-mobile__columns-4 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-inner-mobile__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-inner-mobile__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-mobile__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner-mobile__link-2:hover {
  color: #030303;
}

.c-footer-inner-mobile__cta:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

footer-inner-cta focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none
mobile, footer-inner-mobile-link hover: text-decoration-line underline
mobile, footer-inner-mobile-link-2 hover (footer-inner-mobile-link-2-hover): color #030303
mobile, footer-inner-mobile-cta focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, primary (5)

Verification: verified against the live page at desktop.

Anatomy

button-primary-5: the component root, a <a> (.c-button-primary-5)
button-primary-5-label: label text, 18 characters (.c-button-primary-5__label)

Recipe

HTML · CSS

<div class="c-button-primary-5-scope">
  <a class="c-button-primary-5" href="#">
    <span class="c-button-primary-5__label">lorem ipsum dolor</span>
  </a>
</div>

.c-button-primary-5-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-primary-5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-primary-5__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-primary-5:hover {
  background-color: #007243;
}

.c-button-primary-5:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-primary-5-hover): background-color #007243
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, primary (6)

Verification: verified against the live page at desktop.

Anatomy

button-primary-6: the component root, a <a> (.c-button-primary-6)
button-primary-6-label: label text, 23 characters (.c-button-primary-6__label)

Recipe

HTML · CSS

<div class="c-button-primary-6-scope">
  <a class="c-button-primary-6" href="#">
    <span class="c-button-primary-6__label">lorem ipsum dolor sit a</span>
  </a>
</div>

.c-button-primary-6-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-primary-6 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 34px;
  padding: 8px 12px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-primary-6__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-primary-6:hover {
  background-color: #007243;
}

.c-button-primary-6:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-primary-6-hover): background-color #007243
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, secondary (5)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-5: the component root, a <a> (.c-button-secondary-5)
button-secondary-5-label: label text, 21 characters (.c-button-secondary-5__label)

Recipe

HTML · CSS

<div class="c-button-secondary-5-scope">
  <a class="c-button-secondary-5" href="#">
    <span class="c-button-secondary-5__label">lorem ipsum dolor sit</span>
  </a>
</div>

.c-button-secondary-5-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary-5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 34px;
  padding: 8px 12px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary-5__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary-5:hover {
  background-color: #03030307;
}

.c-button-secondary-5:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-secondary-5-hover): background-color #03030307
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, secondary (6)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-6: the component root, a <a> (.c-button-secondary-6)
button-secondary-6-label: label text, 7 characters (.c-button-secondary-6__label)

Recipe

HTML · CSS

<div class="c-button-secondary-6-scope">
  <a class="c-button-secondary-6" href="#">
    <span class="c-button-secondary-6__label">lorem i</span>
  </a>
</div>

.c-button-secondary-6-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary-6 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary-6__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary-6:hover {
  background-color: #03030307;
}

.c-button-secondary-6:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

hover (button-secondary-6-hover): background-color #03030307
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-label: label text, 7 characters (.c-button-ghost-2__label)
button-ghost-2-icon: icon placeholder, 12px (.c-button-ghost-2__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <span class="c-button-ghost-2__label">lorem i</span>
    <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
  right: 0px;
  bottom: -1px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-left: 4px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-button-ghost-2:hover {
  color: #0E7E4E;
}

.c-button-ghost-2:focus {
  color: #0E7E4E;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (button-ghost-2-hover): color #0E7E4E
focus (button-ghost-2-focus): color #0E7E4E, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Card (5)

Verification: flagged, the card-5-icon x did not reproduce the measured 628px after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-group: inner block (.c-card-5__group)
card-5-group-2: inner block (.c-card-5__group-2)
card-5-icon: icon placeholder, 24px (.c-card-5__icon)
card-5-group-3: inner flex row (.c-card-5__group-3)
card-5-group-4: inner block (.c-card-5__group-4)
card-5-group-5: inner flex row (.c-card-5__group-5), content not captured
card-5-group-6: inner flex column (.c-card-5__group-6)
card-5-title: heading, 39 characters (.c-card-5__title)
card-5-body: label text, 151 characters (.c-card-5__body)
card-5-group-7: inner flex row (.c-card-5__group-7)
card-5-cta: link (.c-card-5__cta), content not captured
card-5-cta-2: link (.c-card-5__cta-2), content not captured

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <div class="c-card-5__group-2">
        <span class="c-card-5__icon" aria-hidden="true"></span>
      </div>
      <div class="c-card-5__group-3">
        <div class="c-card-5__group-4">
          <div class="c-card-5__group-5"></div>
        </div>
        <div class="c-card-5__group-6">
          <h1 class="c-card-5__title">lorem ipsum dolor sit amet consectetur</h1>
          <p class="c-card-5__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod temp</p>
        </div>
        <div class="c-card-5__group-7">
          <a class="c-card-5__cta" href="#"></a>
          <a class="c-card-5__cta-2" href="#"></a>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card-5 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-card-5__group {
  box-sizing: border-box;
}

.c-card-5__group-2 {
  box-sizing: border-box;
  text-align: center;
}

.c-card-5__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-5__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
}

.c-card-5__group-4 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-card-5__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-card-5__group-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  transform: matrix(1, 0, 0, 1, 0, 0);
  margin-bottom: 8px;
}

.c-card-5__title {
  display: block;
  box-sizing: border-box;
  max-width: 512px;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 46px;
  font-weight: 500;
  line-height: 46px;
  letter-spacing: -0.5px;
}

.c-card-5__body {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  color: #464646;
}

.c-card-5__group-7 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding-top: 8px;
}

.c-card-5__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  padding: 8px 12px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-card-5__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  padding: 8px 12px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-card-5:hover {
  max-width: 1280px;
  padding: 8px 80px 0px;
  margin: 0px auto;
  position: relative;
  background-image: none;
}

.c-card-5:focus {
  max-width: 1280px;
  padding: 8px 80px 0px;
  margin: 0px auto;
  position: relative;
  background-image: none;
}

States

hover: max-width 1280px, padding 8px 80px 0px, margin 0px auto, position relative, background-image none
focus: max-width 1280px, padding 8px 80px 0px, margin 0px auto, position relative, background-image none

Tabs (4)

Verification: verified against the live page at desktop.

Anatomy

tab-4: the component root, a <nav> (.c-tab-4)
tab-4-group: inner flex row (.c-tab-4__group)
tab-4-group-2: inner flex row (.c-tab-4__group-2)
tab-4-cta: link (.c-tab-4__cta)
tab-4-icon: icon placeholder, 16px (.c-tab-4__icon, 3 instances)
tab-4-body: label text, 6 characters (.c-tab-4__body, 3 instances)
tab-4-cta-2: link (.c-tab-4__cta-2)
tab-4-cta-3: link (.c-tab-4__cta-3)
tab-4-group-3: inner flex row (.c-tab-4__group-3)
tab-4-cta-4: link (.c-tab-4__cta-4)
tab-4-group-4: inner block (.c-tab-4__group-4), content not captured
tab-4-text: label text, 4 characters (.c-tab-4__text)

Recipe

HTML · CSS

<div class="c-tab-4-scope">
  <nav class="c-tab-4">
    <div class="c-tab-4__group">
      <div class="c-tab-4__group-2">
        <a class="c-tab-4__cta" href="#">
          <span class="c-tab-4__icon" aria-hidden="true"></span>
          <p class="c-tab-4__body">lorem</p>
        </a>
        <a class="c-tab-4__cta-2" href="#">
          <span class="c-tab-4__icon" aria-hidden="true"></span>
          <p class="c-tab-4__body">lore</p>
        </a>
        <a class="c-tab-4__cta-3" href="#">
          <span class="c-tab-4__icon" aria-hidden="true"></span>
          <p class="c-tab-4__body">lorem</p>
        </a>
      </div>
      <div class="c-tab-4__group-3">
        <a class="c-tab-4__cta-4" href="#">
          <div class="c-tab-4__group-4"></div>
          <span class="c-tab-4__text">lore</span>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-tab-4-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-tab-4 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 30;
  background-color: #FDFDFDE6;
  color: #030303;
  backdrop-filter: blur(12px);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-tab-4__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  position: relative;
  padding-right: 96px;
  padding-left: 96px;
  margin-right: auto;
  margin-left: auto;
}

.c-tab-4__group-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: max-content;
}

.c-tab-4__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 12px 8px;
  color: #696969;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  text-decoration-line: none;
  margin-left: -8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-tab-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-tab-4__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-tab-4__cta-2 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 12px 8px;
  color: #030303;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  text-decoration-line: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #464646;
}

.c-tab-4__cta-3 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 12px 8px;
  color: #696969;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  text-decoration-line: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-tab-4__group-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.c-tab-4__cta-4 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  text-decoration-line: none;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-tab-4__group-4 {
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  position: relative;
}

States

No hover or focus change was observed.

Copy button

Verification: verified against the live page at desktop.

Anatomy

copy-button: the component root, a <button> (.c-copy-button)
copy-button-group: inner flex row (.c-copy-button__group)
copy-button-icon: icon placeholder, 14px (.c-copy-button__icon)

Recipe

HTML · CSS

<div class="c-copy-button-scope">
  <button class="c-copy-button" type="button">
    <div class="c-copy-button__group">
      <span class="c-copy-button__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-copy-button-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24.8889px;
}

.c-copy-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 6px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-copy-button::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
}

.c-copy-button__group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #696969;
}

.c-copy-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-copy-button:hover {
  background-color: #0303030A;
  border: 1px solid #03030325;
}

.c-copy-button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (copy-button-hover): background-color #0303030A, border 1px solid #03030325
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Verification: desktop flagged, the footer-inner-2-inner height did not reproduce the measured 976px after 2 correction attempts; mobile flagged, the footer-inner-2-mobile-inner height did not reproduce the measured 1860px after 2 correction attempts.

Variant observed on https://supabase.com/modules/cron.

Anatomy

footer-inner-2: the component root, a <footer> (.c-footer-inner-2)
footer-inner-2-heading: heading, 6 characters (.c-footer-inner-2__heading)
footer-inner-2-group: inner block (.c-footer-inner-2__group)
footer-inner-2-columns: inner flex row (.c-footer-inner-2__columns)
footer-inner-2-column: inner flex row (.c-footer-inner-2__column)
footer-inner-2-text: label text, 21 characters (.c-footer-inner-2__text, 4 instances)
footer-inner-2-link: link, 16-character label (.c-footer-inner-2__link)
footer-inner-2-list: inner flex row (.c-footer-inner-2__list)
footer-inner-2-item: inner flex row (.c-footer-inner-2__item, 3 instances)
footer-inner-2-logo: icon placeholder, 16px (.c-footer-inner-2__logo)
footer-inner-2-text-2: label text, 9 characters (.c-footer-inner-2__text-2, 3 instances)
footer-inner-2-icon: icon placeholder, 16px (.c-footer-inner-2__icon, 2 instances)
footer-inner-2-group-2: inner block (.c-footer-inner-2__group-2)
footer-inner-2-inner: inner block (.c-footer-inner-2__inner), content not captured
footer-inner-2-columns-2: inner grid (.c-footer-inner-2__columns-2)
footer-inner-2-group-3: inner flex column (.c-footer-inner-2__group-3)
footer-inner-2-icon-2: icon placeholder, 160x30px (.c-footer-inner-2__icon-2)
footer-inner-2-columns-3: inner flex row (.c-footer-inner-2__columns-3)
footer-inner-2-link-2: link (.c-footer-inner-2__link-2, 5 instances)
footer-inner-2-text-3: label text, 7 characters (.c-footer-inner-2__text-3, 6 instances)
footer-inner-2-group-4: inner block (.c-footer-inner-2__group-4, 6 instances)
footer-inner-2-icon-3: icon placeholder, 22px (.c-footer-inner-2__icon-3, 6 instances)
footer-inner-2-link-3: link (.c-footer-inner-2__link-3)
footer-inner-2-group-5: inner flex column (.c-footer-inner-2__group-5)
footer-inner-2-text-4: label text, 43 characters (.c-footer-inner-2__text-4)
footer-inner-2-inner-2: inner flex row (.c-footer-inner-2__inner-2)
footer-inner-2-button: button (.c-footer-inner-2__button)
footer-inner-2-text-5: label text, 9 characters (.c-footer-inner-2__text-5)
footer-inner-2-columns-4: inner grid (.c-footer-inner-2__columns-4)
footer-inner-2-columns-5: inner grid (.c-footer-inner-2__columns-5), content not captured
footer-inner-2-group-6: inner block (.c-footer-inner-2__group-6, 3 instances), content not captured
footer-inner-2-heading-2: heading, 7 characters (.c-footer-inner-2__heading-2, 2 instances)
footer-inner-2-list-2: inner group (.c-footer-inner-2__list-2, 2 instances)
footer-inner-2-item-2: inner group (.c-footer-inner-2__item-2, 27 instances)
footer-inner-2-link-4: link (.c-footer-inner-2__link-4, 29 instances), content not captured

Desktop recipe

HTML · CSS

<div class="c-footer-inner-2-scope">
  <footer class="c-footer-inner-2">
    <h2 class="c-footer-inner-2__heading">lorem</h2>
    <div class="c-footer-inner-2__group">
      <div class="c-footer-inner-2__columns">
        <div class="c-footer-inner-2__column">
          <span class="c-footer-inner-2__text">lorem ipsum dolor sit</span>
          <a class="c-footer-inner-2__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-inner-2__list">
          <li class="c-footer-inner-2__item">
            <span class="c-footer-inner-2__logo" aria-hidden="true"></span>
            <span class="c-footer-inner-2__text">lorem ipsum</span>
            <span class="c-footer-inner-2__text-2">lorem ips</span>
          </li>
          <li class="c-footer-inner-2__item">
            <span class="c-footer-inner-2__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-2__text">lorem</span>
            <span class="c-footer-inner-2__text-2">lorem ips</span>
          </li>
          <li class="c-footer-inner-2__item">
            <span class="c-footer-inner-2__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-2__text">lorem ips</span>
            <span class="c-footer-inner-2__text-2">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-inner-2__group-2"></div>
    </div>
    <div class="c-footer-inner-2__inner">
      <div class="c-footer-inner-2__columns-2">
        <div class="c-footer-inner-2__group-3">
          <span class="c-footer-inner-2__icon-2" aria-hidden="true"></span>
          <div class="c-footer-inner-2__columns-3">
            <a class="c-footer-inner-2__link-2" href="#">
              <span class="c-footer-inner-2__text-3">lorem i</span>
              <div class="c-footer-inner-2__group-4">
                <span class="c-footer-inner-2__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2__link-2" href="#">
              <span class="c-footer-inner-2__text-3">lorem</span>
              <div class="c-footer-inner-2__group-4">
                <span class="c-footer-inner-2__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2__link-2" href="#">
              <span class="c-footer-inner-2__text-3">lorem i</span>
              <div class="c-footer-inner-2__group-4">
                <span class="c-footer-inner-2__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2__link-2" href="#">
              <span class="c-footer-inner-2__text-3">lorem i</span>
              <div class="c-footer-inner-2__group-4">
                <span class="c-footer-inner-2__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2__link-2" href="#">
              <span class="c-footer-inner-2__text-3">lorem</span>
              <div class="c-footer-inner-2__group-4">
                <span class="c-footer-inner-2__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2__link-3" href="#">
              <span class="c-footer-inner-2__text-3">lorem ips</span>
              <div class="c-footer-inner-2__group-4">
                <span class="c-footer-inner-2__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-inner-2__group-5">
            <p class="c-footer-inner-2__text-4">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-inner-2__inner-2"></div>
            <button class="c-footer-inner-2__button" type="button">
              <span class="c-footer-inner-2__text-5">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-inner-2__columns-4">
          <div class="c-footer-inner-2__columns-5">
            <div class="c-footer-inner-2__group-6">
              <h6 class="c-footer-inner-2__heading-2">lorem i</h6>
              <ul class="c-footer-inner-2__list-2">
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-2__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-2__group-6">
              <h6 class="c-footer-inner-2__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-2__list-2">
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2__item-2">
                  <a class="c-footer-inner-2__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-2__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-2__group-6"></div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-2-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-2__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-inner-2__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner-2__columns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 112px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 40px 96px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-2__column {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-2__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-2__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-2__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-inner-2__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
}

.c-footer-inner-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-inner-2__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 96px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-2__columns-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(7, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-2__group-3 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-inner-2__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner-2__columns-3 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner-2__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-2__text-3 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-inner-2__group-4 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-inner-2__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-2__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-2__group-5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-2__text-4 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-inner-2__inner-2 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 239.531px;
  height: 35px;
  max-width: 80%;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-2__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-inner-2__text-5 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-inner-2__columns-4 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-2__columns-5 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-2__group-6 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-2__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-inner-2__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-2__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-inner-2__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-2__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner-2__link-2:hover {
  color: #030303;
}

.c-footer-inner-2__link-3:hover {
  color: #030303;
}

.c-footer-inner-2__button:hover {
  background-color: #007243;
}

.c-footer-inner-2__button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

Mobile anatomy

footer-inner-2-mobile: the component root, a <footer> (.c-footer-inner-2-mobile)
footer-inner-2-mobile-heading: heading, 6 characters (.c-footer-inner-2-mobile__heading)
footer-inner-2-mobile-group: inner block (.c-footer-inner-2-mobile__group)
footer-inner-2-mobile-columns: inner grid (.c-footer-inner-2-mobile__columns)
footer-inner-2-mobile-column: inner flex column (.c-footer-inner-2-mobile__column)
footer-inner-2-mobile-text: label text, 21 characters (.c-footer-inner-2-mobile__text, 4 instances)
footer-inner-2-mobile-link: link, 16-character label (.c-footer-inner-2-mobile__link)
footer-inner-2-mobile-list: inner flex column (.c-footer-inner-2-mobile__list)
footer-inner-2-mobile-item: inner flex row (.c-footer-inner-2-mobile__item, 3 instances)
footer-inner-2-mobile-logo: icon placeholder, 16px (.c-footer-inner-2-mobile__logo)
footer-inner-2-mobile-icon: icon placeholder, 16px (.c-footer-inner-2-mobile__icon, 2 instances)
footer-inner-2-mobile-group-2: inner block (.c-footer-inner-2-mobile__group-2)
footer-inner-2-mobile-inner: inner block (.c-footer-inner-2-mobile__inner), content not captured
footer-inner-2-mobile-group-3: inner block (.c-footer-inner-2-mobile__group-3, 4 instances)
footer-inner-2-mobile-group-4: inner flex column (.c-footer-inner-2-mobile__group-4)
footer-inner-2-mobile-icon-2: icon placeholder, 160x30px (.c-footer-inner-2-mobile__icon-2)
footer-inner-2-mobile-columns-2: inner flex row (.c-footer-inner-2-mobile__columns-2)
footer-inner-2-mobile-link-2: link (.c-footer-inner-2-mobile__link-2, 5 instances)
footer-inner-2-mobile-text-2: label text, 7 characters (.c-footer-inner-2-mobile__text-2, 6 instances)
footer-inner-2-mobile-group-5: inner block (.c-footer-inner-2-mobile__group-5, 6 instances)
footer-inner-2-mobile-icon-3: icon placeholder, 22px (.c-footer-inner-2-mobile__icon-3, 6 instances)
footer-inner-2-mobile-link-3: link (.c-footer-inner-2-mobile__link-3)
footer-inner-2-mobile-group-6: inner flex column (.c-footer-inner-2-mobile__group-6)
footer-inner-2-mobile-text-3: label text, 43 characters (.c-footer-inner-2-mobile__text-3)
footer-inner-2-mobile-group-7: inner flex row (.c-footer-inner-2-mobile__group-7)
footer-inner-2-mobile-button: button (.c-footer-inner-2-mobile__button)
footer-inner-2-mobile-text-4: label text, 9 characters (.c-footer-inner-2-mobile__text-4)
footer-inner-2-mobile-columns-3: inner grid (.c-footer-inner-2-mobile__columns-3)
footer-inner-2-mobile-columns-4: inner grid (.c-footer-inner-2-mobile__columns-4), content not captured
footer-inner-2-mobile-heading-2: heading, 7 characters (.c-footer-inner-2-mobile__heading-2, 3 instances)
footer-inner-2-mobile-list-2: inner group (.c-footer-inner-2-mobile__list-2, 3 instances), content not captured
footer-inner-2-mobile-item-2: inner group (.c-footer-inner-2-mobile__item-2, 28 instances), content not captured
footer-inner-2-mobile-link-4: link (.c-footer-inner-2-mobile__link-4, 29 instances), content not captured

Mobile recipe

HTML · CSS

<div class="c-footer-inner-2-mobile-scope">
  <footer class="c-footer-inner-2-mobile">
    <h2 class="c-footer-inner-2-mobile__heading">lorem</h2>
    <div class="c-footer-inner-2-mobile__group">
      <div class="c-footer-inner-2-mobile__columns">
        <div class="c-footer-inner-2-mobile__column">
          <span class="c-footer-inner-2-mobile__text">lorem ipsum dolor sit</span>
          <a class="c-footer-inner-2-mobile__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-inner-2-mobile__list">
          <li class="c-footer-inner-2-mobile__item">
            <span class="c-footer-inner-2-mobile__logo" aria-hidden="true"></span>
            <span class="c-footer-inner-2-mobile__text">lorem ipsum</span>
          </li>
          <li class="c-footer-inner-2-mobile__item">
            <span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-2-mobile__text">lorem</span>
          </li>
          <li class="c-footer-inner-2-mobile__item">
            <span class="c-footer-inner-2-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-2-mobile__text">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-inner-2-mobile__group-2"></div>
    </div>
    <div class="c-footer-inner-2-mobile__inner">
      <div class="c-footer-inner-2-mobile__group-3">
        <div class="c-footer-inner-2-mobile__group-4">
          <span class="c-footer-inner-2-mobile__icon-2" aria-hidden="true"></span>
          <div class="c-footer-inner-2-mobile__columns-2">
            <a class="c-footer-inner-2-mobile__link-2" href="#">
              <span class="c-footer-inner-2-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-2-mobile__group-5">
                <span class="c-footer-inner-2-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2-mobile__link-2" href="#">
              <span class="c-footer-inner-2-mobile__text-2">lorem</span>
              <div class="c-footer-inner-2-mobile__group-5">
                <span class="c-footer-inner-2-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2-mobile__link-2" href="#">
              <span class="c-footer-inner-2-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-2-mobile__group-5">
                <span class="c-footer-inner-2-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2-mobile__link-2" href="#">
              <span class="c-footer-inner-2-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-2-mobile__group-5">
                <span class="c-footer-inner-2-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2-mobile__link-2" href="#">
              <span class="c-footer-inner-2-mobile__text-2">lorem</span>
              <div class="c-footer-inner-2-mobile__group-5">
                <span class="c-footer-inner-2-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-2-mobile__link-3" href="#">
              <span class="c-footer-inner-2-mobile__text-2">lorem ips</span>
              <div class="c-footer-inner-2-mobile__group-5">
                <span class="c-footer-inner-2-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-inner-2-mobile__group-6">
            <p class="c-footer-inner-2-mobile__text-3">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-inner-2-mobile__group-7"></div>
            <button class="c-footer-inner-2-mobile__button" type="button">
              <span class="c-footer-inner-2-mobile__text-4">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-inner-2-mobile__columns-3">
          <div class="c-footer-inner-2-mobile__columns-4">
            <div class="c-footer-inner-2-mobile__group-3">
              <h6 class="c-footer-inner-2-mobile__heading-2">lorem i</h6>
              <ul class="c-footer-inner-2-mobile__list-2">
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-2-mobile__group-3">
              <h6 class="c-footer-inner-2-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-2-mobile__list-2">
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-2-mobile__item-2">
                  <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-2-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-2-mobile__group-3">
              <h6 class="c-footer-inner-2-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-2-mobile__list-2">
                <li class="c-footer-inner-2-mobile__item-2"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-2-mobile-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-2-mobile__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-inner-2-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner-2-mobile__columns {
  display: grid;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 24px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-2-mobile__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-2-mobile__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-2-mobile__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-inner-2-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-2-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-2-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-inner-2-mobile__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 64px 24px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-2-mobile__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__group-4 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner-2-mobile__columns-2 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-2-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-inner-2-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-inner-2-mobile__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-2-mobile__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-2-mobile__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__text-3 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-inner-2-mobile__group-7 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 342px;
  height: 33px;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-2-mobile__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-inner-2-mobile__text-4 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-inner-2-mobile__columns-3 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-top: 48px;
}

.c-footer-inner-2-mobile__columns-4 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-inner-2-mobile__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-2-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-inner-2-mobile__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-2-mobile__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner-2-mobile__link-2:hover {
  color: #030303;
}

.c-footer-inner-2-mobile__link-3:hover {
  color: #030303;
}

.c-footer-inner-2-mobile__button:hover {
  background-color: #007243;
}

.c-footer-inner-2-mobile__button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

footer-inner-2-link hover: text-decoration-line underline
footer-inner-2-link-2 hover (footer-inner-2-link-2-hover): color #030303
footer-inner-2-link-3 hover (footer-inner-2-link-3-hover): color #030303
footer-inner-2-button hover (footer-inner-2-button-hover): background-color #007243
footer-inner-2-button focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none
mobile, footer-inner-2-mobile-link hover: text-decoration-line underline
mobile, footer-inner-2-mobile-link-2 hover (footer-inner-2-mobile-link-2-hover): color #030303
mobile, footer-inner-2-mobile-link-3 hover (footer-inner-2-mobile-link-3-hover): color #030303
mobile, footer-inner-2-mobile-button hover (footer-inner-2-mobile-button-hover): background-color #007243
mobile, footer-inner-2-mobile-button focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Button, secondary (7)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-7: the component root, a <a> (.c-button-secondary-7)
button-secondary-7-group: inner group (.c-button-secondary-7__group)
button-secondary-7-group-2: inner flex row (.c-button-secondary-7__group-2)
button-secondary-7-icon: icon placeholder, 24px (.c-button-secondary-7__icon)
button-secondary-7-label: label text, 6 characters (.c-button-secondary-7__label)

Recipe

HTML · CSS

<div class="c-button-secondary-7-scope">
  <a class="c-button-secondary-7" href="#">
    <span class="c-button-secondary-7__group">
      <span class="c-button-secondary-7__group-2">
        <span class="c-button-secondary-7__icon" aria-hidden="true"></span>
        <span class="c-button-secondary-7__label">lorem</span>
      </span>
    </span>
  </a>
</div>

.c-button-secondary-7-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-button-secondary-7 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  color: #464646;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-button-secondary-7__group {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary-7__group-2 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-button-secondary-7__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-button-secondary-7:hover {
  background-color: #0303030A;
  color: #030303;
}

.c-button-secondary-7:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (button-secondary-7-hover): background-color #0303030A, color #030303
focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Input (3)

Verification: verified against the live page at desktop.

Anatomy

input-3: the component root, a <input> (.c-input-3), 10-character placeholder

Recipe

HTML · CSS

<div class="c-input-3-scope">
  <input class="c-input-3" type="text" placeholder="lorem ipsu">
</div>

.c-input-3-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-input-3 {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 223px;
  height: 34px;
  padding: 8px 12px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-input-3:hover {
  min-width: 0px;
  min-height: 0px;
  border: 1px solid #0303034C;
}

.c-input-3:focus {
  min-width: 0px;
  min-height: 0px;
  border: 1px solid #0303034C;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover: min-width 0px, min-height 0px, border 1px solid #0303034C
focus: min-width 0px, min-height 0px, border 1px solid #0303034C, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Input (4)

Verification: verified against the live page at desktop.

Anatomy

input-4: the component root, a <input> (.c-input-4), 13-character placeholder

Recipe

HTML · CSS

<div class="c-input-4-scope">
  <input class="c-input-4" type="text" placeholder="lorem ipsum d">
</div>

.c-input-4-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-input-4 {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 462px;
  height: 34px;
  padding: 8px 12px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-input-4:hover {
  min-width: 0px;
  min-height: 0px;
  border: 1px solid #0303034C;
}

.c-input-4:focus {
  min-width: 0px;
  min-height: 0px;
  border: 1px solid #0303034C;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover: min-width 0px, min-height 0px, border 1px solid #0303034C
focus: min-width 0px, min-height 0px, border 1px solid #0303034C, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Textarea

Verification: verified against the live page at desktop.

Anatomy

textarea: the component root, a <textarea> (.c-textarea), 44-character placeholder

Recipe

HTML · CSS

<div class="c-textarea-scope">
  <textarea class="c-textarea" placeholder="lorem ipsum dolor sit amet consectetur adipi"></textarea>
</div>

.c-textarea-scope {
  background-color: #FFFFFF;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-textarea {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 462px;
  height: 100px;
  min-height: 100px;
  padding: 8px 12px;
  overflow-x: auto;
  overflow-y: auto;
  background-color: #03030307;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre-wrap;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-textarea:hover {
  min-width: 0px;
  border: 1px solid #0303034C;
}

.c-textarea:focus {
  min-width: 0px;
  border: 1px solid #0303034C;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover: min-width 0px, border 1px solid #0303034C
focus: min-width 0px, border 1px solid #0303034C, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Customer logo

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

customer-logo-active: the component root, a <button> (.c-customer-logo-active)
customer-logo-active-group: inner block (.c-customer-logo-active__group)
customer-logo-active-group-2: inner block (.c-customer-logo-active__group-2)
customer-logo-active-media: image placeholder, 112x24px (.c-customer-logo-active__media)

Recipe

HTML · CSS

<div class="c-customer-logo-active-scope">
  <button class="c-customer-logo-active" type="button">
    <div class="c-customer-logo-active__group">
      <div class="c-customer-logo-active__group-2">
        <span class="c-customer-logo-active__media" aria-hidden="true"></span>
      </div>
    </div>
  </button>
</div>

.c-customer-logo-active-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-customer-logo-active {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #030303;
  border: 0;
  cursor: default;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24.8889px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  appearance: button;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-customer-logo-active__group {
  display: block;
  box-sizing: border-box;
}

.c-customer-logo-active__group-2 {
  display: block;
  box-sizing: border-box;
  width: 112px;
  height: 32px;
  max-width: 112px;
  max-height: 24px;
  position: relative;
}

.c-customer-logo-active__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 112px;
  height: 24px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Customer logo

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

customer-logo: the component root, a <button> (.c-customer-logo)
customer-logo-group: inner block (.c-customer-logo__group)
customer-logo-group-2: inner block (.c-customer-logo__group-2)
customer-logo-media: image placeholder, 112x24px (.c-customer-logo__media)

Recipe

HTML · CSS

<div class="c-customer-logo-scope">
  <button class="c-customer-logo" type="button">
    <div class="c-customer-logo__group">
      <div class="c-customer-logo__group-2">
        <span class="c-customer-logo__media" aria-hidden="true"></span>
      </div>
    </div>
  </button>
</div>

.c-customer-logo-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-customer-logo {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #030303;
  border: 0;
  opacity: 0.5;
  cursor: default;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24.8889px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  appearance: button;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-customer-logo__group {
  display: block;
  box-sizing: border-box;
}

.c-customer-logo__group-2 {
  display: block;
  box-sizing: border-box;
  width: 112px;
  height: 32px;
  max-width: 112px;
  max-height: 24px;
  position: relative;
}

.c-customer-logo__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 112px;
  height: 24px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Nav

Verification: flagged, the nav-group-2 y did not reproduce the measured 64px after 2 correction attempts.

Anatomy

nav: the component root, a <nav> (.c-nav)
nav-group: inner block (.c-nav__group)
nav-list: inner flex row (.c-nav__list)
nav-item: inner group (.c-nav__item, 6 instances)
nav-button: button, 7-character label (.c-nav__button, 3 instances), content not captured
nav-link: link (.c-nav__link, 3 instances), content not captured
nav-group-2: inner flex row (.c-nav__group-2)

Recipe

HTML · CSS

<div class="c-nav-scope">
  <nav class="c-nav">
    <div class="c-nav__group">
      <ul class="c-nav__list">
        <li class="c-nav__item">
          <button class="c-nav__button" type="button">lorem i</button>
        </li>
        <li class="c-nav__item">
          <button class="c-nav__button" type="button">lorem ipsu</button>
        </li>
        <li class="c-nav__item">
          <button class="c-nav__button" type="button">lorem ips</button>
        </li>
        <li class="c-nav__item">
          <a class="c-nav__link" href="#"></a>
        </li>
        <li class="c-nav__item">
          <a class="c-nav__link" href="#"></a>
        </li>
        <li class="c-nav__item">
          <a class="c-nav__link" href="#"></a>
        </li>
      </ul>
    </div>
    <div class="c-nav__group-2"></div>
  </nav>
</div>

.c-nav-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-nav {
  display: inline-flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  padding-left: 32px;
}

.c-nav__group {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-nav__list {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav__item {
  display: list-item;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-nav__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  color: #030303;
  border-radius: 8px;
  cursor: pointer;
  line-height: 14px;
  text-decoration-line: none;
}

.c-nav__group-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  right: 0px;
  left: 0px;
}

States

No hover or focus change was observed.

Header (inner)

Verification: desktop flagged, the header-inner-group-5 y did not reproduce the measured -1px after 2 correction attempts; mobile verified against the live page at mobile.

Variant observed on https://supabase.com/contact/sales.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-inner: inner flex row (.c-header-inner__inner)
header-inner-group: inner flex row (.c-header-inner__group)
header-inner-group-2: inner flex row (.c-header-inner__group-2)
header-inner-group-3: inner flex row (.c-header-inner__group-3)
header-inner-logo: icon placeholder, 124x24px (.c-header-inner__logo)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-group-4: inner block (.c-header-inner__group-4)
header-inner-nav-list: inner flex row (.c-header-inner__nav-list)
header-inner-nav-item: inner group (.c-header-inner__nav-item, 6 instances)
header-inner-cta: the button-ghost-2 button, 7-character label (.c-header-inner__cta, 2 instances), content not captured
header-inner-cta-2: the button-ghost-2 button, 9-character label (.c-header-inner__cta-2), content not captured
header-inner-group-5: inner group (.c-header-inner__group-5)
header-inner-nav-link: link (.c-header-inner__nav-link, 3 instances), content not captured
header-inner-group-6: inner flex row (.c-header-inner__group-6)
header-inner-group-7: inner block (.c-header-inner__group-7)
header-inner-group-8: inner block (.c-header-inner__group-8)
header-inner-group-9: inner flex row (.c-header-inner__group-9), content not captured
header-inner-group-10: inner flex row (.c-header-inner__group-10)
header-inner-group-11: inner flex row (.c-header-inner__group-11)
header-inner-cta-3: the button-secondary-7 button (.c-header-inner__cta-3)
header-inner-group-12: inner group (.c-header-inner__group-12)
header-inner-group-13: inner flex row (.c-header-inner__group-13)
header-inner-icon: icon placeholder, 24px (.c-header-inner__icon)
header-inner-text: label text, 6 characters (.c-header-inner__text)
header-inner-cta-4: the button-secondary-6 button (.c-header-inner__cta-4)
header-inner-text-2: label text, 7 characters (.c-header-inner__text-2, 2 instances)
header-inner-cta-5: the button-primary-5 button (.c-header-inner__cta-5)

Desktop recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__inner">
      <div class="c-header-inner__group">
        <div class="c-header-inner__group-2">
          <div class="c-header-inner__group-3">
            <span class="c-header-inner__logo" aria-hidden="true"></span>
          </div>
          <nav class="c-header-inner__nav">
            <div class="c-header-inner__group-4">
              <ul class="c-header-inner__nav-list">
                <li class="c-header-inner__nav-item">
                  <button class="c-header-inner__cta" type="button">lorem i</button>
                </li>
                <li class="c-header-inner__nav-item">
                  <button class="c-header-inner__cta" type="button">lorem ipsu</button>
                </li>
                <li class="c-header-inner__nav-item">
                  <button class="c-header-inner__cta-2" type="button">lorem ips</button>
                  <span class="c-header-inner__group-5"></span>
                </li>
                <li class="c-header-inner__nav-item">
                  <a class="c-header-inner__nav-link" href="#"></a>
                </li>
                <li class="c-header-inner__nav-item">
                  <a class="c-header-inner__nav-link" href="#"></a>
                </li>
                <li class="c-header-inner__nav-item">
                  <a class="c-header-inner__nav-link" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="c-header-inner__group-6">
              <div class="c-header-inner__group-7">
                <div class="c-header-inner__group-8">
                  <div class="c-header-inner__group-9"></div>
                </div>
              </div>
            </div>
          </nav>
        </div>
        <div class="c-header-inner__group-10">
          <div class="c-header-inner__group-11">
            <a class="c-header-inner__cta-3" href="#">
              <span class="c-header-inner__group-12">
                <span class="c-header-inner__group-13">
                  <span class="c-header-inner__icon" aria-hidden="true"></span>
                  <span class="c-header-inner__text">lorem</span>
                </span>
              </span>
            </a>
            <a class="c-header-inner__cta-4" href="#">
              <span class="c-header-inner__text-2">lorem i</span>
            </a>
            <a class="c-header-inner__cta-5" href="#">
              <span class="c-header-inner__text-2">lorem ipsum dolor</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-header-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 40;
  color: #030303;
  backdrop-filter: blur(4px);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-header-inner__inner {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  max-width: 1280px;
  position: relative;
  padding-right: 96px;
  padding-left: 96px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner__group {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-inner__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-header-inner__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 124px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-header-inner__nav {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  height: 64px;
  padding-left: 32px;
}

.c-header-inner__group-4 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__nav-list {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: list-item;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #030303;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-inner__cta-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  position: relative;
  background-color: transparent;
  color: #0E7E4E;
  border: 1px solid transparent;
  border-radius: 8.86154px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-inner__group-5 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-header-inner__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 10px;
  color: #030303;
  border-radius: 8px;
  cursor: pointer;
  line-height: 14px;
  text-decoration-line: none;
}

.c-header-inner__group-6 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  right: 0px;
  left: 0px;
}

.c-header-inner__group-7 {
  display: block;
  box-sizing: border-box;
  width: 960px;
  height: 304px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  border: 1px solid #03030315;
  border-radius: 16px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000001A 0px 10px 15px -3px, #0000001A 0px 4px 6px -4px;
  margin-top: 6px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: opacity, scale, visibility;
}

.c-header-inner__group-8 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.c-header-inner__group-9 {
  display: flex;
  box-sizing: border-box;
  background-color: #FFFFFF;
}

.c-header-inner__group-10 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-inner__group-11 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-inner__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  color: #464646;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-inner__group-12 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-header-inner__group-13 {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
}

.c-header-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner__cta-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #FFFFFF;
  color: #030303;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-inner__text-2 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-header-inner__cta-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-header-inner__cta:hover {
  color: #0E7E4E;
}

.c-header-inner__cta:focus {
  color: #0E7E4E;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__cta-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__nav-link:focus {
  color: #0E7E4E;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__cta-3:hover {
  background-color: #0303030A;
  color: #030303;
}

.c-header-inner__cta-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__cta-4:hover {
  background-color: #03030307;
}

.c-header-inner__cta-4:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

.c-header-inner__cta-5:hover {
  background-color: #007243;
}

.c-header-inner__cta-5:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

Mobile anatomy

header-inner-mobile: the component root, a <nav> (.c-header-inner-mobile)
header-inner-mobile-inner: inner flex row (.c-header-inner-mobile__inner)
header-inner-mobile-group: inner flex row (.c-header-inner-mobile__group)
header-inner-mobile-group-2: inner flex row (.c-header-inner-mobile__group-2, 2 instances)
header-inner-mobile-group-3: inner flex row (.c-header-inner-mobile__group-3)
header-inner-mobile-logo: icon placeholder, 124x24px (.c-header-inner-mobile__logo)
header-inner-mobile-button: button (.c-header-inner-mobile__button)
header-inner-mobile-text: label text, 14 characters (.c-header-inner-mobile__text)
header-inner-mobile-button-icon: icon placeholder, 24px (.c-header-inner-mobile__button-icon)

Mobile recipe

HTML · CSS

<div class="c-header-inner-mobile-scope">
  <nav class="c-header-inner-mobile">
    <div class="c-header-inner-mobile__inner">
      <div class="c-header-inner-mobile__group">
        <div class="c-header-inner-mobile__group-2">
          <div class="c-header-inner-mobile__group-3">
            <span class="c-header-inner-mobile__logo" aria-hidden="true"></span>
          </div>
        </div>
      </div>
      <div class="c-header-inner-mobile__group-2">
        <button class="c-header-inner-mobile__button" type="button">
          <span class="c-header-inner-mobile__text">lorem ipsum do</span>
          <span class="c-header-inner-mobile__button-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-mobile-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-header-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 40;
  color: #030303;
  backdrop-filter: blur(4px);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #03030315;
}

.c-header-inner-mobile__inner {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  max-width: 1280px;
  position: relative;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-mobile__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-inner-mobile__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-mobile__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-header-inner-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 124px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-header-inner-mobile__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #696969;
  border: 0;
  border-radius: 8px;
  cursor: default;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-header-inner-mobile__button-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-mobile__button:hover {
  background-color: #FFFFFF;
  color: #464646;
}

.c-header-inner-mobile__button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

header-inner-cta hover (header-inner-cta-hover): color #0E7E4E
header-inner-cta focus (header-inner-cta-focus): color #0E7E4E, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-inner-cta-2 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-inner-nav-link focus (header-inner-nav-link-focus): color #0E7E4E, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-inner-cta-3 hover (header-inner-cta-3-hover): background-color #0303030A, color #030303
header-inner-cta-3 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
header-inner-cta-4 hover (header-inner-cta-4-hover): background-color #03030307
header-inner-cta-4 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #0000000A 0px -1px 0px 0px inset, #00000011 0px 0px 0px 1px inset, outline none
header-inner-cta-5 hover (header-inner-cta-5-hover): background-color #007243
header-inner-cta-5 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none
mobile, header-inner-mobile-button hover (header-inner-mobile-button-hover): background-color #FFFFFF, color #464646
mobile, header-inner-mobile-button focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none

Verification: desktop flagged, the footer-inner-3-inner height did not reproduce the measured 976px after 2 correction attempts; mobile flagged, the footer-inner-3-mobile-inner height did not reproduce the measured 1860px after 2 correction attempts.

Variant observed on https://supabase.com/contact/sales.

Anatomy

footer-inner-3: the component root, a <footer> (.c-footer-inner-3)
footer-inner-3-heading: heading, 6 characters (.c-footer-inner-3__heading)
footer-inner-3-group: inner block (.c-footer-inner-3__group)
footer-inner-3-columns: inner flex row (.c-footer-inner-3__columns)
footer-inner-3-column: inner flex row (.c-footer-inner-3__column)
footer-inner-3-text: label text, 21 characters (.c-footer-inner-3__text, 4 instances)
footer-inner-3-link: link, 16-character label (.c-footer-inner-3__link)
footer-inner-3-list: inner flex row (.c-footer-inner-3__list)
footer-inner-3-item: inner flex row (.c-footer-inner-3__item, 3 instances)
footer-inner-3-logo: icon placeholder, 16px (.c-footer-inner-3__logo)
footer-inner-3-text-2: label text, 9 characters (.c-footer-inner-3__text-2, 3 instances)
footer-inner-3-icon: icon placeholder, 16px (.c-footer-inner-3__icon, 2 instances)
footer-inner-3-group-2: inner block (.c-footer-inner-3__group-2)
footer-inner-3-inner: inner block (.c-footer-inner-3__inner), content not captured
footer-inner-3-columns-2: inner grid (.c-footer-inner-3__columns-2)
footer-inner-3-group-3: inner flex column (.c-footer-inner-3__group-3)
footer-inner-3-icon-2: icon placeholder, 160x30px (.c-footer-inner-3__icon-2)
footer-inner-3-columns-3: inner flex row (.c-footer-inner-3__columns-3)
footer-inner-3-link-2: link (.c-footer-inner-3__link-2, 5 instances)
footer-inner-3-text-3: label text, 7 characters (.c-footer-inner-3__text-3, 6 instances)
footer-inner-3-group-4: inner block (.c-footer-inner-3__group-4, 6 instances)
footer-inner-3-icon-3: icon placeholder, 22px (.c-footer-inner-3__icon-3, 6 instances)
footer-inner-3-link-3: link (.c-footer-inner-3__link-3)
footer-inner-3-group-5: inner flex column (.c-footer-inner-3__group-5)
footer-inner-3-text-4: label text, 43 characters (.c-footer-inner-3__text-4)
footer-inner-3-inner-2: inner flex row (.c-footer-inner-3__inner-2)
footer-inner-3-cta: the button-primary-5 button (.c-footer-inner-3__cta)
footer-inner-3-text-5: label text, 9 characters (.c-footer-inner-3__text-5)
footer-inner-3-columns-4: inner grid (.c-footer-inner-3__columns-4)
footer-inner-3-columns-5: inner grid (.c-footer-inner-3__columns-5), content not captured
footer-inner-3-group-6: inner block (.c-footer-inner-3__group-6, 3 instances), content not captured
footer-inner-3-heading-2: heading, 7 characters (.c-footer-inner-3__heading-2, 2 instances)
footer-inner-3-list-2: inner group (.c-footer-inner-3__list-2, 2 instances)
footer-inner-3-item-2: inner group (.c-footer-inner-3__item-2, 27 instances)
footer-inner-3-link-4: link (.c-footer-inner-3__link-4, 29 instances), content not captured

Desktop recipe

HTML · CSS

<div class="c-footer-inner-3-scope">
  <footer class="c-footer-inner-3">
    <h2 class="c-footer-inner-3__heading">lorem</h2>
    <div class="c-footer-inner-3__group">
      <div class="c-footer-inner-3__columns">
        <div class="c-footer-inner-3__column">
          <span class="c-footer-inner-3__text">lorem ipsum dolor sit</span>
          <a class="c-footer-inner-3__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-inner-3__list">
          <li class="c-footer-inner-3__item">
            <span class="c-footer-inner-3__logo" aria-hidden="true"></span>
            <span class="c-footer-inner-3__text">lorem ipsum</span>
            <span class="c-footer-inner-3__text-2">lorem ips</span>
          </li>
          <li class="c-footer-inner-3__item">
            <span class="c-footer-inner-3__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-3__text">lorem</span>
            <span class="c-footer-inner-3__text-2">lorem ips</span>
          </li>
          <li class="c-footer-inner-3__item">
            <span class="c-footer-inner-3__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-3__text">lorem ips</span>
            <span class="c-footer-inner-3__text-2">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-inner-3__group-2"></div>
    </div>
    <div class="c-footer-inner-3__inner">
      <div class="c-footer-inner-3__columns-2">
        <div class="c-footer-inner-3__group-3">
          <span class="c-footer-inner-3__icon-2" aria-hidden="true"></span>
          <div class="c-footer-inner-3__columns-3">
            <a class="c-footer-inner-3__link-2" href="#">
              <span class="c-footer-inner-3__text-3">lorem i</span>
              <div class="c-footer-inner-3__group-4">
                <span class="c-footer-inner-3__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3__link-2" href="#">
              <span class="c-footer-inner-3__text-3">lorem</span>
              <div class="c-footer-inner-3__group-4">
                <span class="c-footer-inner-3__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3__link-2" href="#">
              <span class="c-footer-inner-3__text-3">lorem i</span>
              <div class="c-footer-inner-3__group-4">
                <span class="c-footer-inner-3__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3__link-2" href="#">
              <span class="c-footer-inner-3__text-3">lorem i</span>
              <div class="c-footer-inner-3__group-4">
                <span class="c-footer-inner-3__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3__link-2" href="#">
              <span class="c-footer-inner-3__text-3">lorem</span>
              <div class="c-footer-inner-3__group-4">
                <span class="c-footer-inner-3__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3__link-3" href="#">
              <span class="c-footer-inner-3__text-3">lorem ips</span>
              <div class="c-footer-inner-3__group-4">
                <span class="c-footer-inner-3__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-inner-3__group-5">
            <p class="c-footer-inner-3__text-4">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-inner-3__inner-2"></div>
            <button class="c-footer-inner-3__cta" type="button">
              <span class="c-footer-inner-3__text-5">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-inner-3__columns-4">
          <div class="c-footer-inner-3__columns-5">
            <div class="c-footer-inner-3__group-6">
              <h6 class="c-footer-inner-3__heading-2">lorem i</h6>
              <ul class="c-footer-inner-3__list-2">
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-3__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-3__group-6">
              <h6 class="c-footer-inner-3__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-3__list-2">
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3__item-2">
                  <a class="c-footer-inner-3__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-3__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-3__group-6"></div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-3-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-3 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-3__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-inner-3__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner-3__columns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 112px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 40px 96px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-3__column {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-3__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-3__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-3__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-inner-3__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-3__text-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
}

.c-footer-inner-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-inner-3__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 96px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-3__columns-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(7, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-3__group-3 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-inner-3__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner-3__columns-3 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner-3__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-3__text-3 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-inner-3__group-4 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-inner-3__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-3__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-3__group-5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-3__text-4 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-inner-3__inner-2 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 239.531px;
  height: 35px;
  max-width: 80%;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 450;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-3__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-inner-3__text-5 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-inner-3__columns-4 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-3__columns-5 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-3__group-6 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-3__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-inner-3__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-3__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-inner-3__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-3__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner-3__link-2:hover {
  color: #030303;
}

.c-footer-inner-3__link-3:hover {
  color: #030303;
}

.c-footer-inner-3__cta:hover {
  background-color: #007243;
}

.c-footer-inner-3__cta:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

Mobile anatomy

footer-inner-3-mobile: the component root, a <footer> (.c-footer-inner-3-mobile)
footer-inner-3-mobile-heading: heading, 6 characters (.c-footer-inner-3-mobile__heading)
footer-inner-3-mobile-group: inner block (.c-footer-inner-3-mobile__group)
footer-inner-3-mobile-columns: inner grid (.c-footer-inner-3-mobile__columns)
footer-inner-3-mobile-column: inner flex column (.c-footer-inner-3-mobile__column)
footer-inner-3-mobile-text: label text, 21 characters (.c-footer-inner-3-mobile__text, 4 instances)
footer-inner-3-mobile-link: link, 16-character label (.c-footer-inner-3-mobile__link)
footer-inner-3-mobile-list: inner flex column (.c-footer-inner-3-mobile__list)
footer-inner-3-mobile-item: inner flex row (.c-footer-inner-3-mobile__item, 3 instances)
footer-inner-3-mobile-logo: icon placeholder, 16px (.c-footer-inner-3-mobile__logo)
footer-inner-3-mobile-icon: icon placeholder, 16px (.c-footer-inner-3-mobile__icon, 2 instances)
footer-inner-3-mobile-group-2: inner block (.c-footer-inner-3-mobile__group-2)
footer-inner-3-mobile-inner: inner block (.c-footer-inner-3-mobile__inner), content not captured
footer-inner-3-mobile-group-3: inner block (.c-footer-inner-3-mobile__group-3, 4 instances)
footer-inner-3-mobile-group-4: inner flex column (.c-footer-inner-3-mobile__group-4)
footer-inner-3-mobile-icon-2: icon placeholder, 160x30px (.c-footer-inner-3-mobile__icon-2)
footer-inner-3-mobile-columns-2: inner flex row (.c-footer-inner-3-mobile__columns-2)
footer-inner-3-mobile-link-2: link (.c-footer-inner-3-mobile__link-2, 5 instances)
footer-inner-3-mobile-text-2: label text, 7 characters (.c-footer-inner-3-mobile__text-2, 6 instances)
footer-inner-3-mobile-group-5: inner block (.c-footer-inner-3-mobile__group-5, 6 instances)
footer-inner-3-mobile-icon-3: icon placeholder, 22px (.c-footer-inner-3-mobile__icon-3, 6 instances)
footer-inner-3-mobile-link-3: link (.c-footer-inner-3-mobile__link-3)
footer-inner-3-mobile-group-6: inner flex column (.c-footer-inner-3-mobile__group-6)
footer-inner-3-mobile-text-3: label text, 43 characters (.c-footer-inner-3-mobile__text-3)
footer-inner-3-mobile-group-7: inner flex row (.c-footer-inner-3-mobile__group-7)
footer-inner-3-mobile-cta: button (.c-footer-inner-3-mobile__cta)
footer-inner-3-mobile-text-4: label text, 9 characters (.c-footer-inner-3-mobile__text-4)
footer-inner-3-mobile-columns-3: inner grid (.c-footer-inner-3-mobile__columns-3)
footer-inner-3-mobile-columns-4: inner grid (.c-footer-inner-3-mobile__columns-4), content not captured
footer-inner-3-mobile-heading-2: heading, 7 characters (.c-footer-inner-3-mobile__heading-2, 3 instances)
footer-inner-3-mobile-list-2: inner group (.c-footer-inner-3-mobile__list-2, 3 instances), content not captured
footer-inner-3-mobile-item-2: inner group (.c-footer-inner-3-mobile__item-2, 28 instances), content not captured
footer-inner-3-mobile-link-4: link (.c-footer-inner-3-mobile__link-4, 29 instances), content not captured

Mobile recipe

HTML · CSS

<div class="c-footer-inner-3-mobile-scope">
  <footer class="c-footer-inner-3-mobile">
    <h2 class="c-footer-inner-3-mobile__heading">lorem</h2>
    <div class="c-footer-inner-3-mobile__group">
      <div class="c-footer-inner-3-mobile__columns">
        <div class="c-footer-inner-3-mobile__column">
          <span class="c-footer-inner-3-mobile__text">lorem ipsum dolor sit</span>
          <a class="c-footer-inner-3-mobile__link" href="#">lorem ipsum dolo</a>
        </div>
        <ul class="c-footer-inner-3-mobile__list">
          <li class="c-footer-inner-3-mobile__item">
            <span class="c-footer-inner-3-mobile__logo" aria-hidden="true"></span>
            <span class="c-footer-inner-3-mobile__text">lorem ipsum</span>
          </li>
          <li class="c-footer-inner-3-mobile__item">
            <span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-3-mobile__text">lorem</span>
          </li>
          <li class="c-footer-inner-3-mobile__item">
            <span class="c-footer-inner-3-mobile__icon" aria-hidden="true"></span>
            <span class="c-footer-inner-3-mobile__text">lorem ips</span>
          </li>
        </ul>
      </div>
      <div class="c-footer-inner-3-mobile__group-2"></div>
    </div>
    <div class="c-footer-inner-3-mobile__inner">
      <div class="c-footer-inner-3-mobile__group-3">
        <div class="c-footer-inner-3-mobile__group-4">
          <span class="c-footer-inner-3-mobile__icon-2" aria-hidden="true"></span>
          <div class="c-footer-inner-3-mobile__columns-2">
            <a class="c-footer-inner-3-mobile__link-2" href="#">
              <span class="c-footer-inner-3-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-3-mobile__group-5">
                <span class="c-footer-inner-3-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3-mobile__link-2" href="#">
              <span class="c-footer-inner-3-mobile__text-2">lorem</span>
              <div class="c-footer-inner-3-mobile__group-5">
                <span class="c-footer-inner-3-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3-mobile__link-2" href="#">
              <span class="c-footer-inner-3-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-3-mobile__group-5">
                <span class="c-footer-inner-3-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3-mobile__link-2" href="#">
              <span class="c-footer-inner-3-mobile__text-2">lorem i</span>
              <div class="c-footer-inner-3-mobile__group-5">
                <span class="c-footer-inner-3-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3-mobile__link-2" href="#">
              <span class="c-footer-inner-3-mobile__text-2">lorem</span>
              <div class="c-footer-inner-3-mobile__group-5">
                <span class="c-footer-inner-3-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
            <a class="c-footer-inner-3-mobile__link-3" href="#">
              <span class="c-footer-inner-3-mobile__text-2">lorem ips</span>
              <div class="c-footer-inner-3-mobile__group-5">
                <span class="c-footer-inner-3-mobile__icon-3" aria-hidden="true"></span>
              </div>
            </a>
          </div>
          <div class="c-footer-inner-3-mobile__group-6">
            <p class="c-footer-inner-3-mobile__text-3">lorem ipsum dolor sit amet consectetur adip</p>
            <div class="c-footer-inner-3-mobile__group-7"></div>
            <button class="c-footer-inner-3-mobile__cta" type="button">
              <span class="c-footer-inner-3-mobile__text-4">lorem ips</span>
            </button>
          </div>
        </div>
        <div class="c-footer-inner-3-mobile__columns-3">
          <div class="c-footer-inner-3-mobile__columns-4">
            <div class="c-footer-inner-3-mobile__group-3">
              <h6 class="c-footer-inner-3-mobile__heading-2">lorem i</h6>
              <ul class="c-footer-inner-3-mobile__list-2">
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-3-mobile__group-3">
              <h6 class="c-footer-inner-3-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-3-mobile__list-2">
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <li class="c-footer-inner-3-mobile__item-2">
                  <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
                </li>
                <a class="c-footer-inner-3-mobile__link-4" href="#"></a>
              </ul>
            </div>
            <div class="c-footer-inner-3-mobile__group-3">
              <h6 class="c-footer-inner-3-mobile__heading-2">lorem ips</h6>
              <ul class="c-footer-inner-3-mobile__list-2">
                <li class="c-footer-inner-3-mobile__item-2"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-3-mobile-scope {
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-3-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #FDFDFD;
  color: #030303;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 450;
  line-height: 24px;
}

.c-footer-inner-3-mobile__heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c-footer-inner-3-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner-3-mobile__columns {
  display: grid;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 24px;
  position: relative;
  font-size: 14px;
  line-height: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-3-mobile__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-3-mobile__link {
  display: block;
  box-sizing: border-box;
  color: #0E7E4E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-3-mobile__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-3-mobile__item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-footer-inner-3-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-3-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-3-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent 0px, #03030315 50%, transparent 100%);
}

.c-footer-inner-3-mobile__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 64px 24px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-3-mobile__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-3-mobile__group-4 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-inner-3-mobile__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 160px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner-3-mobile__columns-2 {
  display: flex;
  box-sizing: border-box;
}

.c-footer-inner-3-mobile__link-2 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  margin-right: 20px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-3-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-footer-inner-3-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  position: relative;
}

.c-footer-inner-3-mobile__icon-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-3-mobile__link-3 {
  display: block;
  box-sizing: border-box;
  color: #696969;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
}

.c-footer-inner-3-mobile__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-inner-3-mobile__text-3 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #696969;
  font-size: 14px;
  line-height: 20px;
}

.c-footer-inner-3-mobile__group-7 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 342px;
  height: 33px;
  padding: 8px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #00000004;
  color: #030303;
  border: 1px solid #03030325;
  border-radius: 8px;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-3-mobile__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 26px;
  padding: 4px 10px;
  position: relative;
  background-color: #0E7E4E;
  background-image: linear-gradient(#FFFFFF04, #00000003);
  color: #FAFCFB;
  border: 0;
  border-radius: 8px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-property: background-color, border-color, color, scale;
}

.c-footer-inner-3-mobile__text-4 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-footer-inner-3-mobile__columns-3 {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-top: 48px;
}

.c-footer-inner-3-mobile__columns-4 {
  display: grid;
  gap: 48px 16px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-3-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.5px;
}

.c-footer-inner-3-mobile__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-3-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.c-footer-inner-3-mobile__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #030303;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-3-mobile__link:hover {
  text-decoration-line: underline;
}

.c-footer-inner-3-mobile__link-2:hover {
  color: #030303;
}

.c-footer-inner-3-mobile__link-3:hover {
  color: #030303;
}

.c-footer-inner-3-mobile__cta:hover {
  background-color: #007243;
}

.c-footer-inner-3-mobile__cta:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset;
  outline: none;
}

States

footer-inner-3-link hover: text-decoration-line underline
footer-inner-3-link-2 hover (footer-inner-3-link-2-hover): color #030303
footer-inner-3-link-3 hover (footer-inner-3-link-3-hover): color #030303
footer-inner-3-cta hover (footer-inner-3-cta-hover): background-color #007243
footer-inner-3-cta focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none
mobile, footer-inner-3-mobile-link hover: text-decoration-line underline
mobile, footer-inner-3-mobile-link-2 hover (footer-inner-3-mobile-link-2-hover): color #030303
mobile, footer-inner-3-mobile-link-3 hover (footer-inner-3-mobile-link-3-hover): color #030303
mobile, footer-inner-3-mobile-cta hover (footer-inner-3-mobile-cta-hover): background-color #007243
mobile, footer-inner-3-mobile-cta focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FDFDFD 0px 0px 0px 2px, #30BA798C 0px 0px 0px 4px, #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset, outline none

Do's and Don'ts

Do

Weights: use only 450, 500 and 600. Set body and body-sm at 450, button and nav-link at 500, and reserve 600 for Manrope titles (heading-lg, title-sm, title-xs).
Primary fills: use Supabase Emerald (primary, #0E7E4E) for every green CTA and swap to primary-fill (#007243) on hover. This is what button-primary through button-primary-6 all do; the green fill appears at several sizes, not just one hero button.
Etched buttons: give buttons the inset stack #0000000A 0px 1px 3px 0px, #00000007 0px 1px 0px 0px inset, #0000000A 0px 0px 0px 1px inset, #00000011 0px 0px 0px 1px inset. Add #0000000A 0px -1px 0px 0px inset on white secondaries (button-secondary).
Frosted chrome: keep the blur on sticky bars, blur(4px) on the header (header-landing-mobile) and blur(12px) on the sub-nav (tab-4), over a 1px #03030315 bottom hairline.
Radius by size: match radius to control height, as the site does:
- 26px buttons at rounded.xl (button-primary).
- 34px buttons at rounded.2xl (button-primary-6).
- 38px buttons at rounded.4xl (button-primary-2).
- 42px buttons at rounded.5xl (button-primary-3).
Field states: inputs rest on a 1px #03030325 border, darken to #0303034C on hover, and take the standard focus-ring halo (input-3, textarea).
Rhythm and width: keep page sections on the section-padding-y (128px) rhythm, with the header 65px tall and its content capped at header-landing-mobile-inner-max-width (1280px).

Don't

Text green: don't use brand (#3FCF8E) or brand-tint (#A9F1CA) for text on white. They are decorative accents; links and interactive text use primary.
Heavy shadows: don't put large drop shadows on cards. Containers take a #03030315 hairline. The 10px 15px -3px shadow belongs only to floating panels like the header dropdown.
Solid grey borders: don't replace translucent ink borders (#03030315, #03030325) with solid greys. They must stay translucent to work on both surface and surface-footer.
Tracking: don't add letter-spacing to headings. Every typography token uses normal tracking.
Extra colours: don't introduce a second chromatic brand colour. accent-purple and warning are rare status or accent text, never fills or CTAs.
Custom focus: don't invent per-component focus styles. Every control uses the same 2px #FDFDFD gap plus 4px #30BA798C ring.
Pill CTAs: don't use rounded.full on primary CTAs. Pills are for tags, chips, badges and avatars.

Responsive Behavior

This analysis is two-viewport (desktop and mobile). No breakpoint values were captured, so intermediate behaviour is unknown.

What changes on mobile

Header:
- It keeps its 65px height and frosted blur(4px) hairline bar (header-landing-mobile).
- The desktop nav row of ghost buttons and links collapses into a hamburger: header-landing-mobile-button, a transparent button with 8px padding, a 24px icon and #696969 text, hovering to white with #464646 text.
- The 124x24px logo is retained (header-landing-mobile-logo).
Content:
- Hero, bento cards, pricing columns and blog rows stack into a single column of full-width cards.
- Hero CTAs stay side by side.
- Code blocks clip horizontally instead of wrapping.
Footer:
- Link columns restack and the footer grows from 1097px on desktop (footer-landing) to 1985px on mobile (footer-landing-mobile).
- Its column grid carries 24px padding (footer-landing-mobile-columns).
- This recipe is footer-landing-mobile (flagged: the footer-landing-mobile-inner height did not reproduce the measured 1860px after 2 correction attempts).

Touch targets

Desktop controls are compact: the 26px header CTA (button-primary) and 34px fields (input-3). No mobile-specific enlargement of these controls was measured. The mobile menu button's 8px padding around a 24px icon is the only mobile-tuned target observed. When designing for touch, prefer the 38px (button-primary-2) and 42px (button-primary-3) button tiers for primary actions.

Iteration Guide

Reference roles, never hexes. Write primary, ink, muted and surface instead of raw values. The dark theme swaps these roles (for example ink inverts to a light grey), so hard-coded hexes break theming.
Green is the only signal.
- New interactive elements use primary at rest and primary-fill on hover.
- Focus always uses the shared focus-ring halo.
- Do not add another accent colour to the UI chrome.

Pick the button tier, then inherit everything from it. Each tier carries a fixed height, radius and padding:

Tier	Height	Radius	Padding (y / x)	Recipes
Compact	26px	`rounded.xl`	4px / 10px	`button-primary`, `button-secondary-4`
Medium	34px	`rounded.2xl`	8px / 12px	`button-primary-6`, `button-secondary-5`
Standard	38px	`rounded.4xl`	8px / 16px	`button-primary-2`, `button-secondary`
Large	42px	`rounded.5xl`	8px / 16px	`button-primary-3`, `button-secondary-2`

Do not mix one tier's radius with another tier's height.

Elevation is assigned by role:
- Controls get the etched inset stack.
- Containers get a 1px #03030315 hairline.
- Floating menus get the 10px 15px -3px raised panel.
- Sticky chrome gets backdrop blur.
- Never promote a card to a floating shadow.
Typography stays on the ladder.
- Manrope for headings at 500–600.
- Inter at 450 for reading and 500 for controls.
- Source Code Pro only for code and numeric display.
- Letter-spacing stays normal.
- Add a new size only as a new token row, never inline.
Keep the macro rhythm. Sections sit on section-padding-y (128px) inside the 1280px container, and dense content lives inside components padded at 4–16px.
Treat flagged recipes as approximations. Re-measure before relying on their exact geometry: cards, tables, footers, header-landing, nav-menu and input.

Known Gaps

Flagged recipes. Several did not reproduce exactly; treat their dimensions as approximate:
- card (flagged: the recipe could not be rendered on its own).
- card-2 (flagged: the render matched 95% of the original pixels, below the 96% required).
- card-3 (flagged: the card-3 height did not reproduce the measured 178px after 2 correction attempts).
- card-4 (flagged: the render matched 95% of the original pixels, below the 96% required).
- card-5 (flagged: the card-5-icon x did not reproduce the measured 628px).
- table, table-2 and table-3 (flagged: row and table heights did not reproduce).
- input and input-2 (flagged: the render matched 92% of the original pixels, below the required threshold).
- header-landing (flagged: the header-landing-group-5 height did not reproduce the measured 310px after 2 correction attempts).
- header-inner (flagged: the header-inner-group-5 y did not reproduce the measured -1px).
- nav-menu and nav (flagged: the group-2 y did not reproduce the measured 64px).
- All desktop and mobile footers (flagged: inner heights did not reproduce).
Unverifiable. customer-logo and customer-logo-active (not verifiable: the page's media covers most of the component, so the comparison could not be judged).
No grid gap or base spacing token. Column gutters and a spacing base step are not specified.
Two-viewport capture only. Breakpoint values and tablet behaviour are unknown.
Dark theme. Colours were sampled, but the dark theme was not visually captured or verified per component.
Font rendering. Two captured pages rendered body text in ui-sans-serif instead of Inter. It is unclear whether this is intentional or a font-loading artefact.
Hero gradient. The gradient on the hero headline line is visible in the screenshots but has no measured stops.
Interaction coverage. Only hover and focus states were measured. Pressed and disabled states, dropdown open and close motion, and transitions and animations were not captured.
Uncaptured surfaces. Five marketing pages were captured (home, pricing, blog, cron module, contact sales). The authenticated dashboard, docs and modal dialogs were not.

Extracted from Supabase’s public website, not official brand guidelines.

More like this

Browse all

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Developer & Infrastructure · Developer Tools & IDEs

Neon

Neon's design system is a dark-first developer brand built on a near-black canvas (#000000, #18191b) with a vivid neon-green primary (#00e599) and a supporting mid-green (#34d59a). The typographic system pairs Inter (UI/body) with GeistMono (code/data), both with tight negative letter-spacing. Spacing follows a 4px base grid. Border radius is uniformly minimal at 4px. Elevation is achieved through border contrast rather than shadows, with a single ambient drop-shadow used sparingly. The hero section features a full-bleed animated data-visualization background, reinforcing the database/infrastructure brand identity.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

Supabase Design System

Button15

Card5

Extra18

Header4

Footer8

Input5

Overview

Colors

Brand & Accent

Interactive States

Surface

Text

Hairlines & Borders

Gradients

Dark Mode

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Geometry character

Components

Button, primary

Button, primary (2)

Button, secondary

Button, ghost

Card

Card (2)

Card (3)

Framework tab

Framework tab

Tab

Tab

Header (landing)

Footer (landing)

Button, primary (3)

Button, primary (4)

Button, secondary (2)

Button, secondary (3)

Button, secondary (4)

Card (4)

Table

Table (2)

Table (3)

Nav menu

Tabs (2)

Tabs (3)

Input

Input (2)

Stat link

View toggle

View toggle (2)

Footer (inner)

Button, primary (5)

Button, primary (6)

Button, secondary (5)

Button, secondary (6)

Button, ghost (2)

Card (5)

Tabs (4)

Copy button

Footer (inner, 2)

Button, secondary (7)

Input (3)

Input (4)

Textarea

Customer logo

Customer logo

Nav

Header (inner)

Footer (inner, 3)