Skip to content

Editorial Section

A heading and prose beside an image.

Start with the bean.

Small differences become the whole cup. We roast in small batches so each lot keeps its own character.

Roasted coffee beans on the steel counter, with the same cobalt cup behind them.

import { EditorialSection } from '@brand-studio/ui';
import { beans } from '@/demos/assets';

export default function EditorialSectionDemo() {
  return (
    <EditorialSection title="Start with the bean." asset={beans}>
      <p>Small differences become the whole cup. We roast in small batches so each lot keeps its own character.</p>
    </EditorialSection>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, EditorialSection } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { EditorialSection } from '@brand-studio/ui';

<EditorialSection title="Start with the bean." asset={beans}>
  <p>…</p>
</EditorialSection>

Accessibility

The title is an <h2>. On phones the image moves below the text.

API Reference

Prop	Type	Default
`title`	`string`	–
`children`	`React.ReactNode`	–
`asset?`	`ImageAsset`	–
`id?`	`string`	–