ArdoHero

On this page

Hero section component for landing pages.

import { ArdoHero } from "ardo/ui"

<ArdoHero />

Props

Name	Type	Required	Description
`name`	`string`	No	Large title displayed prominently
`text`	`string`	No	Secondary text below the name
`tagline`	`string`	No	Descriptive tagline
`image`	`ArdoHeroImage` `\| ReactElement \| string`	No	Hero image. A string URL or a light/dark object renders an `<img>`; a React element (e.g. an inline SVG mark) is rendered as-is so it can be tinted with currentColor and scale crisply.
`actions`	`ArdoHeroAction[]`	No	Call-to-action buttons
`className`	`string`	No	Additional CSS class
`version`	`string`	No	Version string displayed as a pill badge above the name

Props type: ArdoHeroProps

Example

import { ArrowRight, Github } from "ardo/icons"

<ArdoHero
  name="Ardo"
  text="React-first Documentation"
  tagline="Build beautiful documentation sites with React."
  image="/logo.svg"
  actions={[
    { text: "Get Started", link: "/guide/getting-started", theme: "brand", icon: <ArrowRight size={16} /> },
    { text: "GitHub", link: "https://github.com/...", theme: "alt", icon: <Github size={16} /> }
  ]}
/>