uswds-site/_includes/site-card.html at aa2bc2f59eba2ce32e531db70a06dead0a29a0be · uswds/uswds-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{% comment %}
  Single card element for `site-card-list`.

  Variables:
    - heading: String heading for a single card.
    - headingElement: The heading HTML element type.
    - subheading: String subheading for a single card.
    - subheadingElement: The subheading HTML element type.
    - body: String body that gets placed in a paragraph tag.
    - image: The card image.
    - imageAlt: The alt tag for the image.
    - linkUrl: String for the link url.
    - linkText: String link label.
    - linkClasses: Classes for the link element.
{% endcomment %}

<div class="usa-card__container {{ include.containerClasses }}">
  <header class="usa-card__header">
    {% if include.subheading %}
      <{{ include.subheadingElement | default:"h2" }} class="site-subheading">{{ include.subheading }}</{{ include.subheadingElement | default:"h2" }}>
    {% endif %}
    <{{ include.headingElement | default:"h3" }} class="usa-card__heading font-lang-lg">{{ include.heading }}</{{ include.headingElement | default:"h3" }}>
  </header>
  {% if include.image %}
  <div class="usa-card__media">
    <div class="usa-card__img">
      <img
        src="{{ include.image }}"
        alt="{{ include.imageAlt }}"
      />
    </div>
  </div>
  {% endif %}
  <div class="usa-card__body font-lang-sm">
    <p>{{ include.body }}</p>
  </div>
  <div class="usa-card__footer">
    <a class="usa-button site-button {{ include.linkClasses }}" href="{{ include.linkUrl }}">{{ include.linkText }}</a>
  </div>
</div>