Patterns

Text tile

Surface tile built around a section title (tagline, title, description, and up to two actions) on a coloured background. The tile picks the button variant for its surface.

Install

npx shadcn@latest add @alix/textTile

Preview

Tagline

This is the title

A concise value statement that highlights your product.

Usage

<TextTileDefault
  bgColor="primary"
  sectionTitle={{
    tagline: { text: "Tagline" },
    title: "This is the title",
    description: "A concise value statement that highlights your product.",
    align: "start",
  }}
  buttonGroup={{
    // the tile maps the variant to the surface: outline on dark primary
    primaryAction: { children: "Primary action" },
    secondaryAction: { children: "Secondary action" },
  }}
/>

Examples

Large statement on sand

The section title's largeText variant drops the title structure for one bold line; the tile picks the filled default button for the light sand surface.

We move from liquidity pressure to a credible plan, with senior teams in the room.

<TextTileDefault
  bgColor="sand"
  sectionTitle={{
    variant: "largeText",
    description: "We move from liquidity pressure to a credible plan, with senior teams in the room.",
    align: "start",
  }}
  buttonGroup={{ primaryAction: { children: "Start an engagement" } }}
/>

Split title beside media

TextTileSplit sets a title on the surface beside its own image; give it a height context so the frameless media fills its column.

Transactions and investor services

<div className="min-h-72">
  <TextTileSplit
    bgColor="primary"
    sectionTitle={{ title: "Transactions and investor services", align: "start" }}
    media={{ src: "/brand/editorial-2.jpg", alt: "Materials arranged for a project review" }}
  />
</div>

Two tiles as a section

Compose tiles in a Grid to build a section: a titled tile on the light default surface beside a statement tile, sharing one baseline.

Turnaround and restructuring

Move from liquidity pressure to a credible plan with senior-led delivery.

Facts, financial analysis, and expert testimony, assembled under pressure.

<Grid columns={2} gap="none">
  <TextTileDefault
    bgColor="default"
    leftBorder
    sectionTitle={{
      title: "Turnaround and restructuring",
      description: "Move from liquidity pressure to a credible plan with senior-led delivery.",
      align: "start",
    }}
    buttonGroup={{ primaryAction: { children: "Explore" } }}
  />
  <TextTileDefault
    bgColor="primary"
    sectionTitle={{
      variant: "largeText",
      description: "Facts, financial analysis, and expert testimony, assembled under pressure.",
      align: "start",
    }}
    buttonGroup={{ primaryAction: { children: "Investigations" } }}
  />
</Grid>

When to use it

Use it for

A titled section on a coloured or gradient surface: tagline, title, description, and up to two actions.
A single bold statement via the section title's largeText variant when the line should do the talking.
A title beside its own image with TextTileSplit, given a height context.

Reach for something else

A section fed from serializable CMS data. Use TextAndMediaBlock or TextAndTextBlock instead.
A plain heading and description with no surface. Use SectionTitle instead.
Choosing button variants per surface by hand. The tile owns that mapping; for a bespoke pairing, compose Surface, SectionTitle, and ButtonGroup directly.

Props

Prop	Type	Default	Description
bgColor	"default" \| "transparent" \| "primary" \| "secondary" \| "sand" \| "greyGradient" \| "goldGradient"	–	The tile's surface treatment: background plus matching foreground tokens. Also picks the action button variants.
sectionTitle	SectionTitleProps	–	The tile's content: tagline, title, description, align, headingSize/headingTag, and the largeText variant.
buttonGroup	{ primaryAction?; secondaryAction? }	–	Up to two actions as Button props minus `variant`. The tile maps the variant to its surface, so a CMS field can't override it.
media (TextTileSplit)	MediaContent	–	The frameless image or video beside the split tile's title. Required; it takes its height from the parent grid.
leftBorder	boolean	false	Adds a left border and padding accent to the content block.