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.
<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
<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
andfooter
slots to add a header and footer to the card
Imports
import { HLCard } from '@platform-ui/highrise'
Props
Name | Type | Default | Description |
---|---|---|---|
id * | string | undefined | undefined | The id of the element |
borderType | 'info' | 'success' | 'warning' | 'error' | false | false | Adds a colored border to the top |
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 |