Components

Selectable card

Highlights an option or choice, often used in marketing sections or landing pages. It can be used to build custom selection components, such as a pricing plan selector or a feature comparison card.

Component

View code

Show playground

Title

Description

Props

Props	Default	Type
`modelValue`	—	`boolean`
`selectMode`	`CardSelectionMode.CARD`	`CardSelectionMode`
`title`	`Title`	`string`
`titleClass`	—	`string`
`description`	`Description`	`string`
`descriptionClass`	—	`string`
`icon`	—	`string`
`checkIcon`	`mdi:check-circle-outline`	`string`
`containedIconShape`	`IconContainerShape.SQUARE`	`IconContainerShape`
`containedIconStyleType`	`IconContainerStyleType.FLAT`	`IconContainerStyleType`
`containedIconColor`	`ColorAccent.SECONDARY_BRAND`	`ColorAccent`
`layoutAlign`	`Align.LEFT`	`Align`
`buttonSize`	`ButtonSize.LG`	`ButtonSize`
`hasSecondaryBtn`	`true`	`boolean`
`secondaryBtnText`	`Details`	`string`
`secondaryBtnStyleType`	`ButtonStyleType.NEUTRAL_OUTLINED`	`ButtonStyleType`
`secondaryBtnIconPosition`	`IconPosition.NONE`	`IconPosition`
`secondaryBtnIcon`	`mdi:arrow-right`	`string`
`selectBtnStyleType`	`ButtonStyleType.NEUTRAL_FILLED`	`ButtonStyleType`
`selectBtnIconPosition`	`IconPosition.NONE`	`IconPosition`
`selectBtnIcon`	`mdi:arrow-right`	`string`
`selectText`	`Select`	`string`
`selectedText`	`Selected`	`string`
`hasFooter`	`true`	`boolean`
`footerContentAlign`	`Align.RIGHT`	`Align`
`isHoverable`	`true`	`boolean`
`hasShadow`	`true`	`boolean`
`disabled`	—	`boolean`

Slots

Name	Description
`default`	Slot to customize the content of the card body. If not used, the description prop will be shown in the body.
`footer`	Slot to customize the content of the footer. Only shown if `hasFooter` is true. If used, actions slot will be ignored. Be aware of using the CARD selection as the select button is located in the footer and it will be completely replaced.

 <template>
    <SelectableCard>
        <span>Custom content</span>
        
        <template #footer>
            <div>Custom footer content</div>
        </template>
    </SelectableCard>
</template>

Usage

modelValue

Controls the selected state of the card. Can be used with v-model directive.

     <SelectableCard 
        v-model="isSelected"
    />
</template>
<script setup lang="ts">
const isSelected = ref(false)
</script>

Type: boolean
Default: false

title

Sets the title of the feature.

 <template>
    <SelectableCard 
        title="Title"
    />
</template>

Type: string
Default: 'Title'

titleClass

Adds custom classes to the title element.

 <template>
    <SelectableCard 
        titleClass="text-base font-semibold"
    />
</template>

Type: string

description

Sets the description of the feature.

 <template>
    <SelectableCard 
        description="Description"
    />
</template>

Type: string
Default: 'Description'

descriptionClass

Adds custom classes to the description element.

 <template>
    <SelectableCard 
        descriptionClass="text-sm text-text-neutral-subtle"
    />
</template>

Type: string

icon

Sets the icon of the feature.

 <template>
    <SelectableCard 
        icon="mdi:help"
    />
</template>

Type: string

checkIcon

Sets the check icon of the feature, which is shown when the card is selected.

 <template>
    <SelectableCard 
        checkIcon="mdi:check-circle-outline"
    />
</template>

containedIconShape

Stablishes the shape of the contained icon. Uses the IconContainerShape enum.

 <template>
    <SelectableCard 
        :containedIconShape="IconContainerShape.CIRCLE"
    />
</template>

Type: IconContainerShape
Default: IconContainerShape.SQUARE

Options

