<:import src="base.htm" />
<:define tag="bs-card:div"
// parameters
:extra=${null} // extra classes for this instance
: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}` : '',
extra,
].filter(s => s).join(' ')}
class=${_class}
>
${title}
${subtitle}
<:slot />
${footer}
<:define tag="bs-card-group:div"
// parameters
:extra=${null} // extra classes for this instance
: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}`}
:_groupClass=${extra ? `${_class} ${extra}` : _class}
class=${_groupClass}
>
<:slot />