card-basic Component Documentation

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`	`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

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 Theme Card

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

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>