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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A collection displays a compact list of multiple related items like articles or events.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-collection>
    <c-collection.item
        heading="Improving access to federal services"
        link_url="#"
        description="The Office of Management and Budget released new guidance to help agencies improve the delivery of federal services and enhance the customer experience."
    />
    <c-collection.item
        heading="Annual cybersecurity awareness training now available"
        link_url="#"
        description="All federal employees are required to complete cybersecurity awareness training by December 31. Access the training portal to begin your coursework."
    />
    <c-collection.item
        heading="Updated telework policies for 2026"
        link_url="#"
        description="The Office of Personnel Management has issued updated guidance on telework and remote work arrangements for federal agencies."
    />
</c-collection>

<h2 class="font-heading-xl margin-top-4">With metadata</h2>
<c-collection>
    <c-collection.item
        heading="Infrastructure Investment and Jobs Act: Progress Report"
        link_url="#"
        description="A comprehensive review of the progress made under the Infrastructure Investment and Jobs Act, including highway, bridge, and broadband investments across all 50 states."
    >
        <c-collection.meta>
            <c-collection.meta_item is_tag="true" tag_new="true">New</c-collection.meta_item>
            <c-collection.meta_item>By the Department of Transportation</c-collection.meta_item>
            <c-collection.meta_item>Published March 1, 2026</c-collection.meta_item>
        </c-collection.meta>
    </c-collection.item>
    <c-collection.item
        heading="Climate Resilience Framework for Federal Facilities"
        link_url="#"
        description="New guidelines for federal agencies to assess climate-related risks and implement resilience measures across government-owned buildings and infrastructure."
    >
        <c-collection.meta>
            <c-collection.meta_item>By the General Services Administration</c-collection.meta_item>
            <c-collection.meta_item>Published February 15, 2026</c-collection.meta_item>
        </c-collection.meta>
    </c-collection.item>
</c-collection>

<h2 class="font-heading-xl margin-top-4">With calendar dates</h2>
<c-collection>
    <c-collection.item
        heading="Federal IT Modernization Summit"
        link_url="#"
        description="Join technology leaders from across federal agencies to discuss cloud migration strategies, zero trust architecture, and AI governance."
        calendar_date="2026-04-15"
        calendar_month="APR"
        calendar_day="15"
    />
    <c-collection.item
        heading="Open Government Data Workshop"
        link_url="#"
        description="A hands-on workshop for data stewards and program managers on publishing open data sets and improving data quality standards."
        calendar_date="2026-05-08"
        calendar_month="MAY"
        calendar_day="8"
    />
    <c-collection.item
        heading="Annual Performance Review Deadline"
        link_url="#"
        description="All supervisors must submit mid-year performance reviews for their direct reports through the HR portal."
        calendar_date="2026-06-30"
        calendar_month="JUN"
        calendar_day="30"
    />
</c-collection>

<h2 class="font-heading-xl margin-top-4">Headings only</h2>
<c-collection condensed="true">
    <c-collection.item heading="Executive Order on AI Safety" link_url="#" />
    <c-collection.item heading="Memorandum on Federal Data Strategy" link_url="#" />
    <c-collection.item heading="Circular A-11: Preparation and Submission of Budget Estimates" link_url="#" />
    <c-collection.item heading="Guidance on Section 508 Compliance" link_url="#" />
    <c-collection.item heading="Federal Acquisition Regulation Updates" link_url="#" />
</c-collection>
{% endblock %}