Content

ccm-card

Props

NameTypeDefaultDescription

toStringrequiredLink destination (Nuxt router path)

titleStringrequiredCard title for accessibility (used in aria-label)

imageString-Optional image URL

sizeStringlControls padding using design tokens (xs, s, m, l, xl, 2xl, 3xl)

backgroundColorStringcolor-primary-tint-20CSS custom property name for background color

Slots

default

Main card content area

image

Custom image content (overrides default image display)

Examples

Text-only Card

<ccm-card to="/about" title="About Us">
  <h3>About Our Company</h3>
  <p>Learn more about our mission and values.</p>
</ccm-card>

Card with Image

<ccm-card 
  to="/services" 
  title="Our Services"
  image="/images/services-hero.jpg"
>
  <h3>What We Do</h3>
  <p>Discover our comprehensive service offerings.</p>
</ccm-card>

Custom Styling

<ccm-card 
  to="/contact" 
  title="Contact Us"
  size="xl"
  background-color="color-secondary-tint-20"
>
  <h3>Get In Touch</h3>
  <p>Ready to start your project? Let's talk.</p>
</ccm-card>

Custom Image Slot

<ccm-card to="/portfolio" title="Portfolio">
  <template #image>
    <div class="custom-image-area">
      <icon name="portfolio" size="large" />
    </div>
  </template>
  <h3>Our Work</h3>
  <p>Explore our latest projects and case studies.</p>
</ccm-card>

Hero

Tagline