Skip to main content

Recipes

The framework never writes CSS classes for you — it only manages variables, for your own classes and your builder's own controls to read (see What it is not). These are a few short, copy-paste-ready snippets that read those variables directly, for a custom class or an element's own CSS in Bricks or Etch. Every variable named below is real and already on your site once you have applied a recipe — nothing here needs a value you don't already have.

A card that lifts on hover​

.my-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-s);
  transition: box-shadow var(--duration-m), transform var(--duration-m);
}

.my-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}

--card-padding and --card-radius already match whatever you set in More settings → Cards; the shadow steps up from --shadow-s to --shadow-m on hover, and --duration-m is the same transition length the framework uses elsewhere (forced to 0s under prefers-reduced-motion by the base CSS — your transition inherits that for free).

A button that matches the framework​

.my-button {
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-btn);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
}

--text-on-primary is never a fixed color: it is recalculated to whichever of white or your darkest base tone reaches 4.5:1 against --primary, so this button stays readable even after you change your brand color in Colors.

A pill-shaped badge​

.my-badge {
  background: var(--primary-ultra-light);
  color: var(--primary);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-s);
}

--radius-pill is always fully rounded, whatever your base radius is — it does not grow with --radius the way --radius-s/--radius-l do, so a badge stays pill-shaped at any size.

A sticky header that anchors land below​

The base CSS already does this for links to an in-page anchor (#section) once you set your header's height in More settings → Layout & grid. If you build the sticky header itself by hand instead of through a builder setting, give it this height so the two stay in sync:

.my-sticky-header {
  position: sticky;
  top: 0;
  height: var(--header-height);
}