Overview
The product card component displays a preview of a product and provides a link to further product details. It can be used as a Vue component or rendered statically with server-side markup for SEO purposes.
Basic usage
Importing the component
To use the product card component in a Vue application, import the necessary component and styles:
import { DsCardProduct, DsCardAction } from "@coloplast/design-system";
import "@coloplast/design-system/dist/components/card/ds-card-product.css";
Example usage
Here’s an example of using the product card component in a Vue template, with a custom action for adding the product to favourites:
<DsCardProduct
badge-text="New"
badge-variant="highlight"
brow-logo="coloplast-brow-logo.svg"
brow-logo-dark="coloplast-brow-logo-dark.svg"
brow-logo-alt="Brand Name Logo"
brow-text="Coloplast"
:colours="{0:{label:'Black',value:'#000'},1:{label:'Grey',value:'grey'}}"
colours-label="colours"
description="The description of the product goes here"
image="product-with-transparent-bg.png"
image-alt="Visual description of the product's image"
layout="responsive"
medium-label="Medium label - could be a price or reimbursement label"
small-label="Small label"
title="Name of the product"
url="/product-url-here">
<template #action>
<DsCardAction
action="favourite"
:actionFn="addToFavourites"
actionLabel="Add to my favourites"
/>
</template>
</DsCardProduct>
Component playground and props
Explore and test out the props using the interactive Storybook example, or visit the Product Card documentation in Storybook for more detailed examples.
Accessibility
The product card is built with semantic HTML markup, making it accessible for screen readers.
Keyboard navigation
All interactive elements, including the action button, are focusable and accessible via keyboard navigation.
Labels
The card and action elements should always have appropriate accessible labels associated with them.
Images
Product images and logos include descriptive alt text.
Internationalisation
The product card component supports multilingual environments:
Right-to-left (RTL)
The component can be rendered in right-to-left layouts for languages like Arabic or Hebrew.
Localised labels
All text labels, including action buttons, can be localised to suit different languages.
SEO
For SEO purposes, the product card can be rendered server-side to improve page indexing. It uses semantic markup for better search engine visibility.
Structured data
Due to its flexibility, the product card does not include structured data by default. For SEO, it is recommended to add structured data in JSON-LD format and validate it using appropriate tools.
Server rendering
In many cases, it may be more suitable to render product cards server-side to improve SEO performance. The product card can be statically rendered, and interactive parts, such as actions, can be mounted dynamically with JavaScript.
Import styling
Ensure the necessary CSS is included in the server-side context by importing the styles:
import "@coloplast/design-system/dist/components/card/ds-card-product.css";
Add static markup
As the product card is largely static, you can use static HTML for the card and mount only the interactive parts like the action button. Below is an example of static markup:
<article class="ds-card-product ds-card-product--responsive ds-card-product--badge">
<a class="ds-card-product__link" href="/product-url-here">
<span class="ds-visually-hidden">SenSura® Mio Concave 1-piece closed</span>
</a>
<span class="ds-badge ds-badge--highlight ds-card-product__badge">New</span>
<div class="ds-card-product__image-container">
<img
class="ds-card-product__image"
src="https://www.coloplastprofessional.dk/globalassets/images/product-images/oc---multisite/sensura-mio/1-piece-closed.png"
alt="Sensura Mio 1-piece closed"
/>
</div>
<div class="ds-card-product__content">
<img class="ds-card-product__brow-image ds-card-product__brow-image--light" src="/assets/demo/coloplast-brow-logo.svg" alt="Coloplast">
<h2 class="ds-text-heading-md ds-text--medium ds-card-product__title">SenSura® Mio Concave 1-piece closed</h2>
<p class="ds-text-body-sm ds-text--regular ds-card-product__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer class="ds-card-product__footer">
<div class="ds-card-product__labels">
<p class="ds-text-body-sm ds-text--bold ds-card-product__small-label">Small label</p>
<div class="ds-card-colours">
<ul class="ds-card-colours__list">
<li class="ds-card-colours__option" title="Black" style="--colour-bg: #000;">
<span class="ds-visually-hidden">Black</span>
</li>
<li class="ds-card-colours__option" title="Grey" style="--colour-bg: grey;">
<span class="ds-visually-hidden">Grey</span>
</li>
</ul>
</div>
</div>
<p class="ds-text-label-md ds-text--bold ds-card-product__medium-label">Medium label</p>
</footer>
</div>
</article>
Mounting the card action
If your product cards require an interactive action (e.g., adding to favourites), it’s possible to mount only the action dynamically as a Vue component while keeping the rest of the card static:
<div class="ds-card-product__image-container">
<img
class="ds-card-product__image"
src="https://www.coloplastprofessional.dk/globalassets/images/product-images/oc---multisite/sensura-mio/1-piece-closed.png"
alt="Sensura Mio 1-piece closed"
/>
<DsCardAction
action="favourite"
:actionFn="addToFavourites"
actionLabel="Add {product name} to my favourites"
/>
</div>