Core Values

Two-title intro on the left, list of values (media + title + description) on the right.

What webelieve in.

The set of principles that quietly shapes every component we ship.

Pragmatic

Three similar lines beats a clever abstraction. Build what the task requires.

Honest

Copy-paste is the contract. No black boxes, no headless/styled split.

Quiet

Motion, surface, and type recede until the content needs them.

import { CoreValues } from '@/foundations/blocks/core-values';

export default function CoreValuesPreview() {
  return (
    <CoreValues
      eyebrow="What we"
      title="believe in."
      description="The set of principles that quietly shapes every component we ship."
      values={[
        {
          title: 'Pragmatic',
          description:
            'Three similar lines beats a clever abstraction. Build what the task requires.',
        },
        {
          title: 'Honest',
          description:
            'Copy-paste is the contract. No black boxes, no headless/styled split.',
        },
        {
          title: 'Quiet',
          description:
            'Motion, surface, and type recede until the content needs them.',
        },
      ]}
    />
  );
}

export const meta = {
  layout: 'fullscreen',
};

Dependencies

Container

Source Code

import { Container } from '@/components/container';
import { cn } from '@/lib/utils/classnames';

interface CoreValueItem {
  /** Optional icon, illustration, or image. */
  media?: React.ReactNode;
  title: React.ReactNode;
  description: React.ReactNode;
}

interface CoreValuesProps
  extends Omit<React.ComponentPropsWithRef<'section'>, 'title'> {
  /** First line of the title (rendered in foreground-secondary). */
  eyebrow: React.ReactNode;
  /** Second line of the title (rendered in default foreground). */
  title: React.ReactNode;
  description?: React.ReactNode;
  values: CoreValueItem[];
}

const CoreValues = ({
  ref,
  className,
  eyebrow,
  title,
  description,
  values,
  ...rest
}: CoreValuesProps) => (
  <section
    ref={ref}
    className={cn('w-full border-border border-t py-16 md:py-24', className)}
    {...rest}
  >
    <Container>
      <div className="flex flex-col gap-12 lg:flex-row lg:justify-between lg:gap-16">
        <div className="flex flex-col gap-6 lg:max-w-xl lg:py-4">
          <h2 className="text-balance text-4xl md:text-5xl">
            <span className="block text-foreground-secondary">{eyebrow}</span>
            {title}
          </h2>
          {description && (
            <p className="max-w-md text-pretty text-2xl text-foreground-secondary">
              {description}
            </p>
          )}
        </div>

        <div className="lg:max-w-xl lg:flex-1">
          {values.map((value, i) => (
            <div
              key={i}
              className={cn(
                'flex flex-col items-start gap-4 py-8 lg:flex-row lg:items-center lg:gap-8 lg:py-12',
                i > 0 && 'border-border border-t'
              )}
            >
              {value.media && (
                <div className="w-[120px] shrink-0">{value.media}</div>
              )}
              <div>
                <h3 className="font-semibold text-2xl">{value.title}</h3>
                <p className="text-2xl text-foreground-secondary">
                  {value.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

export type { CoreValueItem, CoreValuesProps };
export { CoreValues };

CoreValues is the “what we believe in” block — a two-line title and lede on the left, a vertical list of value items on the right. Each item can carry an icon or illustration.

Anatomy


          <CoreValues
  eyebrow="What we"
  title="believe in."
  description="A short paragraph about the values that shape every decision."
  values={[
    { title: 'Honest', description: 'We say what we mean.' },
    { title: 'Pragmatic', description: 'We ship what we said.' },
  ]}
/>

API Reference

Extends the section element.

Prop	Default	Type
`eyebrow *`	-	`ReactNode`
`title *`	-	`ReactNode`
`description`	-	`ReactNode`
`values *`	-	`CoreValueItem[]`

CoreValueItem


          interface CoreValueItem {
  media?: React.ReactNode;
  title: React.ReactNode;
  description: React.ReactNode;
}

Examples

Default