Cards

import { CardPrimary } from '@clickhouse/click-ui'

function MyCardPrimary() {
return (
  <CardPrimary 
    title="Card Title"
    description="A description that relates to the card."
    icon="building"
    infoUrl="https://clickhouse.com"
    infoText="Learn more"
  />
)
}

import { CardPrimary, CardSecondary, CardHorizontal, CardPromotion } from '@clickhouse/click-ui'

function MyCards() {
return (
  <div>
    <CardPrimary 
      title="Primary Card"
      description="This is a primary card."
      icon="building"
    />
    <CardSecondary 
      title="Secondary Card"
      description="This is a secondary card."
      icon="building"
    />
    <CardHorizontal 
      title="Horizontal Card"
      description="This is a horizontal card."
      iconUrl="https://example.com/icon.png"
    />
    <CardPromotion 
      label="Promotion"
      icon="star"
    />
  </div>
)
}

import { CardPrimary, Container } from '@clickhouse/click-ui'

function DashboardCards() {
return (
  <Container orientation='horizontal' gap='md' wrap='wrap'>
    <CardPrimary 
      icon='chart' 
      title='Total Revenue' 
      description='$125,000 this month' 
    />
    <CardPrimary 
      icon='users' 
      title='Active Users' 
      description='1,234 active users' 
    />
  </Container>
)
}

import { CardSecondary, Container } from '@clickhouse/click-ui'

function FeatureCards() {
return (
  <Container orientation='horizontal' gap='md' wrap='wrap'>
    <CardSecondary 
      icon='feature1' 
      title='Feature 1' 
      description='Description of feature 1' 
      infoUrl='https://clickhouse.com'
      infoText='Learn more'
    />
  </Container>
)
}

import { CardHorizontal } from '@clickhouse/click-ui'

function ProductCards() {
return (
  <CardHorizontal 
    iconUrl='https://example.com/product.png'
    title='Product Name' 
    description='Product description.' 
    infoUrl='https://clickhouse.com' 
    infoText='View Details'
    topBadgeText='New'
    topBadgeState='success'
  />
)
}