Vuetify: hg‐card and hg‐card‐button (HgCardComponent and HgCardButtonComponent)

General

• 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.

Example Code

<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>

Example Output