Collection

A flexible collection component following USWDS patterns for displaying lists of content with various metadata, images, or calendar displays.

Props

Prop	Default	Description
`condensed`	`false`	Enable condensed layout (headings only style)
`extra_classes`		Additional CSS classes for the collection

Slots

Slot	Description
(default)	Collection items

Sub-components

`c-collection.item`

Prop	Default	Description
`heading`		Item heading text
`heading_tag`	`h4`	HTML tag for heading
`heading_classes`		Additional CSS classes for heading
`link_url`		URL for the heading link
`description`		Item description text
`img_src`		Image source URL (for media thumbnail variant)
`img_alt`		Image alt text
`calendar_date`		ISO datetime for calendar display
`calendar_month`		Month abbreviation (e.g., "SEP")
`calendar_day`		Day number for calendar display
`extra_classes`		Additional CSS classes for the item

`c-collection.meta`

Wrapper for metadata information (authors, dates, sources).

Prop	Default	Description
`aria_label`	`More information`	ARIA label for the meta list
`extra_classes`		Additional CSS classes for the meta list

`c-collection.meta_item`

Individual metadata item (author, date, or tag).

Prop	Default	Description
`extra_classes`		Additional CSS classes for the meta item
`is_tag`	`false`	Style as a tag badge
`tag_new`	`false`	Add "new" styling to tag

Example Usage

Default Collection

<c-collection>
    <c-collection.item
        heading="Gears of Government President's Award winners"
        link_url="https://example.gov/article"
        description="Today, the Administration announces the winners of the Gears of Government President's Award."
    >
        <c-collection.meta>
            <c-collection.meta_item>By Sondra Ainsworth</c-collection.meta_item>
            <c-collection.meta_item>
                <time datetime="2020-09-30T12:00:00+01:00">September 30, 2020</time>
            </c-collection.meta_item>
        </c-collection.meta>
        <c-collection.meta aria_label="Topics">
            <c-collection.meta_item is_tag tag_new>New</c-collection.meta_item>
            <c-collection.meta_item is_tag>PMA</c-collection.meta_item>
            <c-collection.meta_item is_tag>OMB</c-collection.meta_item>
        </c-collection.meta>
    </c-collection.item>
</c-collection>

Collection with Media Thumbnail

<c-collection>
    <c-collection.item
        heading="Women-owned small business dashboard"
        link_url="https://example.gov/article"
        description="In honor of National Women's Small Business Month..."
        img_src="https://example.gov/img/wosb.jpg"
        img_alt="Woman Owned Small Business"
    >
        <c-collection.meta>
            <c-collection.meta_item>By Constance Lu</c-collection.meta_item>
            <c-collection.meta_item>
                <time datetime="2020-09-30T12:00:00+01:00">September 30, 2020</time>
            </c-collection.meta_item>
        </c-collection.meta>
        <c-collection.meta aria_label="Topics">
            <c-collection.meta_item is_tag>SBA</c-collection.meta_item>
        </c-collection.meta>
    </c-collection.item>
</c-collection>

Collection with Calendar Date

<c-collection>
    <c-collection.item
        heading="September 2020 updates show progress"
        link_url="https://example.gov/article"
        description="Progress updates for both Cross-Agency Priority (CAP) Goals..."
        calendar_date="2020-09-17T12:00:00+01:00"
        calendar_month="SEP"
        calendar_day="17"
    />
</c-collection>

Condensed Collection (Headings Only)

<c-collection condensed>
    <c-collection.item
        heading="The eight principles of mobile-friendliness"
        link_url="https://digital.gov/guides/mobile-principles/"
    >
        <c-collection.meta>
            <c-collection.meta_item extra_classes="position-relative">
                <c-icon name="public" extra_classes="position-relative bottom-neg-2px" />
                Digital.gov
            </c-collection.meta_item>
        </c-collection.meta>
    </c-collection.item>

    <c-collection.item
        heading="The USWDS maturity model"
        link_url="https://designsystem.digital.gov/maturity-model/"
    >
        <c-collection.meta>
            <c-collection.meta_item extra_classes="position-relative">
                <c-icon name="public" extra_classes="position-relative bottom-neg-2px" />
                U.S. Web Design System
            </c-collection.meta_item>
        </c-collection.meta>
    </c-collection.item>
</c-collection>

{% load cotton %}

