18F/18f.gsa.gov

---
layout: default
header_border: true
---

{% assign matching_posts = page | match_posts | sort:'date' | reverse %}


{% include breadcrumb.html
  parent_permalink='/what-we-deliver/'
  parent_title='What we deliver'
%}

<section class="page-tag-results">

  <section class="background-dark">
    <div class="grid-container padding-x-0 usa-flex">
      <div class="grid-container {% if page.image %}tablet:grid-col-6{% else %}padding-x-0{% endif %} hero-callout-full hero-callout-no_button">
        {% if page.agency %}
          <h1 class="h3">
          <span class="hero-callout-alt_color">{{ page.agency }}</span>
          </h1>
        {% endif %}
        <h1 class="hero-callout-title-secondary">
          {{ page.title }}
        </h1>
      </div>
      {% if page.image %}
        <div class="tablet:grid-col-6 usa-hero hero"
          style="background-image: url({{ site.baseurl }}{{ page.image }});"
          role="img"
          title="{{ page.image_accessibility }}">
        </div>
      {% else %}
        <div class="hero hero-img-collapsed" style="background-image: none">
        </div>
      {% endif %}
    </div>
  </section>

  <div class="grid-container content-wide">
    {% if page.agency or
          page.project_url or
          page.github_repo or
          page.product_clients.size > 0 or
          page.start_date or
          page.expiration_date or
          page.resources
    %}
  <div class="grid-row grid-gap">
    <div class="grid-container tablet:grid-col-8">
      <section class="usa-section page-tag-results-content">
        <div class="small-caps small-caps-no-margin">Background</div>
        <h3>{{ page.subtitle }}</h3>
        {{ content }}
      </section>
    </div>
    <aside class="grid-container usa-section grid-container-reversed-right tablet:grid-col-4 section-info section-info-gray">
      <ul>
        {% if page.quote %}
          <blockquote>
            <p>&ldquo;{{ page.quote }}&rdquo;</p>
            {% if page.quote_source %}
              <h5>{{ page.quote_source | prepend: '– ' | markdownify }}</h5>
            {% endif %}
          </blockquote>
        {% endif %}

        {% if page.agency %}
        <li class="section-info-list-item">
          <div class="section-info-header">Agency partner</div>
          <div>{{ page.agency }}</div>
        </li>
        {% endif %}

        {% if page.project_url %}
        <li class="section-info-list-item">
          <div class="section-info-header">See our work</div>
          <div>{{ page.project_url | markdownify }}</div>
        </li>
        {% endif %}

        {% if page.github_repo %}
        <li class="section-info-list-item">
          <div class="section-info-header">See the code on GitHub</div>
            <ul class="{% unless page.github_repo.size > 1 %}usa-unstyled-list{% endunless %}">
            {% for repo in page.github_repo %}
              <li>{{ repo | markdownify }}</a></li>
            {% endfor %}
            </ul>
        </li>
        {% endif %}

        {% if page.product_clients.size > 0 %}
        <li class="section-info-list-item">
          <div class="section-info-header">Agency partners</div>
          <ul class="{% unless page.product_clients.size > 1 %}usa-unstyled-list{% endunless %}">
          {% for client in page.product_clients %}
            <li>{{ client }}</li>
          {% endfor %}
          </ul>
        </li>
        {% endif %}

        {% if page.start_date or page.expiration_date %}
        <li class="section-info-list-item">
          <div class="section-info-header">When</div>
          <div>
          {% if page.start_date and page.expiration_date %}
            {{ page.start_date }} – {{ page.expiration_date }}
          {% elsif page.start_date and page.expiration_date == false %}
            Starts {{ page.start_date }}
          {% elsif page.start_date == false and page.expiration_date %}
            Ends {{ page.expiration_date }}
          {% endif %}
          </div>
        </li>
        {% endif %}

        {% if page.resources.size > 0 %}
        <li class="section-info-list-item">
          <div class="section-info-header">Resources</div>
          <ul class="{% unless page.resources.size > 1 %}usa-unstyled-list{% endunless %}">
            {% for resource in page.resources %}
              <li>{{ resource | markdownify }}</li>
            {% endfor %}
          </ul>
        {% endif %}

        {% if page.learn_more %}
          <li class="section-info-list-item">
            <a class="usa-button" href="{{ page.learn_more }}">Learn more</a>
          </li>
        {% endif %}
      </ul>
      <div>{% include side-cta.html %}</div>
    </aside>
    {% endif %}
  </div>
  </div>
  {% if matching_posts.size > 0 %}
  <div class="background-gray">
    <div class="usa-section post-border">
      <section class="grid-container posts_feature">
        <div class="{% if matching_posts.size > 3 %}usa-flex usa-flex-pull-right usa-flex-baseline usa-spacer{% endif %}">
          <h2>Related blog posts</h2>
          {% if matching_posts.size > 3 %}
            <a class="link-arrow-right" href="{{ site.baseurl }}/tags/{{ page.tag | slugify }}/">See all posts about this project{% include svg/icons/arrow-right.svg %}</a>
          {% endif %}
        </div>
        <ul class="grid-row grid-gap">
        {% for post in matching_posts limit:3 %}
          {% include post.html
             post_date=post.date
             post_title=post.title
             post_excerpt=post.excerpt
             post_url=post.url
          %}
        {% endfor %}
      </ul>
      </section>
    </div>
  </div>
  {% endif %}
</section>