Value	Description
`CIRCLE`	Rounded icon container shape
`SQUARE`	Square icon container shape

containedIconStyleType

Configures the style type of the contained icon. Uses the IconContainerStyleType enum.

 <template>
    <SelectableCard 
        :containedIconStyleType="IconContainerStyleType.FILLED"
    />
</template>

Type: IconContainerStyleType
Default: IconContainerStyleType.FLAT

Options

Value	Description
`FLAT`	Uses a soft background for the icon container
`FILLED`	Uses a bold background for the icon container

containedIconColor

Configures the color of the contained icon. Uses the ColorAccent enum.

 <template>
    <SelectableCard 
        :containedIconColor="ColorAccent.SECONDARY_BRAND"
    />
</template>

Type: ColorAccent
Default: ColorAccent.SECONDARY_BRAND

Options

Value	Description
`neutral`	Neutral
`success`	Success
`warning`	Warning
`danger`	Danger
`info`	Info
`primary-brand`	Primary Brand
`secondary-brand`	Secondary Brand

layoutAlign

Sets the horizontal alignment of the content. Uses the Align enum.

 <template>
    <SelectableCard 
        :layoutAlign="Align.LEFT"
    />
</template>

Type: Align
Default: Align.LEFT

Options

Value	Description
`LEFT`	Content aligns to the left side of the card.
`CENTER`	Content aligns to the center of the card.

selectMode

Controls how the card is selected. Uses the CardSelectionMode enum.

 <template>
    <SelectableCard 
        :selectMode="CardSelectionMode.BUTTON"
    />
</template>

Type: CardSelectionMode
Default: CardSelectionMode.CARD

Options

Value	Description
`CARD`	Selecting toggles by clicking the card.
`BUTTON`	Selecting toggles using the select button.

buttonSize

Sets the size of the footer buttons. Uses the ButtonSize enum.

 <template>
    <SelectableCard 
        :buttonSize="ButtonSize.LG"
    />
</template>

Type: ButtonSize
Default: ButtonSize.LG

hasSecondaryBtn

Determines whether the secondary action button in the footer is shown or not.

 <template>
    <SelectableCard 
        :hasSecondaryBtn="true"
    />
</template>

Type: boolean
Default: true

secondaryBtnText

Sets the text of the secondary action button in the footer.

 <template>
    <SelectableCard 
        secondaryBtnText="Details"
    />
</template>

Type: string
Default: 'Details'

Options

Value	Description
`2xl`	XXL button size
`xl`	XL button size
`lg`	LG button size
`md`	MD button size
`sm`	SM button size
`xs`	XS button size

secondaryBtnStyleType

Sets the style type of the secondary action button. Uses the ButtonStyleType enum.

 <template>
    <SelectableCard 
        :secondaryBtnStyleType="ButtonStyleType.NEUTRAL_OUTLINED"
    />
</template>

Type: ButtonStyleType
Default: ButtonStyleType.NEUTRAL_OUTLINED

Options

Value	Description
`primary-brand-filled`	Primary Brand Filled button style
`primary-brand-transparent`	Primary Brand Transparent button style
`primary-brand-soft`	Primary Brand Soft button style
`secondary-brand-filled`	Secondary Brand Filled button style
`neutral-outlined`	Neutral Outlined button style
`neutral-transparent`	Neutral Transparent button style
`neutral-transparent-subtle`	Neutral Transparent Subtle button style
`neutral-filled`	Neutral Filled button style
`delete-filled`	Delete Filled button style
`delete-outlined`	Delete Outlined button style
`delete-soft`	Delete Soft button style
`delete-transparent`	Delete Transparent button style

secondaryBtnIconPosition

Sets the position of the icon in the secondary action button. Uses the IconPosition enum.

 <template>
    <SelectableCard 
        :secondaryBtnIconPosition="IconPosition.LEFT"
    />
</template>

Type: IconPosition
Default: IconPosition.NONE

Options

