https://civic.sid.one/docs/components/Recent content in Components on Example AgencyHugoen-ushttps://civic.sid.one/docs/components/alert/Mon, 01 Jan 0001 00:00:00 +0000https://civic.sid.one/docs/components/alert/<h2 id="usage">Usage</h2> <pre tabindex="0"><code>{{&lt; alert type=&#34;warning&#34; title=&#34;Check your version&#34; &gt;}} Body copy, written as **markdown**. {{&lt; /alert &gt;}} </code></pre><div class="usa-alert usa-alert--warning"> <div class="usa-alert__body"><h4 class="usa-alert__heading">Check your version</h4><p>Body copy, written as <strong>markdown</strong>.</p> </div> </div> <h2 id="parameters">Parameters</h2> <table> <thead> <tr> <th>Parameter</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code>type</code></td> <td>info, warning, error, success, emergency</td> <td>info</td> </tr> <tr> <td><code>title</code></td> <td>any text</td> <td>none</td> </tr> <tr> <td><code>slim</code></td> <td>true</td> <td>false</td> </tr> <tr> <td><code>no_icon</code></td> <td>true</td> <td>false</td> </tr> </tbody> </table> <h2 id="when-to-use-which">When to use which</h2> <p>Reach for <code>slim</code> only when the message is one short line — the variant has no heading slot and halves the padding, so a wrapped paragraph looks unbalanced in it.</p>https://civic.sid.one/docs/components/accordion/Mon, 01 Jan 0001 00:00:00 +0000https://civic.sid.one/docs/components/accordion/<p>An accordion is two shortcodes: a wrapper that carries the group&rsquo;s options, and one item per panel.</p> <pre tabindex="0"><code>{{&lt; accordion bordered=&#34;true&#34; multiselectable=&#34;true&#34; heading_level=&#34;h3&#34; &gt;}} {{&lt; accordion-item title=&#34;First question&#34; expanded=&#34;true&#34; &gt;}} Body copy. {{&lt; /accordion-item &gt;}} {{&lt; /accordion &gt;}} </code></pre><div class="usa-accordion usa-accordion--bordered" data-allow-multiple> <h3 class="usa-accordion__heading"> <button type="button" class="usa-accordion__button" aria-expanded="true" aria-controls="accordion-0"> What does bordered change? </button> </h3> <div id="accordion-0" class="usa-accordion__content usa-prose"> <p>It draws a border around each panel. Use it when the accordion sits directly on the page background rather than inside a card.</p>https://civic.sid.one/docs/components/process-list/Mon, 01 Jan 0001 00:00:00 +0000https://civic.sid.one/docs/components/process-list/<p>Use a process list only when order genuinely matters. A sequence the reader can do in any order is an unordered list, and numbering it implies a dependency that is not there.</p> <pre tabindex="0"><code>{{&lt; process-list heading_level=&#34;h3&#34; &gt;}} {{&lt; process-step heading=&#34;Install&#34; &gt;}} Body copy, including code blocks. {{&lt; /process-step &gt;}} {{&lt; /process-list &gt;}} </code></pre><ol class="usa-process-list"> <li class="usa-process-list__item"> <h3 class="usa-process-list__heading">Write the step heading as an action</h3> <p>&ldquo;Install the dependencies&rdquo;, not &ldquo;Dependencies&rdquo;.</p> </li> <li class="usa-process-list__item"> <h3 class="usa-process-list__heading">Keep the body to what happens in this step</h3> <p>Anything that applies to the whole sequence belongs above the list.</p>