Components / Content

CtaCard

A wide highlighted card that points to one next step.

Extracted fromMarketing site

Import

tsx

import { CtaCard } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { CtaCard } from "@somnia-chain/ui/next"

Examples

Next step

Venue Kit

Launch a venue in an afternoon

Brand, markets and fees are configuration. The order books, matching and settlement are already running.

Create a venue Read the playbook

examples/cta-card/default.tsxShow code

tsx

import { CtaCard } from "@somnia-chain/ui"

export default function CtaCardExample() {
  return (
    <CtaCard
      eyebrow="Venue Kit"
      title="Launch a venue in an afternoon"
      body="Brand, markets and fees are configuration. The order books, matching and settlement are already running."
      actions={[
        { label: "Create a venue", href: "#" },
        { label: "Read the playbook", href: "#", variant: "secondary" },
      ]}
    />
  )
}