Section heading

Tight 18px / 600 heading used on /results and other long-form pages to introduce a grouped block. The sub-line carries the count or scope qualifier.

Preview

Score breakdown

7 dimensions, weighted average

Source

apps/docs/app/recipes/section-h/recipe.tsx

export default function SectionHRecipe() {
  return (
    <div className="border-stroke bg-surface-2 rounded-2xl border p-5">
      <h3 className="text-ink-1 mb-3.5 text-[18px] font-semibold tracking-[-0.01em]">
        Score breakdown
      </h3>
      <p className="text-ink-3 -mt-2.5 mb-3.5 text-xs">7 dimensions, weighted average</p>
    </div>
  );
}

export default function SectionHRecipe() {
  return (
    <div className="border-stroke bg-surface-2 rounded-2xl border p-5">
      <h3 className="text-ink-1 mb-3.5 text-[18px] font-semibold tracking-[-0.01em]">
        Score breakdown
      </h3>
      <p className="text-ink-3 -mt-2.5 mb-3.5 text-xs">7 dimensions, weighted average</p>
    </div>
  );
}