Skip to main content
The ACardInner component is an atom that provides a simple card container with styling from the app configuration. It supports polymorphic rendering, allowing you to specify the HTML element or Vue component to render.

​
Props

​
class
ClassNameValue
default:""
Additional CSS classes to apply to the card. Uses tailwind-merge to combine with default styles.
​
as
string | Component
default:"div"
The HTML element or Vue component to render the card as. Examples: ‘div’, ‘article’, ‘section’

​
Slots

​
default
The default slot for all card content

​
Usage

​
Basic Card

<template>
  <ACardInner>
    <h2>Card Title</h2>
    <p>Card content goes here</p>
  </ACardInner>
</template>

​
With Custom Classes

<template>
  <ACardInner class="p-6 bg-white shadow-lg rounded-lg">
    <h2>Styled Card</h2>
    <p>Custom styling applied</p>
  </ACardInner>
</template>

​
As Different Element

<template>
  <ACardInner as="article" class="border-l-4 border-blue-500">
    <h3>Article Card</h3>
    <p>Rendered as an article element</p>
  </ACardInner>
</template>

​
As Section

<template>
  <ACardInner as="section" class="mb-4">
    <header>Section Header</header>
    <div>Section content</div>
  </ACardInner>
</template>

​
Nested in BCard

<template>
  <BCard>
    <template #header>
      <ACardInner class="flex items-center justify-between p-4">
        <h2>Header Content</h2>
        <button>Action</button>
      </ACardInner>
    </template>
    
    <ACardInner class="p-4">
      <p>Main content</p>
    </ACardInner>
  </BCard>
</template>

​
Styling

The component applies styles from the app configuration: 
const cardClasses = computed(() => 
  twMerge(appConfig.ui.card.slots.body, props.class)
)
This merges:
  1. Base styles from appConfig.ui.card.slots.body
  2. Custom classes from the class prop
The twMerge utility ensures that conflicting Tailwind classes are properly resolved.

​
Implementation Details

  • Uses Vue’s <component :is> for polymorphic rendering
  • Integrates with Nuxt’s useAppConfig() for theme consistency
  • Leverages tailwind-merge for intelligent class merging
Source: /home/daytona/workspace/source/app/components/a/card/a-card-inner.vue

Build docs developers (and LLMs) love

Get started for freeTalk to us