Skip to main content

Block Styling

Style individual blocks in your theme.

Block CSS Files​

Create CSS files for each block type:

blocks/
├── hero.css
├── features.css
├── pricing.css
├── testimonials.css
└── footer.css

Example: Hero Block​

/* blocks/hero.css */
.block-hero {
  padding: var(--theme-section-padding, 4rem) 0;
  background: linear-gradient(
    135deg,
    var(--theme-primary),
    var(--theme-secondary)
  );
  color: white;
}

.block-hero__title {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--theme-font-heading);
}

.block-hero__subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
}

.block-hero__cta {
  display: inline-block;
  padding: 1rem 2rem;
  background: white;
  color: var(--theme-primary);
  border-radius: var(--theme-radius);
  font-weight: 600;
}

Block Variants​

Style different block variants:

/* Hero with image on right */
.block-hero--image-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Hero with background image */
.block-hero--background {
  background-size: cover;
  background-position: center;
}

/* Hero minimal */
.block-hero--minimal {
  text-align: center;
  padding: 6rem 0;
}

Responsive Styles​

@media (max-width: 768px) {
  .block-hero {
    padding: 2rem 0;
  }
  
  .block-hero__title {
    font-size: 2rem;
  }
  
  .block-hero--image-right {
    grid-template-columns: 1fr;
  }
}

Using Theme Variables​

Always use theme variables for consistency:

/* Good */
.my-block {
  color: var(--theme-text);
  background: var(--theme-surface);
}

/* Avoid */
.my-block {
  color: #1f2937;
  background: #f3f4f6;
}