Card Basic Component

The qds-card-basic component provides a simple card layout for displaying content with a title, description, optional icon, and an action button.

Usage

<qds-card-basic 
  title="Direct Data Access" 
  description="Access the Quantum Golden Dataset directly using ODBC"
  button-text="Browse"
  href="#data-access"
></qds-card-basic>

Attributes

Attribute	Type	Default	Description
title	String	“”	The card title text
description	String	“”	The card description text
icon	String	Database icon	SVG string or URL to image
button-text	String	“Browse”	Text for the action button
href	String	“#”	URL that the card button links to
target	String	“_self”	Where to open the link

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

CSS Parts

Part	Description
card	The main card container
header	The card header section
icon	The icon 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 Card

<qds-card-basic 
  title="Data Import" 
  description="Import data from various sources"
  button-text="Get started"
  href="#import"
></qds-card-basic>

Card with Custom Icon

<qds-card-basic 
  title="Data Visualization" 
  description="Create interactive charts and dashboards"
  button-text="View demos"
  href="#visualization"
  icon="<svg viewBox='0 0 24 24' fill='currentColor'><path d='M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9,17H7v-7h2V17z M13,17h-2V7h2V17z M17,17h-2v-4h2V17z'/></svg>"
></qds-card-basic>

Dark Surface Card

<div data-theme="dark">
  <qds-card-basic 
    title="Night Mode" 
    description="Configure dark theme settings for your application"
    button-text="Configure"
    href="#night-mode"
    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-basic>
</div>

Card Grid Layout

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;">
  <qds-card-basic 
    title="Card 1" 
    description="Description for card 1"
    href="#card1"
  ></qds-card-basic>
  
  <qds-card-basic 
    title="Card 2" 
    description="Description for card 2"
    href="#card2"
  ></qds-card-basic>
  
  <qds-card-basic 
    title="Card 3" 
    description="Description for card 3"
    href="#card3"
  ></qds-card-basic>
</div>