Section Picker Card

hero181

Portrait Hero

Tall photograph beside a heading, a short paragraph and a checked benefit list.

About this piece

Section Picker Card

One card from a block picker. Its preview loads behind a sweeping skeleton while the section id, title and description sit ready underneath, the way a picker fills a grid.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

hero181

Portrait Hero

Tall photograph beside a heading, a short paragraph and a checked benefit list.

Usage
import { Editor50 } from "@/components/beste/component/editor50";

<Editor50
  sectionId="hero181"
  title="Portrait Hero"
  description="Tall photograph beside a heading, a short paragraph and a checked benefit list."
/>

Usage

The import and the props worth knowing about, in one place.

import { Editor50 } from "@/components/beste/piece/editor50";

<Editor50
  sectionId="hero181"
  title="Portrait Hero"
  description="Tall photograph beside a heading, a short paragraph and a checked benefit list."
  addLabel="Add to Page"
  surface="card"
  bordered={true}
  inverted={false}
  loadMs={1400}
/>

More Editor pieces

View all Editor
Theme

Theme Switcher

Settings card with a segmented light / dark / system toggle and icon plus label per option.

Launch Checklist

Ship with confidence by running through the five-point review.

  • Verify preview URL
  • Run smoke suite
  • Tag the release
pnpm release

Markdown Preview

Rendered markdown mini card with a heading, lede paragraph, bullet list, and inline code chip.

Switch branch…
  • feat/onboarding
  • main
  • feat/ai-suggest3
  • chore/cleanup

Branch Switcher

Branch picker popover with search, a list of branches, ahead counts, and an emerald check on the current one.

const msg = greet("Beste");
function greet(name: string): string

Returns a localized greeting for the given name.

@/lib/greet.ts

Hover Popover

Wavy-underlined symbol above a type-hover card showing signature, one-line description, and source path.

Feature#feature283
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block

Section Settings Sidebar

Everything that shapes a section but is kept off the page itself, with a soft highlight travelling down the rows to show each one is a live control.

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

Ruler Guide

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.