Cfa Ui Components

Previews

No matching results.

x
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
41
42
43
44
45
46
47
48
49
50
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 48rem">
  <div style="border: 1px solid #d4d4d4; border-radius: 0.5rem; padding: 1rem">
    <h3 style="margin-top: 0">Food assistance</h3>
    <p>A short description of the program and who it serves.</p>
    <details  class="cfa-reveal group bg-white border-2 border-primary rounded-lg" >
      <summary class="flex justify-between items-center list-none marker:hidden cursor-pointer p-cfa-med">
        <span class="flex font-bold items-center gap-cfa-sm">
          <svg class="cfa-icon" width="24" height="24" role="img" aria-label="info icon"><use href="/assets/uswds-sprite-36dd7ae2.svg#info"></use></svg>
          See if you qualify
        </span>
        <span class="ml-[10px] inline-flex items-center transition-transform duration-200 group-open:rotate-180"><svg class="cfa-icon" width="25" height="25" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#expand_more"></use></svg></span>
      </summary>
      <div class="cfa-stack-med px-cfa-med pb-cfa-med">
        <p>Eligibility details for food assistance.</p>
      </div>
    </details>
  </div>
  <div style="border: 1px solid #d4d4d4; border-radius: 0.5rem; padding: 1rem">
    <h3 style="margin-top: 0">Cash assistance</h3>
    <p>A short description of the program and who it serves.</p>
    <details  class="cfa-reveal group bg-white border-2 border-primary rounded-lg" >
      <summary class="flex justify-between items-center list-none marker:hidden cursor-pointer p-cfa-med">
        <span class="flex font-bold items-center gap-cfa-sm">
          <svg class="cfa-icon" width="24" height="24" role="img" aria-label="info icon"><use href="/assets/uswds-sprite-36dd7ae2.svg#info"></use></svg>
          See if you qualify
        </span>
        <span class="ml-[10px] inline-flex items-center transition-transform duration-200 group-open:rotate-180"><svg class="cfa-icon" width="25" height="25" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#expand_more"></use></svg></span>
      </summary>
      <div class="cfa-stack-med px-cfa-med pb-cfa-med">
        <p>Eligibility details for cash assistance.</p>
      </div>
    </details>
  </div>
  <div style="border: 1px solid #d4d4d4; border-radius: 0.5rem; padding: 1rem">
    <h3 style="margin-top: 0">Health coverage</h3>
    <p>A short description of the program and who it serves.</p>
    <details  class="cfa-reveal group bg-white border-2 border-primary rounded-lg" >
      <summary class="flex justify-between items-center list-none marker:hidden cursor-pointer p-cfa-med">
        <span class="flex font-bold items-center gap-cfa-sm">
          <svg class="cfa-icon" width="24" height="24" role="img" aria-label="info icon"><use href="/assets/uswds-sprite-36dd7ae2.svg#info"></use></svg>
          See if you qualify
        </span>
        <span class="ml-[10px] inline-flex items-center transition-transform duration-200 group-open:rotate-180"><svg class="cfa-icon" width="25" height="25" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#expand_more"></use></svg></span>
      </summary>
      <div class="cfa-stack-med px-cfa-med pb-cfa-med">
        <p>Eligibility details for health coverage.</p>
      </div>
    </details>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%#
  Mimics the gyraffe landing page's three-column product-card grid, the
  layout that originally motivated this change. Each card is narrow enough
  that the reveal's caret would overflow inline, so the summary stacks the
  label above the chevron via the container query.
%>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 48rem">
  <% ["Food assistance", "Cash assistance", "Health coverage"].each do |title| %>
    <div style="border: 1px solid #d4d4d4; border-radius: 0.5rem; padding: 1rem">
      <h3 style="margin-top: 0"><%= title %></h3>
      <p>A short description of the program and who it serves.</p>
      <%= render RevealComponent.new(summary_text: "See if you qualify", icon: "info") do %>
        <p>Eligibility details for <%= title.downcase %>.</p>
      <% end %>
    </div>
  <% end %>
</div>

Places reveals in a three-column card grid (like the gyraffe landing page) so each card is narrow enough that the summary stacks the label above the chevron instead of letting it overflow the edge.

Template-backed (see innarrowcontainer.html.erb): a preview's render returns a descriptor Hash, not HTML, so it can't be wrapped in a content_tag. The wrapping div lives in the ERB template instead.

No params configured.