- Swap
<hg-card> and <hg-card-button> for <HgCardComponent>.
- The
dense prop is no longer needed.
- The
menu slot has been replaced with a menu-items slot that expects <v-list-item> elements. See example below.
- The
height prop should be specified on any <img> elements supplied in the icon slot. To match regular-size icons, the height should be 30. To match small-size icons, the height should be 25. See example below.
-
<img> and <v-icon> elements do not need much in the way of classes or additional props.
- There's an alternate method to make all cards in a
<v-row> expand to the same height, using the d-flex class on the <v-col> and the flex-grow-1 class on the <HgCardComponent>. See example below.
<v-row>
<v-col class="d-flex">
<HgCardComponent
title="Proof of Vaccination"
class="flex-grow-1"
@click="download"
>
<template #icon>
<img
src="@/assets/images/gov/canada-gov-logo.svg"
alt="Organ Donor Registry Logo"
:height="30"
/>
</template>
<div>
Download and print your Federal Proof of Vaccination for
domestic and international travel.
</div>
</HgCardComponent>
</v-col>
<v-col class="d-flex">
<HgCardComponent
title="Medications"
class="flex-grow-1"
@click="loadTimeline(EntryType.Medication)"
>
<template #icon>
<v-icon icon="fas fa-pills" />
</template>
<span>See your medication history dating back to 1995</span>
<template #menu-items>
<v-list-item
title="Remove"
@click="removeQuickLink(EntryType.Medication)"
/>
</template>
</HgCardComponent>
</v-col>
</v-row>
<v-row>
<v-col :cols="6">
<HgCardComponent
title="Health Records"
to="/timeline"
>
<template #icon>
<img
src="@/assets/images/gov/health-gateway-logo.svg"
alt="Health Gateway Logo"
:height="30"
/>
</template>
<template #action-icon>
<v-icon icon="fas fa-chevron-right" />
</template>
</HgCardComponent>
</v-col>
</v-row>