{/* card-overlay.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './card-overlay.stories.json';
import templateSource from './card-overlay.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />


<Primary />

## Properties
<Controls />


<Stories of={comStories} />

### Options to custom:
- Full clone/copy the **Overlay Card** component and [customize it in a custom theme](https://docs.varbase.vardot.com/v/10.0.x/developers/theme-development-with-varbase/customize-a-varbase-sdc-component-in-a-custom-theme)
- Minimal copy of parts of the component and use for targeted selected entity type or bundle, and have the custom changes with styles(`css`) and scripts(`js`), or even with custom props and slots.
```
{% include 'vartheme_bs5:card-overlay' with {
  style_size: medium,
  card_border: true,
  padded: true,
  equal_height: true,
  anchor_all: true,
  horizontal_alignment: 'center',
  vertical_alignment: 'center',
  card_overlay_utility_classes: [],
  card_overlay_media_utility_classes: [],
  card_overlay_content_utility_classes: [],
  media: media,
  content: content,
} only %}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
