Card Advanced Component

The qds-card-advanced component provides a versatile card layout with a media/image section, title, description, and action button. It supports different image positions and is designed for richer content presentation.

Usage

<qds-card-advanced 
  title="Cyber Security" 
  description="Quantum Cyber expectations, cyber awareness tools, cyber security guides, and online cyber assessment portal"
  button-text="More"
  href="#cyber-security"
  image="path/to/image.jpg"
></qds-card-advanced>

Attributes

Attribute	Type	Default	Description
title	String	“”	The card title text
description	String	“”	The card description text
image	String	“”	URL to the image to display
button-text	String	“More”	Text for the action button
href	String	“#”	URL that the card button links to
target	String	“_self”	Where to open the link
image-position	String	“top”	Position of the image (top, bottom)

Events

Event	Detail	Description
click	{ href: string }	Fired when the card button is clicked

CSS Custom Properties

Property	Default	Description
--qds-card-bg-color	var(--theme-background-primary)	Background color of the card
--qds-card-text-color	var(--theme-text-primary)	Text color of the card
--qds-card-radius	var(--theme-radius-md)	Border radius of the card
--qds-card-hover-shadow	var(--theme-shadow-sm)	Shadow on hover
--qds-accent-color	var(--theme-accent-primary)	Accent color for icon and button
--qds-card-image-height	180px	Height of the image section

CSS Parts

Part	Description
card	The main card container
media	The media/image section
image	The image element
content	The card content section
title	The title element
description	The description element
footer	The card footer section
button	The action button

Examples

Basic Advanced Card

<qds-card-advanced 
  title="Data Analytics" 
  description="Advanced analytics solutions for business intelligence"
  button-text="Explore"
  href="#data-analytics"
  image="path/to/analytics-image.jpg"
></qds-card-advanced>

Card with Bottom Image

<qds-card-advanced 
  title="Image on Bottom" 
  description="This card has the image positioned at the bottom"
  button-text="View details"
  href="#bottom-image"
  image="path/to/image.jpg"
  image-position="bottom"
></qds-card-advanced>

Dark Surface Card

<div data-theme="dark">
  <qds-card-advanced 
    title="Dark Mode Security" 
    description="Security features for dark mode environments"
    button-text="Configure"
    href="#dark-security"
    image="path/to/security-image.jpg"
    style="
      --qds-card-bg-color: var(--theme-background-primary);
      --qds-card-text-color: var(--theme-text-primary);
      --qds-card-muted-text-color: var(--theme-text-secondary);
      --qds-card-border-color: var(--theme-border-primary);
      --qds-card-shadow: var(--theme-shadow-xs);
      --qds-card-hover-shadow: var(--theme-shadow-sm);
      --qds-accent-color: var(--theme-accent-primary);
    "
  ></qds-card-advanced>
</div>

Advanced Card Grid Layout

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
  <qds-card-advanced 
    title="Card 1" 
    description="Description for card 1"
    image="path/to/image1.jpg"
    href="#card1"
  ></qds-card-advanced>
  
  <qds-card-advanced 
    title="Card 2" 
    description="Description for card 2"
    image="path/to/image2.jpg"
    href="#card2"
  ></qds-card-advanced>
  
  <qds-card-advanced 
    title="Card 3" 
    description="Description for card 3"
    image="path/to/image3.jpg"
    href="#card3"
  ></qds-card-advanced>
</div>

Customizing Image Height

<qds-card-advanced 
  title="Taller Image" 
  description="This card has a taller image section"
  button-text="View"
  href="#tall-image"
  image="path/to/tall-image.jpg"
  style="--qds-card-image-height: 240px;"
></qds-card-advanced>