
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/card/index.mdx'

## 默认类名表格
  
<CssTable name="card" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.card {
  @apply relative flex flex-col;
}
.card:focus {
  @apply outline-none;
}
.card-body {
  @apply flex flex-auto flex-col;
}
.card-body :where(p) {
  @apply flex-grow;
}
.card-actions {
  @apply flex flex-wrap items-start gap-2;
}
.card figure {
  @apply flex items-center justify-center;
}
.card.image-full {
  @apply grid;
}
.card.image-full:before {
  @apply relative;
  content: "";
}
.card.image-full:before,
.card.image-full > * {
  @apply col-start-1 row-start-1;
}
.card.image-full > figure img {
  @apply h-full object-cover;
}
.card.image-full > .card-body {
  @apply relative;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.card {
  @apply rounded-box;
}
.card :where(figure:first-child) {
  @apply overflow-hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: unset;
  border-end-end-radius: unset;
}
.card :where(figure:last-child) {
  @apply overflow-hidden;
  border-start-start-radius: unset;
  border-start-end-radius: unset;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.card.bordered {
  @apply border-base-200 border;
}
.card-bordered {
  @apply border-base-200 border;
}
.card.compact .card-body {
  @apply p-4 text-sm;
}
.card-body {
  padding: var(--padding-card, 2rem);
  @apply flex flex-col gap-2;
}
.card-title {
  @apply flex items-center gap-2 text-xl font-semibold;
}
.card.image-full:before {
  @apply bg-neutral rounded-box z-10 opacity-75;
}
.card.image-full :where(figure) {
  @apply overflow-hidden;
  border-radius: inherit;
}
.card.image-full > .card-body {
  @apply text-neutral-content z-20;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.card-side {
  align-items: stretch;
  flex-direction: row;
}
.card-side :where(figure:first-child) {
  @apply overflow-hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: unset;
  border-end-start-radius: inherit;
  border-end-end-radius: unset;
}
.card-side :where(figure:last-child) {
  @apply overflow-hidden;
  border-start-start-radius: unset;
  border-start-end-radius: inherit;
  border-end-start-radius: unset;
  border-end-end-radius: inherit;
}
.card-side figure > * {
  max-width: unset;
}

:where(.card-side figure > *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-compact .card-body {
  @apply p-4 text-sm;
}
.card-compact .card-title {
  @apply mb-1;
}

.card-normal .card-body {
  padding: var(--padding-card, 2rem);
  @apply text-base;
}
.card-normal .card-title {
  @apply mb-3;
}

```

</div>
</div>



