HighRise

Migrating Card Component ​

Overview ​

This guide explains how to migrate the Card component from GHL-UI to HighRise UI.

Component Changes ​

Import Changes ​

diff
- import { UICard } from '@gohighlevel/ghl-ui'
+ import { HLCard } from '@platform-ui/highrise'

Basic Usage Changes ​

diff
- <UICard>
+ <HLCard id="example-card">
     <p>Card content</p>
- </UICard>
+ </HLCard>

Props Changes ​

| GHL-UI Prop | HighRise Prop | Notes | | ------------ | ------------- | ----------------------------------------------- | --------- | --------- | ------------------------- | | borderType | borderType | Same values: info | success | warning | error; default false. | | - | id | Required in HighRise for accessibility/testing. |

Slots ​

Slots are unchanged (header, default, footer).

Examples ​

vue
<!-- Before (GHL-UI) -->
<UICard>
  <template #header>
    <div class="flex items-center">
      <h3>Card Title</h3>
    </div>
  </template>
  <p>This is the main content of the card.</p>
  <template #footer>
    <div class="flex justify-end">
      <UIButton id="action-button">Action</UIButton>
    </div>
  </template>
</UICard>

<!-- After (HighRise) -->
<HLCard id="example-card" borderType="success">
  <template #header>
    <div class="flex items-center">
      <HLText size="md" weight="medium">Card Title</HLText>
    </div>
  </template>
  <p>This is the main content of the card.</p>
  <template #footer>
    <div class="flex justify-end">
      <HLButton id="action-button">Action</HLButton>
    </div>
  </template>
</HLCard>

Styling Notes ​

  • HighRise classes: hr-card, hr-card-header, hr-card-content, hr-card-footer.
  • Border accents come from the borderType value; remove the prop to render a neutral card.
  • Default padding/border radius differ slightly; adjust surrounding layout spacing if needed.