RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Card

A flexible container with optional header and footer slots

Default Card

A surface with optional #header, default content, and #footer slots. Note that HLCard ships with no padding — add it yourself on each section.

Vendor breakdown

Keep track of vendors and their security ratings.

You've almost reached your limit

You have used 80% of your available spots. Upgrade your plan to monitor more vendors.

<template>
  <HLCard id="example-card" class="max-w-2xl">
    <template #header>
      <div class="px-6 py-5 flex items-center gap-4">
        <HLIcon size="24">
          <Gift01Icon class="w-8 h-8 text-primary-600" />
        </HLIcon>
        <div>
          <HLText class="text-gray-900" size="2xl" weight="medium">Vendor breakdown</HLText>
          <HLText class="text-gray-500" size="sm" weight="regular">Keep track of vendors and their security ratings.</HLText>
        </div>
      </div>
    </template>
    <div class="px-6 py-5">
      <HLText size="md" weight="medium">You've almost reached your limit</HLText>
      <HLText size="sm" weight="regular">You have used 80% of your available spots. Upgrade your plan to monitor more vendors.</HLText>
    </div>
    <template #footer>
      <div class="flex items-end justify-end px-6 py-5">
        <HLButton id="btn-1">View full report</HLButton>
      </div>
    </template>
  </HLCard>
</template>

<script setup lang="ts">
  import { HLButton, HLText, HLCard, HLIcon } from '@platform-ui/highrise'
  import { Gift01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Border Types

Set borderType to add a colored accent border on top of the card. Supported values: info, success, warning, and error.

Info Card

Card with info border type

Success Card

Card with success border type

Warning Card

Card with warning border type

Error Card

Card with error border type

<template>
  <div class="space-y-4">
    <HLCard id="card-info" class="max-w-2xl" borderType="info">
      <template #header>
        <div class="px-6 py-5">
          <HLText size="md" weight="medium">Info Card</HLText>
          <HLText size="sm" weight="regular">Card with info border type</HLText>
        </div>
      </template>
    </HLCard>
    <HLCard id="card-success" class="max-w-2xl" borderType="success">
      <template #header>
        <div class="px-6 py-5">
          <HLText size="md" weight="medium">Success Card</HLText>
          <HLText size="sm" weight="regular">Card with success border type</HLText>
        </div>
      </template>
    </HLCard>
    <HLCard id="card-warning" class="max-w-2xl" borderType="warning">
      <template #header>
        <div class="px-6 py-5">
          <HLText size="md" weight="medium">Warning Card</HLText>
          <HLText size="sm" weight="regular">Card with warning border type</HLText>
        </div>
      </template>
    </HLCard>
    <HLCard id="card-error" class="max-w-2xl" borderType="error">
      <template #header>
        <div class="px-6 py-5">
          <HLText size="md" weight="medium">Error Card</HLText>
          <HLText size="sm" weight="regular">Card with error border type</HLText>
        </div>
      </template>
    </HLCard>
  </div>
</template>

<script setup lang="ts">
  import { HLCard, HLText } from '@platform-ui/highrise'
</script>

Best Practices

• Padding: HLCard has no default padding (unlike the ghl-ui card component), so add padding manually to the header, content, and footer sections.
• Use the borderType prop to add a colored border to the top of the card
• Use the id prop to add an id to the card for accessibility
• Use the header and footer slots to add a header and footer to the card
• Dividers are automatic: the card draws a divider line below the header slot and above the footer slot for you — you don't need to add those borders. They only appear when the corresponding slot is filled, so a card with content alone has no divider lines.

Accessibility

• Promote HLCard to role="region" / role="group" whenever the card needs to be discoverable, and reference the header slot id through aria-labelledby.
• Tie supplemental text (status chips, helper copy) to the container with aria-describedby so the message is announced with the body.
• When the card refreshes data automatically, wrap the dynamic area in aria-live="polite" or announce updates through adjacent helper text.

Imports

import { HLCard } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	string | undefined	hr-card-{n} (auto)	The id of the element. When omitted, a stable hr-card-{n} id is generated.
borderType	'info' | 'success' | 'warning' | 'error' | false	false	Adds a colored border to the top

Emits

HLCard does not declare any custom events. Native listeners like @click (and attributes such as class, style, aria-*, and data-*) attach directly to the card's root element and work as expected.

Slots

Name	Parameters	Description
default	()	The main content of the card
header	()	The header section of the card
footer	()	The footer section of the card