Value	Description
`NONE`	No icon is shown in the button.
`LEFT`	Icon is shown to the left of the text in the button.
`RIGHT`	Icon is shown to the right of the text in the button.

secondaryBtnIcon

Sets the icon of the secondary action button.

 <template>
    <SelectableCard 
        secondaryBtnIcon="mdi:arrow-right"
    />
</template>

Type: string
Default: 'mdi:arrow-right'

selectBtnStyleType

Sets the style type of the select button. Uses the ButtonStyleType enum.

 <template>
    <SelectableCard 
        :selectBtnStyleType="ButtonStyleType.NEUTRAL_FILLED"
    />
</template>

Type: ButtonStyleType
Default: ButtonStyleType.NEUTRAL_FILLED

Options

Value	Description
`primary-brand-filled`	Primary Brand Filled button style
`primary-brand-transparent`	Primary Brand Transparent button style
`primary-brand-soft`	Primary Brand Soft button style
`secondary-brand-filled`	Secondary Brand Filled button style
`neutral-outlined`	Neutral Outlined button style
`neutral-transparent`	Neutral Transparent button style
`neutral-transparent-subtle`	Neutral Transparent Subtle button style
`neutral-filled`	Neutral Filled button style
`delete-filled`	Delete Filled button style
`delete-outlined`	Delete Outlined button style
`delete-soft`	Delete Soft button style
`delete-transparent`	Delete Transparent button style

selectBtnIconPosition

Sets the position of the icon in the select button. Uses the IconPosition enum.

 <template>
    <SelectableCard 
        :selectBtnIconPosition="IconPosition.LEFT"
    />
</template>

Type: IconPosition
Default: IconPosition.NONE

Options

Value	Description
`NONE`	No icon is shown in the button.
`LEFT`	Icon is shown to the left of the text in the button.
`RIGHT`	Icon is shown to the right of the text in the button.

selectBtnIcon

Sets the icon of the select button.

 <template>
    <SelectableCard 
        selectBtnIcon="mdi:arrow-right"
    />
</template>

Type: string
Default: 'mdi:arrow-right'

selectText

Sets the label for the select button when the card is not selected.

 <template>
    <SelectableCard 
        selectText="Select"
    />
</template>

Type: string
Default: 'Select'

selectedText

Sets the label for the select button when the card is selected.

 <template>
    <SelectableCard 
        selectedText="Selected"
    />
</template>

Type: string
Default: 'Selected'

hasFooter

Determines whether the card has a footer or not.

Important

When using the select mode `CardSelectionMode.BUTTON`, the footer will always be shown even if this prop is set to false, as the select button is located in the footer.

 <template>
    <SelectableCard 
        :hasFooter="true"
    />
</template>

Type: boolean
Default: true

footerContentAlign

Sets the horizontal alignment of the footer content. Uses the Align enum.

 <template>
    <SelectableCard 
        :footerContentAlign="Align.RIGHT"
    />
</template>

Type: Align
Default: Align.RIGHT

Options

Value	Description
`LEFT`	Footer content aligns to the left side of the footer.
`CENTER`	Footer content aligns to the center of the footer.
`RIGHT`	Footer content aligns to the right side of the footer.

isHoverable

Determines whether the card has a hover effect or not.

 <template>
    <SelectableCard 
        :isHoverable="true"
    />
</template>

Type: boolean
Default: true

hasShadow

Determines whether the card has a shadow effect or not.

 <template>
    <SelectableCard 
        :hasShadow="true"
    />
</template>

Type: boolean
Default: true

disabled

Determines whether the card is disabled or not.

 <template>
    <SelectableCard 
        :disabled="true"
    />
</template>

Type: boolean
Default: false

Emits

Value	Description
`@buttonClick`	Emitted when the footer button is clicked.
`@update:modelValue`	Emitted when the selected state changes.

Example

 <template>
    <SelectableCard 
        @buttonClick="handleClick"
    />
</template>
<script setup lang="ts">
const handleClick = () => {
    console.log("Button clicked")
}
</script>