Card

Display a card.

Usage

The card can be composed in a multitude of ways utilising the CCard, CCardText, CCardBody, CCardTitle, CCardFooter, CCardMedia, CCardFooter & CCardAction components.

Example title

Subtitle content can go here

Footer

The CCardFooter component will take a to prop that allows the style footer to become a link. Use in conjunction with CCardAction.

Example title

Subtitle content can go here

      <template>
  <CCard>
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        <CTextInput placeholder="example" />
      </CCardBody>
    </CCardText>
    <CCardFooter to="/components/card">
      <CCardAction label="Go to example" />
    </CCardFooter>
  </CCard>
</template>

Link

The CCard component will take a to prop that allows the card to be rendered as a click target.

Example title

Subtitle content can go here

Example body content

      <template>
  <CCard to="/">
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        Example body content
      </CCardBody>
    </CCardText>
  </CCard>
</template>

Large

Apply the large prop to the compositional components to utilise a large card.

Example title

Subtitle content can go here

Example body content

Go to example

      <template>
  <CCard to="/">
    <CCardText large>
      <CCardTitle
        large
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody large>
        Example body content
      </CCardBody>
    </CCardText>
    <CCardFooter large>
      <CCardAction
        size="lg"
        label="Go to example"
      />
    </CCardFooter>
  </CCard>
</template>

Media

The CCardMedia component will apply the needed padding, positioning and overflow styles to allow you to utilise images inside the Card component.

It takes top, left, right, bottom props to apply padding to the given position, or all to apply the every side. The position prop will apply flex alignment.

Example title

Subtitle content can go here

Example body content

A terminal using a curl command to interact with the Cudo Compute API

      <template>
  <CCard>
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        Example body content
      </CCardBody>
    </CCardText>
    <CCardMedia left>
      <img
        src="/api-light.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="inline-block rounded-tl-lg shadow-lg dark:hidden"
      >
      <img
        src="/api-dark.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="hidden dark:inline-block"
      >
    </CCardMedia>
    <CCardFooter to="/">
      <CCardAction label="Go to example" />
    </CCardFooter>
  </CCard>
</template>

Large

Example of CCardMedia usage with large compositional card components.

Example title

Subtitle content can go here

Example body content

      <template>
  <CCard>
    <CCardText large>
      <CCardTitle
        large
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody large>
        Example body content
      </CCardBody>
    </CCardText>
    <CCardMedia
      large
      left
    >
      <img
        src="/api-light.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="inline-block rounded-tl-lg shadow-lg dark:hidden"
      >
      <img
        src="/api-dark.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="hidden dark:inline-block"
      >
    </CCardMedia>
    <CCardFooter
      large
      to="/components/card"
    >
      <CCardAction
        size="lg"
        label="Go to example"
      />
    </CCardFooter>
  </CCard>
</template>

Landscape

The CCard component takes a layout prop for usage with CCardMedia, allowing the media to be positioned in a landscape layout.

The layoutCollapse prop is available to apply responsive styles, collapsing to a portrait layout below the xl breakpoint.

Example title

Subtitle content can go here

Example body content

Go to example

      <template>
  <CCard
    to="/"
    layout="landscape"
  >
    <CCardText>
      <CCardTitle
        title="Example title"
        subtitle="Subtitle content can go here"
      />
      <CCardBody>
        Example body content
      </CCardBody>
      <CCardAction label="Go to example" />
    </CCardText>
    <CCardMedia top>
      <img
        src="/api-light.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="inline-block rounded-tl-lg shadow-lg dark:hidden"
      >
      <img
        src="/api-dark.webp"
        alt="A terminal using a curl command to interact with the Cudo Compute API"
        class="hidden dark:inline-block"
      >
    </CCardMedia>
  </CCard>
</template>

Slots

`action`

The #action slot is an empty unstyled slot intended for absolute positioning. For example, a hover initiated close button as seen below or a notification indicator.

Example title

Example body content

      <script lang="ts" setup>
import { defaultFocusClasses } from '#cudo-components/classes'

const isHovered = ref(false)
const isFocused = ref(false)
const debouncedFocus = debouncedRef(isFocused, 100)
</script>

<template>
  <CCard
    to="/"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
    @focus="isFocused = true"
    @focusout="isFocused = false"
  >
    <template #action>
      <div
        class="absolute right--4 top--4 z-10 border-2 border-canvas-100 rounded-full dark:border-canvas-950"
        :class="[isHovered || debouncedFocus ? 'block' : 'hidden']"
      >
        <CTooltip>
          <button
            class="group/close z-10 flex items-center justify-center gap-1 border border-lm-border-1 rounded-full bg-white px-2 py-2 text-xs text-canvas-800 dark:border-dm-border hover:border-canvas-400 dark:bg-dm-bg-1 dark:text-white hover:shadow-xl dark:hover:border-canvas-500"
            :class="{ [defaultFocusClasses]: true }"
            type="button"
            @focus="isFocused = true"
            @focusout="isFocused = false"
          >
            <CIcon
              name="i-heroicons-solid-x"
              size="sm"
            />
          </button>
          <template #content>
            Remove from recent projects
          </template>
        </CTooltip>
      </div>
    </template>
    <CCardText>
      <CCardTitle title="Example title" />
      <CCardBody>
        Example body content
      </CCardBody>
    </CCardText>
  </CCard>
</template>

Props

Card

Prop	Default	Type
`to`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` Route Location the link should navigate to when clicked on.
`disabled`	`false`	`boolean`
`loading`	`false`	`boolean`
`placeholder`	`false`	`boolean`
`contain`	`'layout'`	`"size" \| "layout" \| "none" \| "paint" \| "strict" \| "content"`
`layout`	`'portrait'`	`"portrait" \| "landscape"`
`layoutCollapse`	`false`	`boolean`
`custom`		`false` Whether RouterLink should not wrap its content in an a tag. Useful when using v-slot to create a custom RouterLink
`target`		`null \| "_self" \| "_blank" \| "_parent" \| "_top" \| string & {}` Where to display the linked URL, as the name for a browsing context.
`trailingSlash`		`"append" \| "remove"` An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.

CardText

Prop	Default	Type
`large`		`boolean`

CardTitle

Prop	Default	Type
`title`		`string`
`large`		`boolean`
`size`		`"md" \| "sm" \| "lg"`
`subtitle`		`string`

CardBody

Prop	Default	Type
`large`		`boolean`

CardAction

Prop	Default	Type
`label`		`string`
`size`	`'sm'`	`"md" \| "sm" \| "lg"`

CardMedia

Prop	Default	Type
`large`		`boolean`
`top`		`boolean`
`left`		`boolean`
`bottom`		`boolean`
`right`		`boolean`
`all`		`boolean`
`position`		`"end" \| "center"`