card-advanced Component Documentation

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`	`white`	Background color of the card
`--qds-card-text-color`	`#333`	Text color of the card
`--qds-card-radius`	`8px`	Border radius of the card
`--qds-card-hover-shadow`	`0 4px 8px rgba(0, 0, 0, 0.1)`	Shadow on hover
`--qds-accent-color`	`#0078d4`	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 Theme Card

<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: #444; --qds-card-text-color: #fff; --qds-accent-color: #8ab4f8;"
></qds-card-advanced>

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>