Cfa Ui Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
<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="help outline icon"><use href="/assets/uswds-sprite-36dd7ae2.svg#help_outline"></use></svg>
      I am summary
    </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>Sample form card</p>
  </div>
</details>
1
2
3
render(RevealComponent.new(summary_text: "I am summary", icon: "help_outline")) do
  content_tag(:p, "Sample form card")
end

No notes provided.

No params configured.