---
size: md
---
<div class="{{ [
        'relative',
        'group',
        'flex',
        'flex-row' => direction == 'row',
        'flex-row-reverse' => direction == 'row-reverse',
        'flex-col' => direction == 'col',
        'flex-col-reverse' => direction == 'col-reverse',
        'max-w-prose' => direction == 'col' || direction == 'col-reverse',
        'rounded-2xl',
        'overflow-hidden',
        'shadow-sm',
        bg:color ?? bg_color,
        text:color
    ] | classes | collapse_whitespace }}">
    {{ if asset }}
        <div class="{{ ['flex-1 basis-1/2' => direction == 'row' || direction == 'row-reverse'] | classes }}">
            {{ partial:components/atoms/assets/image :image="asset" width="800" classes="h-full" }}
        </div>
    {{ /if }}
    <div class="{{ [
        'flex-1 basis-1/2' => direction == 'row' || direction == 'row-reverse',
        'flex',
        'flex-col',
        'items-start',
        'space-y-2',
        'px-5 py-4' => view:size == 'sm',
        'p-6' => view:size == 'md',
        'p-7 lg:p-8' => view:size == 'lg'
    ] | classes | collapse_whitespace }}">
        {{ if slot:title }}
            <div>
                {{ slot:title }}
            </div>
        {{ /if }}
        <div>
            {{ slot }}
        </div>
    </div>
</div>