<:import src="base.htm" />
<:define tag="bs-card:div"
// parameters
::bodyExtra=${null} // extra classes for the body: `p-0`, `p-4`, `d-flex`
::title=${null}
::subtitle=${null}
::header=${null}
::footer=${null}
::image=${null}
::imageAlt=${''}
::imageBottom=${false}
::variant=${null} // colours the whole card, e.g. 'primary'
::border=${null} // colours only the border
::align=${null} // 'center' | 'end'
// private
:_class=${[
'card',
variant ? `text-bg-${variant}` : '',
border ? `border-${border}` : '',
align ? `text-${align}` : '',
].filter(s => s).join(' ')}
class=${_class}
>
${title}
${subtitle}
<:slot />
${footer}
<:define tag="bs-card-group:div"
// parameters
::cols=${3}
::gap=${4}
::attached=${false} // a seamless strip instead of separate cards
// private
:_class=${attached
? 'card-group'
: `row row-cols-1 row-cols-md-${cols} g-${gap}`}
class=${_class}
>
<:slot />