Skip to content

Accessibility: Not Needed

Translations: Not Needed

Card

Default Card

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 plan to monitor more vendors. Our premium plans offer expanded vendor monitoring capabilities with additional features like real-time alerts, detailed security assessments, and comprehensive risk scoring. By upgrading, you'll gain access to unlimited vendor spots, advanced analytics dashboards, and customizable reporting tools. This will help you better manage vendor relationships, ensure compliance, and maintain strong security standards across your supply chain. Don't let limited spots constrain your vendor management - upgrade today to unlock the full potential of our platform.

Vue
html
<template>
  <HLCard id="example-card" borderType="info">
    <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">{{mainContent}}</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

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

Vue
html
<template>
  <HLCard id="example-card" 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>
</template>
<script setup lang="ts">
  import { HLCard, HLText } from '@platform-ui/highrise'
</script>

Best Practices

  • Padding Requirements (Important):
    • HLCard does NOT include any default padding (unlike ghl-ui card component)
    • You MUST add padding manually to 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

Imports

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

Props

NameTypeDefaultDescription
id *string | undefinedundefinedThe id of the element
borderType'info' | 'success' | 'warning' | 'error' | falsefalseAdds a colored border to the top

Slots

NameParametersDescription
default()The main content of the card
header()The header section of the card
footer()The footer section of the card