<div class="component-variants">
    <h1>Collection Component</h1>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton collection condensed="{{ variant.condensed|default:'' }}" %}
            {% for item in variant.items %}
            {% cotton collection.item heading="{{ item.heading }}" link_url="{{ item.link_url }}" description="{{ item.description|default:'' }}" img_src="{{ item.img_src|default:'' }}" img_alt="{{ item.img_alt|default:'' }}" calendar_date="{{ item.calendar_date|default:'' }}" calendar_month="{{ item.calendar_month|default:'' }}" calendar_day="{{ item.calendar_day|default:'' }}" %}
                {% if item.meta_info %}
                {% cotton collection.meta %}
                    {% for meta in item.meta_info %}
                    {% cotton collection.meta_item extra_classes="{{ meta.extra_classes|default:'' }}" %}
                        {% if meta.datetime %}
                        <time datetime="{{ meta.datetime }}">{{ meta.text }}</time>
                        {% else %}
                        {{ meta.text }}
                        {% endif %}
                    {% endcotton %}
                    {% endfor %}
                {% endcotton %}
                {% endif %}

                {% if item.tags %}
                {% cotton collection.meta aria_label="Topics" %}
                    {% for tag in item.tags %}
                    {% cotton collection.meta_item is_tag="true" tag_new="{{ tag.is_new|default:'' }}" %}
                        {{ tag.text }}
                    {% endcotton %}
                    {% endfor %}
                {% endcotton %}
                {% endif %}
            {% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Collection
context:
  variants:
    - title: "Default Collection"
      items:
        - heading: "Gears of Government President's Award winners"
          link_url: "https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
          description: "Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people."
          meta_info:
            - text: "By Sondra Ainsworth and Constance Lu"
            - text: "September 30, 2020"
              datetime: "2020-09-30T12:00:00+01:00"
          tags:
            - text: "New"
              is_new: "true"
            - text: "PMA"
            - text: "OMB"
        - heading: "Women-owned small business dashboard"
          link_url: "https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
          description: "In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!"
          meta_info:
            - text: "By Constance Lu"
            - text: "September 30, 2020"
              datetime: "2020-09-30T12:00:00+01:00"
          tags:
            - text: "SBA"
        - heading: "September 2020 updates show progress on cross-agency and agency priority goals"
          link_url: "https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
          description: "Today, we published progress updates for both Cross-Agency Priority (CAP) Goals and Agency Priority Goals (APGs) for the third quarter of FY2020. These updates highlight recent milestones and accomplishments as well as related initiatives that support progress towards a more modern and effective government."
          meta_info:
            - text: "By Eric L. Miller"
            - text: "September 17, 2020"
              datetime: "2020-09-17T12:00:00+01:00"
          tags:
            - text: "Quarterly update"
            - text: "CAP goal"
            - text: "APG"
            - text: "PMA"
            - text: "Success story"

    - title: "Collection with Media Thumbnail"
      items:
        - heading: "Gears of Government President's Award winners"
          link_url: "https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
          description: "Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people."
          img_src: "https://trumpadministration.archives.performance.gov/img/GoG/GoG-logo.png"
          img_alt: "Gears of Government Awards - President's Award"
          meta_info:
            - text: "By Sondra Ainsworth and Constance Lu"
            - text: "September 30, 2020"
              datetime: "2020-09-30T12:00:00+01:00"
          tags:
            - text: "New"
              is_new: "true"
            - text: "PMA"
            - text: "OMB"
        - heading: "Women-owned small business dashboard"
          link_url: "https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
          description: "In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!"
          img_src: "https://www.performance.gov/img/blog/wosb1.jpg"
          img_alt: "Woman Owned Small Business Federal Contracts"
          meta_info:
            - text: "By Constance Lu"
            - text: "September 30, 2020"
              datetime: "2020-09-30T12:00:00+01:00"
          tags:
            - text: "SBA"
        - heading: "September 2020 updates show progress on cross-agency and agency priority goals"
          link_url: "https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
          description: "Today, we published progress updates for both Cross-Agency Priority (CAP) Goals and Agency Priority Goals (APGs) for the third quarter of FY2020. These updates highlight recent milestones and accomplishments as well as related initiatives that support progress towards a more modern and effective government."
          img_src: "https://www.performance.gov/img/blog/sept-2020.png"
          img_alt: "September 2020 Updates"
          meta_info:
            - text: "By Eric L. Miller"
            - text: "September 17, 2020"
              datetime: "2020-09-17T12:00:00+01:00"
          tags:
            - text: "Quarterly update"
            - text: "CAP goal"
            - text: "APG"
            - text: "PMA"
            - text: "Success story"

    - title: "Collection with Calendar Date"
      items:
        - heading: "Gears of Government President's Award winners"
          link_url: "https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
          description: "Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people."
          calendar_date: "2020-09-30T12:00:00+01:00"
          calendar_month: "SEP"
          calendar_day: "30"
        - heading: "Women-owned small business dashboard"
          link_url: "https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
          description: "In honor of National Women's Small Business Month, we've partnered with SBA's Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!"
          calendar_date: "2020-09-30T12:00:00+01:00"
          calendar_month: "SEP"
          calendar_day: "30"
        - heading: "September 2020 updates show progress on cross-agency and agency priority goals"
          link_url: "https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
          description: "Today, we published progress updates for both Cross-Agency Priority (CAP) Goals and Agency Priority Goals (APGs) for the third quarter of FY2020. These updates highlight recent milestones and accomplishments as well as related initiatives that support progress towards a more modern and effective government."
          calendar_date: "2020-09-17T12:00:00+01:00"
          calendar_month: "SEP"
          calendar_day: "17"

    - title: "Condensed Collection (Headings Only)"
      condensed: "true"
      items:
        - heading: "The eight principles of mobile-friendliness"
          link_url: "https://digital.gov/guides/mobile-principles/?dg"
          meta_info:
            - text: "Digital.gov"
              extra_classes: "position-relative"
        - heading: "The USWDS maturity model"
          link_url: "https://designsystem.digital.gov/maturity-model/"
          meta_info:
            - text: "U.S. Web Design System"
              extra_classes: "position-relative"
        - heading: "A news item that's on our own site"
          link_url: "#"
        - heading: "The key role of product owners in federated data projects"
          link_url: "https://18f.gsa.gov/2020/11/24/the-key-role-of-product-owners-in-federated-data-projects/"
          meta_info:
            - text: "18F"
              extra_classes: "position-relative"
        - heading: "Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs)"
          link_url: "https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
          meta_info:
            - text: "Performance.gov"
              extra_classes: "position-relative"