Pattern Library

{% load cotton %}

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

    {% for variant in variants %}
    <h3 class="site-preview-heading">{{ variant.title }}</h3>

    {% cotton footer type="{{ variant.type }}" return_to_top_href="{{ variant.return_to_top_href }}" show_signup="{{ variant.show_signup|default:'false' }}" signup_heading="{{ variant.signup_heading|default:'Sign up' }}" signup_label="{{ variant.signup_label|default:'Your email address' }}" agency_name="{{ variant.agency_name }}" agency_logo="{{ variant.agency_logo }}" contact_heading="{{ variant.contact_heading|default:'' }}" %}
        {% if variant.nav_columns %}
            {% for column in variant.nav_columns %}
            {% cotton footer.nav_column title="{{ column.title }}" %}
                {% for link in column.links %}
                {% cotton footer.secondary_link href="{{ link.href }}" text="{{ link.text }}" %}{% endcotton %}
                {% endfor %}
            {% endcotton %}
            {% endfor %}
        {% elif variant.primary_links %}
            {% for link in variant.primary_links %}
            {% cotton footer.link href="{{ link.href }}" text="{{ link.text }}" type="{{ variant.type }}" %}{% endcotton %}
            {% endfor %}
        {% endif %}

        {% if variant.social_links %}
        {% cotton:slot social_links %}
            {% cotton footer.social_link %}
                {% for social in variant.social_links %}
                {% cotton footer.social_link_item href="{{ social.href }}" icon="{{ social.icon }}" alt="{{ social.alt }}" %}{% endcotton %}
                {% endfor %}
            {% endcotton %}
        {% endcotton:slot %}
        {% endif %}

        {% if variant.contact_items %}
        {% cotton:slot contact_info %}
            {% cotton footer.address type="{{ variant.type }}" %}
                {% for item in variant.contact_items %}
                {% cotton footer.contact_item href="{{ item.href }}" text="{{ item.text }}" type="{{ variant.type }}" %}{% endcotton %}
                {% endfor %}
            {% endcotton %}
        {% endcotton:slot %}
        {% endif %}
    {% endcotton %}
    {% endfor %}
</div>

name: Footer
context:
  variants:
    - title: "Footer Big"
      type: "big"
      return_to_top_href: "#"
      show_signup: "true"
      signup_heading: "Sign up for updates"
      signup_label: "Your email address"
      agency_name: "Name of Agency"
      agency_logo: "/assets/img/logo-img.png"
      contact_heading: "Agency Contact Center"
      contact_items:
        - href: "tel:1-800-555-4688"
          text: "(800) 555-GOVT"
        - href: "mailto:info@agency.gov"
          text: "info@agency.gov"
      nav_columns:
        - title: "Topic One"
          links:
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link that's longer"
            - href: "#"
              text: "Secondary link"
        - title: "Topic Two"
          links:
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
        - title: "Topic Three"
          links:
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
        - title: "Topic Four"
          links:
            - href: "#"
              text: "Secondary link"
            - href: "#"
              text: "Secondary link"
      social_links:
        - href: "#"
          icon: "facebook"
          alt: "Facebook"
        - href: "#"
          icon: "twitter"
          alt: "Twitter"
        - href: "#"
          icon: "youtube"
          alt: "YouTube"
        - href: "#"
          icon: "instagram"
          alt: "Instagram"
        - href: "#"
          icon: "rss_feed"
          alt: "RSS"
    - title: "Footer Medium"
      type: "medium"
      return_to_top_href: "#"
      agency_name: "Name of Agency"
      agency_logo: "/assets/img/logo-img.png"
      contact_heading: "Agency Contact Center"
      contact_items:
        - href: "tel:1-800-555-4688"
          text: "(800) 555-GOVT"
        - href: "mailto:info@agency.gov"
          text: "info@agency.gov"
      primary_links:
        - href: "#"
          text: "Primary link"
        - href: "#"
          text: "Primary link"
        - href: "#"
          text: "Primary link"
        - href: "#"
          text: "Primary link"
      social_links:
        - href: "#"
          icon: "facebook"
          alt: "Facebook"
        - href: "#"
          icon: "twitter"
          alt: "Twitter"
        - href: "#"
          icon: "youtube"
          alt: "YouTube"
        - href: "#"
          icon: "instagram"
          alt: "Instagram"
        - href: "#"
          icon: "rss_feed"
          alt: "RSS"
    - title: "Footer Slim"
      type: "slim"
      return_to_top_href: "#"
      agency_name: "Name of Agency"
      agency_logo: "/assets/img/logo-img.png"
      contact_items:
        - href: "tel:1-800-555-4688"
          text: "(800) 555-GOVT"
        - href: "mailto:info@agency.gov"
          text: "info@agency.gov"
      primary_links:
        - href: "#"
          text: "Primary link"
        - href: "#"
          text: "Primary link"
        - href: "#"
          text: "Primary link"
        - href: "#"
          text: "Primary link"