Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import "./Card.scss";
import classNames from "$lib/util/classNames";
let className = "";
export { className as class };
$: classes = classNames("usa-card", $$slots.image ? "usa-card--flag" : null, className);
</script>
<li class={classes}>
<div class="usa-card__container">
{#if $$slots.header}
<div class="usa-card__header">
<!-- Use the appropriate section heading element, likely <h2> or <h3>, based on page structure -->
<slot name="header" />
</div>
{/if}
{#if $$slots.image}
<div class="usa-card__media">
<div class="usa-card__img">
<!-- $lib/components/Image slot -->
<slot name="image" />
</div>
</div>
{/if}
{#if $$slots.body}
<div class="usa-card__body">
<!-- Text content for body, typically a <p> element -->
<slot name="body" />
</div>
{/if}
{#if $$slots.footer}
<div class="usa-card__footer">
<!-- $lib/components/Button slot -->
<slot name="footer" />
</div>
{/if}
</div>
</li>
|