Skip to content

VCard

Props

NameTypeDescription
appearanceEnum:
elevated
ghost
outlined
The appearance the card should have.
clickable-cardbooleanIndicates whether card should be a clickable <button> element.
downloadstringPrompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
elevationEnum:
0
2
4
8
12
16
24
card elevation dp
headlinestringthe text of the card heading accepts string
hrefstringThe URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hreflangstringHints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1229 more ...
card header icon See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
pingstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
referrerpolicystringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
relstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
subtitlestringthe text of the card sub-heading accepts string
targetEnum:
_self
_blank
_parent
_top
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
textstringthe text of the card sub-heading accepts string
typestringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
footerThe footer slot is for content in the card footer.
graphicThe graphic slot overrides the icon property.
mainAssign nodes to main slot to fully override a card's predefined flow and style with your own.
mediaThe media slot is mainly for images or video content above the card header.
metaThe meta slot is for action content in the card header.