{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">Cards contain content and actions about a single subject.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-card.group>
    <c-card grid_layout="tablet:grid-col-4">
        <c-card.header>
            <h3 class="usa-card__heading">Federal Employment</h3>
        </c-card.header>
        <c-card.body>
            <p>Explore career opportunities across federal agencies. Search open positions, review qualifications, and apply online.</p>
        </c-card.body>
        <c-card.footer>
            <c-button text="Search jobs" />
        </c-card.footer>
    </c-card>
</c-card.group>

<h2 class="font-heading-xl margin-top-4">Card with media</h2>
<c-card.group>
    <c-card grid_layout="tablet:grid-col-6" header_first="true">
        <c-card.header>
            <h3 class="usa-card__heading">National Parks and Recreation</h3>
        </c-card.header>
        <c-card.media>
            <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--702702b2.jpg" alt="A placeholder image" />
        </c-card.media>
        <c-card.body>
            <p>Discover America's national parks, forests, and public lands. Plan your visit, find trail maps, and learn about conservation efforts.</p>
        </c-card.body>
        <c-card.footer>
            <c-button text="Find a park" />
        </c-card.footer>
    </c-card>
</c-card.group>

<h2 class="font-heading-xl margin-top-4">Flag layout</h2>
<c-card.group>
    <c-card layout="flagDefault" grid_layout="tablet:grid-col-12">
        <c-card.media>
            <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--702702b2.jpg" alt="A placeholder image" />
        </c-card.media>
        <c-card.header>
            <h3 class="usa-card__heading">Disaster Preparedness Guide</h3>
        </c-card.header>
        <c-card.body>
            <p>Learn how to prepare for natural disasters. Create an emergency plan, build a supply kit, and stay informed with real-time alerts from FEMA.</p>
        </c-card.body>
        <c-card.footer>
            <c-button text="View guide" />
        </c-card.footer>
    </c-card>
</c-card.group>

<h2 class="font-heading-xl margin-top-4">Card group</h2>
<c-card.group>
    <c-card grid_layout="tablet:grid-col-4">
        <c-card.header>
            <h3 class="usa-card__heading">Benefits</h3>
        </c-card.header>
        <c-card.body>
            <p>Learn about federal benefits programs including Social Security, Medicare, and veterans' benefits.</p>
        </c-card.body>
        <c-card.footer>
            <c-button text="Explore benefits" />
        </c-card.footer>
    </c-card>
    <c-card grid_layout="tablet:grid-col-4">
        <c-card.header>
            <h3 class="usa-card__heading">Taxes</h3>
        </c-card.header>
        <c-card.body>
            <p>File your federal taxes, check your refund status, and find free tax preparation assistance near you.</p>
        </c-card.body>
        <c-card.footer>
            <c-button text="File taxes" />
        </c-card.footer>
    </c-card>
    <c-card grid_layout="tablet:grid-col-4">
        <c-card.header>
            <h3 class="usa-card__heading">Immigration</h3>
        </c-card.header>
        <c-card.body>
            <p>Check your immigration case status, apply for citizenship, and find information about visa categories.</p>
        </c-card.body>
        <c-card.footer>
            <c-button text="Check status" />
        </c-card.footer>
    </c-card>
</c-card.group>
{% endblock %}