Title With Text

Title With Text

<TitleWithText> renders a title followed by body text, and optionally a call-to-action button. It is one of the most-used building blocks for React pages.

Basic Usage

<TitleWithText
  title="What is Cardano?"
  description="A proof-of-stake blockchain platform for changemakers, innovators, and visionaries."
/>

Props

Prop	Type	Default	Description
title	string		The heading. Rendered as an <h1>, so treat it as the primary heading of its section.
description	string | array | object		Body content (see formats below).
titleType	"red" | "green" | (other)	black	Title color. Any other value renders the default black.
headingDot	boolean	false	Adds the decorative leading dot to the title.
slightText	string[]		Extra muted lines rendered below the description.
buttonLabel	string		Call-to-action label. Requires buttonLink to appear.
buttonLink	string		Destination for the button. Requires buttonLabel.
headingLevel	number	1	Heading level of the title, 1 to 6. The look stays the same, so the level can follow the page outline, for example 2 below a page hero.
className	string	-	Extra class on the outer element.

Description formats

description accepts three shapes, and text runs through basic Markdown parsing (bold, links):

• String renders as a paragraph:

  <TitleWithText title="Governance" description="Ada holders shape the platform." />

• { list: [...] } renders a bullet list:

  <TitleWithText
    title="Why Cardano"
    description={{ list: ["Peer-reviewed research", "Formal methods", "Sustainable"] }}
  />

• Array renders each entry in order (mix paragraphs and lists):

  <TitleWithText
    title="Overview"
    description={["An intro paragraph.", { list: ["Point one", "Point two"] }]}
  />

With a call-to-action

<TitleWithText
  title="Get started"
  description="Set up a wallet and receive your first ada."
  buttonLabel="Get a wallet"
  buttonLink="/what-is-a-wallet"
/>