https://angular-wave.github.io/angular.css/docs/patterns/Recent content in Patterns on AngularCSSHugoenhttps://angular-wave.github.io/angular.css/docs/patterns/accordion/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/accordion/<p>Use an accessibly named <code>section</code> around native <code>details</code> elements. Give sibling items the same <code>name</code> when opening one item should close the others. The semantic structure needs no component class.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Sections&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sections&#34;</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Section 1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>Content for section 1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><p>Omit <code>name</code> to allow more than one section to remain open.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/accordion.html" title="Accordion example" loading="lazy" scrolling="no" style="height: 330px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Accordion<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Shipping questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shipping-questions&#34;</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>What are your shipping options?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> We offer standard (5-7 days), express (2-3 days), and overnight </span></span><span style="display:flex;"><span> shipping. Free shipping on international orders. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shipping-questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>What is your return policy?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Returns are accepted within 30 days. Items must be unused and in their </span></span><span style="display:flex;"><span> original packaging. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shipping-questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>How can I contact customer support?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>Reach us by email, live chat, or phone during business hours.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="state-variants">State Variants<a class="td-heading-self-link" href="#state-variants" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/accordion-state-workflows.html" title="Accordion state variants" loading="lazy" scrolling="no" style="height: 800px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Accordion State Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-basic accordion-disabled accordion-multiple&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-grid&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-basic-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-basic-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Account help<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Account help questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;account-help&#34;</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>How do I reset my password?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Click Forgot Password on the login page, enter your email address, </span></span><span style="display:flex;"><span> and we&#39;ll send you a reset link that expires in 24 hours. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;account-help&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Can I change my subscription plan?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> You can upgrade or downgrade your plan at any time from your </span></span><span style="display:flex;"><span> account settings. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;account-help&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>What payment methods do you accept?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>We accept major credit cards, PayPal, and bank transfers.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-disabled-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-disabled-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Availability<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Feature availability questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;availability&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Can I access my account history?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Your complete account history is available from the dashboard. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;availability&#34;</span> <span style="color:#c4a000">inert</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Premium feature information<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>Upgrade your plan to access premium feature information.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;availability&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>How do I update my email address?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Update it in account settings and confirm the verification email. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-section accordion-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-multiple-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-multiple-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Settings<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Settings questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Notification Settings<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Choose email alerts or push notifications for mobile devices. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Privacy <span style="color:#ce5c00">&amp;amp;</span> Security<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Enable two-factor authentication, review active sessions, and </span></span><span style="display:flex;"><span> configure data sharing. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Billing <span style="color:#ce5c00">&amp;amp;</span> Subscription<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>View your plan, payment history, and upcoming invoices.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="layout-variants">Layout Variants<a class="td-heading-self-link" href="#layout-variants" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/accordion-layout-workflows.html" title="Accordion layout variants" loading="lazy" scrolling="no" style="height: 1024px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Accordion Layout Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-borders accordion-card accordion-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-grid accordion-layout-workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-borders-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-borders-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Billing questions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-bordered&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Billing questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;billing&#34;</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>How does billing work?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Billing is charged at the beginning of each monthly or annual </span></span><span style="display:flex;"><span> cycle, and you can cancel anytime. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;billing&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Is my data secure?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Data is encrypted at rest and in transit using industry-standard </span></span><span style="display:flex;"><span> protocols. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;billing&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>What integrations do you support?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Connect popular tools or build custom integrations with our API. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-card-demo card&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-card-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-card-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Subscription <span style="color:#ce5c00">&amp;amp;</span> Billing<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Common questions about plans, payments, and cancellations.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Subscription and billing questions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>What subscription plans do you offer?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Choose Starter, Professional, or Enterprise based on storage, </span></span><span style="display:flex;"><span> API, and support needs. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>How does billing work?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Billing occurs automatically at the start of each cycle. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>How do I cancel my subscription?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Cancel from account settings with access through the current </span></span><span style="display:flex;"><span> billing period. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-workflow-section accordion-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-rtl-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;accordion-rtl-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الأسئلة الشائعة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;الأسئلة الشائعة&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;arabic-faq&#34;</span> <span style="color:#c4a000">open</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>كيف يمكنني إعادة تعيين كلمة المرور؟<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> انقر على نسيت كلمة المرور في صفحة تسجيل الدخول، وسنرسل لك رابطًا </span></span><span style="display:flex;"><span> لإعادة تعيينها. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;arabic-faq&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>هل يمكنني تغيير خطة الاشتراك الخاصة بي؟<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>يمكنك ترقية خطتك أو تخفيضها في أي وقت من إعدادات الحساب.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;arabic-faq&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>ما هي طرق الدفع التي تقبلونها؟<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>نقبل بطاقات الائتمان وPayPal والتحويلات المصرفية.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/alert/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/alert/<p>Use <code>section[role=&quot;alert&quot;]</code> for important feedback blocks. The default presentation is neutral; add <code>variant=&quot;destructive&quot;</code> for destructive feedback or override the AngularCSS color tokens for application-specific colors.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span><span style="color:#8f5902;font-style:italic">&lt;!-- optional icon --&gt;</span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Saved!<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Your profile was updated.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dismiss()&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Dismiss<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/alert.html" title="Alert examples" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Alert<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;assertive&#34;</span> <span style="color:#c4a000">aria-atomic</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">xmlns</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;http://www.w3.org/2000/svg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M9 12l2 2 4-4&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Payment successful<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Your payment of $29.99 has been processed. A receipt has been sent to </span></span><span style="display:flex;"><span> your email address. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;assertive&#34;</span> <span style="color:#c4a000">aria-atomic</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">xmlns</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;http://www.w3.org/2000/svg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M12 16v-4&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M12 8h.01&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>New feature available<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> We&#39;ve added dark mode support. You can enable it in your account </span></span><span style="display:flex;"><span> settings. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="variants-and-composition">Variants And Composition<a class="td-heading-self-link" href="#variants-and-composition" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/alert-workflows.html" title="Alert variants and composition" loading="lazy" scrolling="no" style="height: 792px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Alert Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;darkModeEnabled=false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert-action alert-basic alert-colors alert-destructive alert-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert-workflow-grid&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 12 2 2 4-4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Account updated successfully<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Your profile information has been saved. Changes will be reflected </span></span><span style="display:flex;"><span> immediately. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Dark mode is now available<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Enable it under your profile settings to get started.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;darkModeEnabled=true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-disabled</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;darkModeEnabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ darkModeEnabled ? &#39;Enabled&#39; : &#39;Enable&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;warning&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M10.3 2.9 1.8 17a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 2.9a2 2 0 0 0-3.4 0Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M12 9v4M12 17h.01&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Your subscription will expire in 3 days.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Renew now to avoid service interruption or upgrade to a paid plan. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M12 8v4M12 16h.01&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Payment failed<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Your payment could not be processed. Check your payment method and try </span></span><span style="display:flex;"><span> again. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert-rtl-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;التنبيهات&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 12 2 2 4-4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>تم الدفع بنجاح<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>تمت معالجة دفعتك وإرسال إيصال إلى عنوان بريدك الإلكتروني.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M12 16v-4M12 8h.01&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>ميزة جديدة متاحة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>لقد أضفنا دعم الوضع الداكن ويمكنك تفعيله في إعدادات حسابك.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output alert-workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Dark mode: {{ darkModeEnabled ? &#39;enabled&#39; : &#39;disabled&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/aspect-ratio/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/aspect-ratio/<p>Set <code>ratio</code> on a <code>figure</code> and optionally override <code>--ratio</code>. Direct images, videos, and iframes fill the figure with <code>object-fit: cover</code>; applications may override that fit when media should not crop.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">ratio</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;16 / 9&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;photo.jpg&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Photo&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/aspect-ratio.html" title="Aspect ratio example" loading="lazy" scrolling="no" style="height: 320px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Aspect Ratio<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;aspect-ratio-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">ratio</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;16 / 9&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Photo&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="ratios-and-direction">Ratios And Direction<a class="td-heading-self-link" href="#ratios-and-direction" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/aspect-ratio-workflows.html" title="Aspect ratio variants" loading="lazy" scrolling="no" style="height: 816px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Aspect Ratio Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;aspect-ratio-portrait aspect-ratio-rtl aspect-ratio-square&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;aspect-ratio-workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ratio</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;9 / 16&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;aspect-ratio-portrait&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Portrait aspect ratio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Photo&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ratio</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1 / 1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;aspect-ratio-square&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Square aspect ratio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Photo&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;aspect-ratio-rtl&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">ratio</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;16 / 9&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Landscape aspect ratio&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;صورة&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span>منظر طبيعي جميل<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/avatar/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/avatar/<p>Use <code>.avatar</code> with a native image or authored fallback, plus an optional badge. Place adjacent avatars and a native <code>output</code> in one wrapper to form a group.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jane Doe&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>JD<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar.jpg&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Alex Brown&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span>+3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/avatar.html" title="Avatar example" loading="lazy" scrolling="no" style="height: 180px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Avatar<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar-badge avatar-basic avatar-demo avatar-group avatar-group-count&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar-grayscale&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Profile portrait&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>CN<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Profile portrait&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>ER<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;success&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jane Doe&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>JD<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar-grayscale&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Profile portrait&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>CN<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Profile portrait&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>LR<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/04.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Profile portrait&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>ER<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span>+3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="variants-and-composition">Variants And Composition<a class="td-heading-self-link" href="#variants-and-composition" aria-label="Heading self-link"></a></h2> <p>Use <code>size=&quot;sm&quot;</code>, the default size, or <code>size=&quot;lg&quot;</code>. Badge icons, grouped counts, RTL layouts, and dropdown triggers compose from the same semantic parts without changing Avatar behavior.</p>https://angular-wave.github.io/angular.css/docs/patterns/badge/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/badge/<p>Use <code>class=&quot;badge&quot;</code> on an inline element and set <code>variant</code> for appearance.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Secondary<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Outline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><p>For user-selected colors, use <code>variant=&quot;custom&quot;</code> and set <code>--badge-background</code>. Browsers with <code>contrast-color()</code> choose a black or white foreground; set <code>--badge-foreground</code> when the application requires a specific contrast result.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;custom&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;--badge-background: var(--cyan-9)&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Custom </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/badge.html" title="Badge example" loading="lazy" scrolling="no" style="height: 170px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Badge<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Badge<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Secondary<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Destructive<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Outline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;custom&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;--badge-background: var(--cyan-9)&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Custom </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="composition-workflows">Composition workflows<a class="td-heading-self-link" href="#composition-workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/badge-workflows.html" title="Badge colors, icons, links, loading, and RTL" loading="lazy" scrolling="no" style="height: 340px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Badge Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-colors badge-icon badge-link badge-rtl badge-spinner badge-variants&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Badge variants&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Secondary<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Destructive<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Outline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Ghost<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Badge custom colors&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-color-blue badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Blue<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-color-green badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Green<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-color-sky badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Sky<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-color-purple badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Purple<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge-color-red badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Red<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Badges with icons&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 12 2 2 4-4M12 3l2.2 1.5 2.7-.1.8 2.6 2.2 1.5-.9 2.5.9 2.5-2.2 1.5-.8 2.6-2.7-.1L12 21l-2.2-1.5-2.7.1-.8-2.6L4.1 15l.9-2.5-.9-2.5L6.3 7l.8-2.6 2.7.1L12 3Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Verified </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Bookmark </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M6 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18l-6-4-6 4V4Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#link&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Open Link </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M7 17 17 7M7 7h10v10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Badges with loading status&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Deleting </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Generating </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;RTL badges&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>شارة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>ثانوي<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>مدمر<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>مخطط<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/breadcrumb/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/breadcrumb/<p>Use a <code>.breadcrumb</code> navigation landmark with a native ordered list, links, separators, and <code>aria-current=&quot;page&quot;</code> for the current location. The class distinguishes the trail from other navigation landmarks.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;breadcrumb&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;breadcrumb&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ol</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Home<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>/<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Docs<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ol</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/breadcrumb.html" title="Breadcrumb example" loading="lazy" scrolling="no" style="height: 160px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Breadcrumb<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;breadcrumb-basic breadcrumb-link&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;breadcrumb&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;breadcrumb&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ol</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Home<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>/<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Components<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>/<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Breadcrumb<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ol</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="variants-and-composition">Variants And Composition<a class="td-heading-self-link" href="#variants-and-composition" aria-label="Heading self-link"></a></h2> <p>Empty separator and ellipsis parts receive their standard icons. Author custom separator content directly, and compose dropdowns with the existing semantic Dropdown component.</p>https://angular-wave.github.io/angular.css/docs/patterns/button-group/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/button-group/<p>Use <code>fieldset[role=&quot;group&quot;]</code> around related commands or form controls. Set <code>orientation=&quot;vertical&quot;</code> for stacked groups. Use Toggle Group when the controls represent one or more selectable values.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span>One<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span>Two<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/button-group.html" title="Button group examples" loading="lazy" scrolling="no" style="height: 480px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Button Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;buttonGroupAction = &#39;None&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button-group-demo button-group-orientation separator button-group-size button-group-split&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Button group sizes&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;State ownership&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button-group-unmanaged&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Small </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button-group-managed&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Button </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add small&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M5 12h14M12 5v14&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Button<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M5 12h14M12 5v14&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lg&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Large<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lg&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Button<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lg&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-lg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add large&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M5 12h14M12 5v14&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Media controls&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Increase&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M5 12h14M12 5v14&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Decrease&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M5 12h14&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Button group compositions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;buttonGroupAction = &#39;Copy&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Copy </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;buttonGroupAction = &#39;Paste&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Paste </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;buttonGroupAction = &#39;Button&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Button </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add item&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;buttonGroupAction = &#39;Add&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M5 12h14M12 5v14&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Action: {{ buttonGroupAction }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="composition-workflows">Composition Workflows<a class="td-heading-self-link" href="#composition-workflows" aria-label="Heading self-link"></a></h2> <p>Button groups can connect nested groups, inputs, input groups, Select, Dropdown, and Popover triggers. Each composed component retains its own behavior and application state.</p>https://angular-wave.github.io/angular.css/docs/patterns/card/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/card/<p>Use <code>article.card</code> with optional semantic header, content, footer, and action regions. Direct headers, headings, and header paragraphs need no part classes.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Title<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Optional description<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span>Action<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span>Content<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;</span>Footer<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/card.html" title="Card example" loading="lazy" scrolling="no" style="height: 500px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Card<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example card&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Login to your account<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Enter your email below to login to your account<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Sign Up<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-form&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;login-form&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m@example.com&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-label-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-password&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Password<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#forgot-password&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Forgot your password?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-password&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;password&#34;</span> <span style="color:#c4a000">required</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">footer</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;card-footer-stacked&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span> <span style="color:#c4a000">form</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;login-form&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Login<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Login with Google<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="image-and-rtl">Image And RTL<a class="td-heading-self-link" href="#image-and-rtl" aria-label="Heading self-link"></a></h2> <p>Card content remains ordinary semantic HTML. Use local images, logical CSS properties, and AngularTS form or command directives for application state.</p>https://angular-wave.github.io/angular.css/docs/patterns/chart/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/chart/<p>Use Chart to frame application-rendered HTML, SVG, canvas, or a locally bundled chart library with a consistent container, axis, legend, and tooltip contract. For simple authored HTML plots, <code>data-value</code> and <code>data-color</code> synchronize to <code>--value</code> and <code>--chart-color</code>.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Monthly visitors&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;chart&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;January desktop&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;72%&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-color</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;var(--chart-1)&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Jan<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><p>AngularCSS does not implement a chart engine. Plotting, scales, data, formatting, hover selection, and active-series state remain with authored HTML, the application&rsquo;s selected chart library, and AngularTS. This keeps Chart from covering AngularTS application behavior while providing stable semantic and customization hooks.</p>https://angular-wave.github.io/angular.css/docs/patterns/description-list/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/description-list/<p>Use a native description list for stable record labels and values. AngularCSS adds responsive row presentation without changing the relationship between terms and descriptions.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/description-list.html" title="Customer details" loading="lazy" scrolling="no" style="height: 360px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Description List<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;description-list-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dl</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Account details&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Account owner<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span>Ada Lovelace<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span>ada@example.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Plan<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span>Enterprise<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Last updated<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">time</span> <span style="color:#c4a000">datetime</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2026-09-05&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>5 September 2026<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">time</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/disclosure/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/disclosure/<p>Native <code>details</code> and <code>summary</code> own click, keyboard, focus, and disclosure state. AngularCSS only styles the authored structure. AngularTS may observe native events when the application needs the state.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span>Order details<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>Shipping address and item details.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/disclosure.html" title="Order details" loading="lazy" scrolling="no" style="height: 360px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Disclosure<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Order #4189<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m7 15 5 5 5-5M7 9l5-5 5 5&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Toggle details<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Shipped<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Shipping address<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>100 Market St, San Francisco<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Items<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>2x Studio Headphones<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="basic-settings-and-rtl">Basic, settings, and RTL<a class="td-heading-self-link" href="#basic-settings-and-rtl" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/disclosure-workflows.html" title="Disclosure reference workflows" loading="lazy" scrolling="no" style="height: 900px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Disclosure Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-basic disclosure-rtl disclosure-settings&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disclosure workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-basic-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-basic-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Basic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-basic-card card&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure disclosure-product&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Product details<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m6 9 6 6 6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> This panel can be expanded or collapsed to reveal additional </span></span><span style="display:flex;"><span> content. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Learn More<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-settings-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-settings-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Settings<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-settings-card card&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Radius<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Set the corner radius of the element.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-settings&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-settings-fields&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-x&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Radius X<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-x&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;number&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-y&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Radius Y<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-y&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;number&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure disclosure-settings-disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Toggle additional radius settings&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-maximize&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-minimize&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m8 0v-3a2 2 0 0 1 2-2h3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-settings-more&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-bottom-x&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Bottom radius X<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-bottom-x&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;number&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-bottom-y&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Bottom radius Y<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radius-bottom-y&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;number&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-workflow disclosure-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-rtl-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-rtl-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>من اليمين إلى اليسار<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h4</span><span style="color:#000;font-weight:bold">&gt;</span>الطلب #4189<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h4</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m7 15 5 5 5-5M7 9l5-5 5 5&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>تبديل التفاصيل<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>الحالة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>تم الشحن<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>عنوان الشحن<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>100 Market St, San Francisco<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>العناصر<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>2x سماعات الاستوديو<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="file-tree">File tree<a class="td-heading-self-link" href="#file-tree" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/disclosure-compositions.html" title="Nested disclosure file tree" loading="lazy" scrolling="no" style="height: 720px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Disclosure Compositions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-file-tree&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disclosure file tree composition&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-file-card visual-example card&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">ng-tabs</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;File views&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">aria-selected</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Explorer<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span>Outline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Explorer file tree<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>No outline available<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure-file-tree&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tree-chevron&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>components<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tree-chevron&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>ui<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>button.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>card.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>dialog.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>input.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>select.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>table.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>login-form.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>register-form.tsx </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tree-chevron&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>lib<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>utils.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>cn.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>api.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tree-chevron&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>hooks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>use-media-query.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>use-debounce.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>use-local-storage.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tree-chevron&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>types<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>index.d.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>api.d.ts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">details</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disclosure&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tree-chevron&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>public<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">summary</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>favicon.ico<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>logo.svg<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>images<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">details</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>app.tsx<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>layout.tsx<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>globals.css<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>package.json<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>tsconfig.json<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>README.md<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>.gitignore<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/empty/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/empty/<p>Empty states compose media, title, description, and action content parts.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>No projects yet<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Create your first project.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/empty.html" title="Empty example" loading="lazy" scrolling="no" style="height: 340px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Empty<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example empty&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">xmlns</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;http://www.w3.org/2000/svg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.75&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M3.75 9.75h16.5m-13.5 0V6.75A2.25 2.25 0 0 1 9 4.5h6a2.25 2.25 0 0 1 2.25 2.25v3m-12 0 1.2 8.4A2.25 2.25 0 0 0 8.68 20.25h6.64a2.25 2.25 0 0 0 2.23-2.1l1.2-8.4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>No Projects Yet<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> You haven&#39;t created any projects yet. Get started by creating your </span></span><span style="display:flex;"><span> first project. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span>Create Project<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Import Project<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-learn-more&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#learn-more&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Learn More </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M7 17 17 7M7 7h10v10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/empty-workflows.html" title="Empty state workflows" loading="lazy" scrolling="no" style="height: 1900px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Empty Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyQuery=&#39;&#39;;emptyAction=&#39;Ready&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Empty state workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-avatar&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-avatar-large avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jane Doe&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>JD<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>User Offline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> This user is currently offline. Leave a message or try again later. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;Message queued&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Leave Message </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-avatar-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-avatar-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jane&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Alex&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Sam&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>No Team Members<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Invite your team to collaborate on this project.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;Invite opened&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> + Invite Members </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-background&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty-muted-demo empty&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>!<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>No Notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>You&#39;re all caught up. New notifications will appear here.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;Refreshed&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Refresh </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-card&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty-card-demo empty&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>No projects yet<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> You haven&#39;t created any projects yet. Create your first project. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;Create project&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Create project<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;Import project&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Import project </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#learn&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Learn more<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-input-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>404 - Not Found<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>The page you&#39;re looking for doesn&#39;t exist. Try searching below.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyQuery&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Try searching for pages...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search missing pages&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>⌕<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>/<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Need help? <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#support&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Contact support<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty-outline-demo empty&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>☁<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Cloud Storage Empty<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Upload files to access them anywhere.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;Upload opened&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Upload Files </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow empty&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>لا توجد مشاريع بعد<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;إنشاء مشروع&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> إنشاء مشروع<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;emptyAction=&#39;استيراد مشروع&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> استيراد مشروع </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;empty-workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ emptyAction }} · {{ emptyQuery }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/field/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/field/<p>Use the field wrapper and field parts to define standard form structure.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Email&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Use your work email.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-email&#34;</span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-error&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Enter a valid email.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/field.html" title="Field example" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Field<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;name=&#39;Jane Doe&#39;; email=&#39;&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span>Profile<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-describedby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-name-description&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jane Doe&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-name-description&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Use your public display name. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Email <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Enter an email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-describedby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-email-error&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;demo-profile-email-error&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-show</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;!email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-error&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Enter a valid email. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Preview: <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;name&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email ? &#39;(&#39; + email + &#39;)&#39; : &#39;(email required)&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/field-workflows.html" title="Field workflows" loading="lazy" scrolling="no" style="height: 2500px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Field Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState={username:&#39;&#39;,password:&#39;&#39;,feedback:&#39;&#39;,department:&#39;&#39;,hardDisks:true,externalDisks:false,cds:false,servers:false,sync:true,twoFactor:false,plan:&#39;monthly&#39;,environment:&#39;kubernetes&#39;,minimum:200,maximum:800,street:&#39;&#39;,city:&#39;&#39;,zip:&#39;&#39;,push:true,pushTasks:false,emailTasks:false,profileName:&#39;&#39;,message:&#39;Ready&#39;,sameAsShipping:true,month:&#39;&#39;,year:&#39;&#39;}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Field workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-input&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-username&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Username<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-username&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.username&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Max Leiter&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Choose a unique username for your account.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-password&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Password<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Must be at least 8 characters long.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-password&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;password&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.password&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;••••••••&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-textarea&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-feedback&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Feedback<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-feedback&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.feedback&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Your feedback helps us improve...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">rows</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Share your thoughts about our service.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-select&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-department&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Department<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">select</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-department&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.department&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Choose department<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Engineering<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Design<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Marketing<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Sales<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Customer Support<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">select</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Select your department or area of work.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-checkbox&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Show these items on the desktop<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Select the items you want to show on the desktop.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-choice-list checkbox-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-hard-disks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.hardDisks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-hard-disks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Hard disks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-external-disks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.externalDisks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-external-disks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>External disks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-cds&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.cds&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-cds&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>CDs, DVDs, and iPods<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-servers&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.servers&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-servers&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Connected servers<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-sync&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.sync&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-sync&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Sync Desktop <span style="color:#ce5c00">&amp;amp;</span> Documents folders<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Access these folders from your other devices.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-switch&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-switch-demo field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-2fa&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Multi-factor authentication<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-2fa&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.twoFactor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-radio&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set field-choice-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Subscription Plan<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Yearly and lifetime plans offer significant savings.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-monthly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;monthly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-monthly&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Monthly ($9.99/month)<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-yearly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;yearly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-yearly&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Yearly ($99.99/year)<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-lifetime&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lifetime&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-lifetime&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Lifetime ($299.99)<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-slider&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Price Range<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Set your budget range (${{ fieldState.minimum }} - ${{ </span></span><span style="display:flex;"><span> fieldState.maximum }}). </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-range-slider</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1000&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Price Range&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-slider-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;range&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1000&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">step</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.minimum&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Minimum budget&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;range&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1000&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">step</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.maximum&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Maximum budget&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-choice-card&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set field-card-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Compute Environment<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Select the compute environment for your cluster.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-kubernetes&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Kubernetes<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Run GPU workloads on a K8s cluster.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-kubernetes&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;environment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kubernetes&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.environment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-vm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Virtual Machine<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Access a cluster to run GPU workloads.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-vm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;environment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.environment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-fieldset&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span>Address Information<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>We need your address to deliver your order.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-street&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Street Address<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-street&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.street&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;123 Main St&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-two-column&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-city&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>City<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-city&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.city&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;New York&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-zip&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Postal Code<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-zip&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.zip&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;90502&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span>Responses<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Get notified when ChatGPT responds to requests that take time. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-push&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.push&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-push&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Push notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span>Tasks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Get notified when tasks have updates. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#tasks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Manage tasks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-choice-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-push-tasks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.pushTasks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-push-tasks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Push notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-email-tasks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.emailTasks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-email-tasks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-responsive&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow field-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-submit</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.message=&#39;Profile submitted &#39;+fieldState.profileName&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span>Profile<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Fill in your profile information.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;responsive&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-profile-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Provide your full name for identification<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-profile-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.profileName&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Evil Rabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;responsive&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-form-actions field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Submit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.message=&#39;Cancelled&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Cancel </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow field-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> <span style="color:#c4a000">ng-submit</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.message=&#39;Payment submitted&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span>Payment Method<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>All transactions are secure and encrypted<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name on Card<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Evil Rabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-number&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Card Number<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-number&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1234 5678 9012 3456&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Enter your 16-digit card number<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-three-column&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-month&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Month<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-month&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;MM&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-year&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Year<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-year&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;YYYY&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-cvv&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>CVV<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-cvv&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;123&#34;</span> <span style="color:#c4a000">required</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span>Billing Address<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>The billing address associated with your payment method<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-same-shipping&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldState.sameAsShipping&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-same-shipping&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Same as shipping address<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-comments&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Comments<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-comments&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add any additional comments&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-form-actions field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Submit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Cancel<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow field-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span>طريقة الدفع<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>جميع المعاملات آمنة ومشفرة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-name-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الاسم على البطاقة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-name-rtl&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Evil Rabbit&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-number-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>رقم البطاقة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-card-number-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1234 5678 9012 3456&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>أدخل رقم البطاقة المكون من 16 رقمًا<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-three-column&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span>الشهر<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ش.ش&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span>السنة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;YYYY&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span>CVV<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;123&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-same-shipping-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">checked</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-same-shipping-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>نفس عنوان الشحن<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-comments-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>تعليقات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-comments-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;أضف أي تعليقات إضافية&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-form-actions field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>إرسال<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>إلغاء<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> {{ fieldState.message }} <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="validation-states">Validation States<a class="td-heading-self-link" href="#validation-states" aria-label="Heading self-link"></a></h2> <p>Fields derive presentation from native validity and <code>aria-invalid</code>; AngularTS structural directives may insert or remove controls and descriptions.</p>https://angular-wave.github.io/angular.css/docs/patterns/file-upload/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/file-upload/<p>Keep file selection native and present application-owned queue and progress state beside it. AngularTS can handle drop events and backend transfer commands without introducing a second upload model.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/file-upload.html" title="Supporting document upload" loading="lazy" scrolling="no" style="height: 440px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS File Upload<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file-upload-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Supporting documents<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>PDF, PNG, or JPG files up to 10 MB.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;supporting-files&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Choose files or drop them here<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>The application validates and transfers selected files.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;supporting-files&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">accept</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;.pdf,image/png,image/jpeg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">multiple</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Upload queue&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>contract.pdf<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span>72%<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;72&#34;</span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>72%<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>1 file ready for processing<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/filter-bar/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/filter-bar/<p>Use a native form to collect a data view&rsquo;s search and filter values. Submit, reset, AngularTS binding, and backend queries keep their existing ownership.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/filter-bar.html" title="Order filters" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Filter Bar<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;filter-bar-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Filter orders&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Order filters<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Search </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;query&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Order or customer&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Status </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">select</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>All statuses<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Open<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Complete<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">select</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;reset&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Reset<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Apply<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/input-group/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/input-group/<p>Use <code>.input-group</code> with one native control and optional authored addons, text, and buttons. AngularTS continues to own the model and actions.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Search<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>⌘K<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/input-group.html" title="Input group example" loading="lazy" scrolling="no" style="height: 260px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Input Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Search<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search documentation...&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>⌕<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="reference-workflows">Reference Workflows<a class="td-heading-self-link" href="#reference-workflows" aria-label="Heading self-link"></a></h2> <p>These packaged examples cover default, disabled, invalid, inline, text, icon, keyboard-hint, label, Button Group, and Card compositions.</p>https://angular-wave.github.io/angular.css/docs/patterns/input-otp/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/input-otp/<p>Use one native input. The browser owns editing, paste, autofill, and validation.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;code&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>One-time code<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;code&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">autocomplete</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;one-time-code&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">inputmode</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;numeric&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">pattern</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;[0-9]{6}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">maxlength</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;6&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;code&#34;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">/&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/input-otp.html" title="Input OTP example" loading="lazy" scrolling="no" style="height: 220px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Input Otp<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;otp=&#39;123456&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-otp-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack-sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;one-time-code&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>One-time code<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;one-time-code&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;one-time-code&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">inputmode</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;numeric&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">autocomplete</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;one-time-code&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">pattern</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;[0-9]{6}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">minlength</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;6&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">maxlength</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;6&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;6&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;otp&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Code: {{ otp }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/item/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/item/<p>Items compose media, content, title, description, and actions.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Item title<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Supporting description.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/item.html" title="Item example" loading="lazy" scrolling="no" style="height: 360px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Item<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;max-width: 32rem&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline-item&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">xmlns</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;http://www.w3.org/2000/svg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.75&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Profile verified<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Your public display name and email have been confirmed.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Review<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;compact-item&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Scheduled reports<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Weekly snapshots are ready for your team.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>New<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">aria-disabled</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-item&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Archived workspace<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>This workspace is retained for audit history.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span>Restore<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/item-workflows.html" title="Item workflows" loading="lazy" scrolling="no" style="height: 3900px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Item Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;itemState={message:&#39;Ready&#39;}&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Item workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-demo&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Basic Item<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>A simple item with title and description.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;itemState.message=&#39;Basic action&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Action </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#verified&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M9 12.75 11.25 15 15 9.75&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;9&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Your profile has been verified.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>›<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-avatar&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-avatar-large avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Evil Rabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Evil Rabbit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Last seen 5 months ago<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invite Evil Rabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> + </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-avatar-stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jordan Lee&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;maxleiter&#34;</span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;evilrabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>No Team Members<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Invite your team to collaborate on this project.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;itemState.message=&#39;Invite opened&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Invite </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-icon&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M12 9v4m0 4h.01M10.3 3.7 2.5 17.2A2 2 0 0 0 4.2 20h15.6a2 2 0 0 0 1.7-2.8L13.7 3.7a2 2 0 0 0-3.4 0Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Security Alert<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>New login detected from unknown device.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Review<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-image&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#midnight&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;image&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Midnight City Lights&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Midnight City Lights - Electric Nights<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Neon Dreams<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>3:45<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#coffee&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;image&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Coffee Shop Conversations&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Coffee Shop Conversations - Urban Stories<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>The Morning Brew<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>4:05<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#digital&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;image&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Digital Rain&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Digital Rain - Binary Beats<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Cyber Symphony<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>3:30<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-dropdown&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow item-dropdown-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">ng-dropdown-menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Select <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>⌄<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;itemState.message=&#39;Selected Jordan Lee&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Jordan Lee<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>jordan@example.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;itemState.message=&#39;Selected maxleiter&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>maxleiter<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>maxleiter@vercel.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;itemState.message=&#39;Selected evilrabbit&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>evilrabbit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>evilrabbit@vercel.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jordan Lee&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Jordan Lee<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>jordan@example.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invite Jordan Lee&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> + </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;maxleiter&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>maxleiter<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>maxleiter@vercel.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invite maxleiter&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> + </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;evilrabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>evilrabbit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>evilrabbit@vercel.com<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invite evilrabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> + </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-header&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow item-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-header-grid&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-header&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;v0-1.5-sm&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>v0-1.5-sm<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Everyday tasks and UI generation.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-header&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;v0-1.5-lg&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>v0-1.5-lg<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Advanced thinking or reasoning.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-header&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;v0-2.0-mini&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>v0-2.0-mini<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Open Source model for everyone.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-link&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#documentation&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Visit our documentation<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Learn how to get started with our components.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>›<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#external&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>External resource<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Opens in a new tab with security attributes.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>↗<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-size&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Default Size<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>The standard size for most use cases.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Small Size<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>A compact size for dense layouts.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Extra Small Size<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>The most compact size available.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-variant&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Default Variant<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Transparent background with no border.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Outline Variant<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Outlined style with a visible border.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Muted Variant<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Muted background for secondary content.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted-item-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;number in [1,2,3]&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Item {{ number }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Item in muted group.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Action<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline-item-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;number in [1,2,3]&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>□<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Item {{ number }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Item with icon.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file-upload-list&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow item-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file-upload-item item&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file in [{name:&#39;document.pdf&#39;,progress:45,time:&#39;2m 30s&#39;},{name:&#39;presentation.pptx&#39;,progress:78,time:&#39;45s&#39;},{name:&#39;spreadsheet.xlsx&#39;,progress:12,time:&#39;5m 12s&#39;},{name:&#39;image.jpg&#39;,progress:100,time:&#39;Complete&#39;}]&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M14 2v6h6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>{{ file.name }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file-upload-progress&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ file.progress }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Upload progress for {{ file.name }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file-upload-time&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ file.time }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>عنصر أساسي<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>عنصر بسيط يحتوي على عنوان ووصف.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>إجراء<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#verified-rtl&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span>✓<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>تم التحقق من ملفك الشخصي.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>‹<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item-workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ itemState.message }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/pagination/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/pagination/<p>Use <code>nav</code> with <code>aria-label=&quot;pagination&quot;</code> and mark the current page with <code>aria-current=&quot;page&quot;</code>.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;page&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>2<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/pagination.html" title="Pagination example" loading="lazy" scrolling="no" style="height: 200px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Pagination<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#previous&#34;</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;prev&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Go to previous page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m15 18-6-6 6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Previous<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-2&#34;</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>2<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;5&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.5&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.5&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;19&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.5&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>More pages<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#next&#34;</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;next&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Go to next page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Next<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/pagination-workflows.html" title="Pagination workflow variants" loading="lazy" scrolling="no" style="height: 720px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Pagination Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow={showPage4:false,activePage:2,nextDisabled:false,rows:&#39;25&#39;}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-icons-only pagination-rtl pagination-simple&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-dynamic-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-dynamic-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Application state<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;component-state-actions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.showPage4=!paginationWorkflow.showPage4; paginationWorkflow.activePage=paginationWorkflow.showPage4 ? 4 : 2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ paginationWorkflow.showPage4 ? &#39;Remove page 4&#39; : &#39;Add page 4&#39; </span></span><span style="display:flex;"><span> }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.nextDisabled=!paginationWorkflow.nextDisabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ paginationWorkflow.nextDisabled ? &#39;Enable next&#39; : &#39;Disable </span></span><span style="display:flex;"><span> next&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Dynamic pagination&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dynamic-pagination&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.activePage=1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ paginationWorkflow.activePage === 1 ? &#39;page&#39; : &#39;false&#39; }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.activePage=2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ paginationWorkflow.activePage === 2 ? &#39;page&#39; : &#39;false&#39; }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>2<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.activePage=3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ paginationWorkflow.activePage === 3 ? &#39;page&#39; : &#39;false&#39; }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.showPage4&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#page-4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.activePage=4&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ paginationWorkflow.activePage === 4 ? &#39;page&#39; : &#39;false&#39; }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>4<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#next&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;next&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Go to next page&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-disabled</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ paginationWorkflow.nextDisabled }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Next<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-simple-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-simple-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Simple<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Simple pagination&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#simple-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#simple-2&#34;</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>2<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#simple-3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#simple-4&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>4<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#simple-5&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>5<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-icons-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-icons-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Rows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-compact-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-rows-field&#34;</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-rows-per-page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Rows per page<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">select</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-rows-per-page&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.rows&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>10<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;25&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>25<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;50&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>50<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>100<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">select</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Compact pagination&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#compact-previous&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;prev&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Go to previous page&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m15 18-6-6 6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#compact-next&#34;</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;next&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Go to next page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Rows: <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;paginationWorkflow.rows&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-rtl-heading&#34;</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination-rtl-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الصفحات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ترقيم الصفحات&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-pagination&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pagination&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#rtl-previous&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;prev&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;الانتقال إلى الصفحة السابقة&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m15 18-6-6 6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>السابق<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#rtl-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>١<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#rtl-2&#34;</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;page&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>٢<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#rtl-3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>٣<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;5&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.5&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.5&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;19&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.5&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>صفحات إضافية<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#rtl-next&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;next&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;الانتقال إلى الصفحة التالية&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>التالي<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/popover/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/popover/<p>Connect a native button to semantic popover content with <code>popovertarget</code> and <code>popover</code>. The browser owns top-layer rendering, Escape, and light dismissal.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">popovertarget</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dimensions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Open<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">aside</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dimensions&#34;</span> <span style="color:#c4a000">popover</span><span style="color:#000;font-weight:bold">&gt;</span>Content<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">aside</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/popover.html" title="Popover example" loading="lazy" scrolling="no" style="height: 390px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Popover<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Dimensions popover&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">popovertarget</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-popover-1-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Open popover </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">aside</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Dimensions&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-popover-1-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">side</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bottom&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;center&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">popover</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Dimensions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Set the dimensions for the layer.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Width<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-width&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100%&#34;</span> <span style="color:#c4a000">autofocus</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Max. width<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-max-width&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;300px&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Height<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-height&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;25px&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Max. height<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;popover-max-height&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">aside</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/skeleton/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/skeleton/<p>Use <code>class=&quot;skeleton&quot;</code> on a block element and control its size with normal CSS.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;height: 2.5rem; width: 2.5rem; border-radius: 9999px;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/skeleton.html" title="Skeleton example" loading="lazy" scrolling="no" style="height: 180px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Skeleton<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-avatar skeleton-card skeleton-demo skeleton-form skeleton-rtl skeleton-table skeleton-text&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Skeleton examples&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-demo visual-example&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading profile preview&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;labeled-skeleton&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading avatar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 3rem; height: 3rem; border-radius: 9999px&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-lines&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;decorative-skeleton&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 15.625rem; height: 1rem&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 12.5rem; height: 1rem&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-card-demo&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading card&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-card-media skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-wide skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-medium skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-button-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-form-demo&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading form&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-label-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-input-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-label-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-input-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-button-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-table-demo&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading table&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-table-heading skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-table-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-table-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-table-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-text-demo&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading text&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-wide skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-wide skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-medium skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-rtl-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تحميل الملف الشخصي&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-avatar-placeholder skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-wide skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;skeleton-line-medium skeleton&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/spinner/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/spinner/<p>Use <code>class=&quot;spinner&quot;</code> on an SVG with an accessible label. Place it in an <code>output</code> when status semantics are needed.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading&#34;</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;10&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/spinner.html" title="Spinner example" loading="lazy" scrolling="no" style="height: 160px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Spinner<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;item&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-busy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Processing payment...<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-amount&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>$100.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="composition-workflows">Composition workflows<a class="td-heading-self-link" href="#composition-workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/spinner-workflows.html" title="Spinner sizes and component compositions" loading="lazy" scrolling="no" style="height: 740px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Spinner Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-badge spinner-button spinner-custom spinner-empty spinner-input-group spinner-rtl spinner-size input-group-spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Spinner sizes&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;processing-spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;assertive&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Processing data&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 12px; height: 12px&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 24px; height: 24px&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 32px; height: 32px&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Spinner badges&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Syncing<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Updating<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;badge&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Processing<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-buttons-column&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Spinner buttons&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">disabled</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Loading... </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">disabled</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Please wait </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">disabled</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Processing </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-empty-demo empty&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Processing your request<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Please wait while we process your request. Do not refresh the page. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Cancel<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-input-groups&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Spinner input groups&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Searching...&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Saving changes...&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Saving...<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">article</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-rtl-demo item&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>جاري معالجة الدفع...<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner-amount&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>١٠٠.٠٠ دولار<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">article</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/stepper/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/stepper/<p>Present workflow progress as an ordered list inside navigation. The current step is authored with <code>aria-current=&quot;step&quot;</code>; routing and workflow state remain application-owned.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/stepper.html" title="Customer creation steps" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Stepper<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stepper-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Create customer&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ol</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#account&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Account<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#contacts&#34;</span> <span style="color:#c4a000">aria-current</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;step&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Contacts<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Permissions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Review<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ol</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/toggle/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/toggle/<p>Use a native button with authored <code>aria-pressed</code> state. That state identifies the control as a toggle and supplies its styling hook.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Bold<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Italic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/toggle.html" title="Toggle example" loading="lazy" scrolling="no" style="height: 360px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Toggle<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bookmark=false;bold=false;italic=true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-demo toggle-outline toggle-sizes toggle-text&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Bookmark toggle&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Toggle bookmark&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ bookmark }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bookmark = !bookmark&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M6 3h12v18l-6-4-6 4z&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Bookmark </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Text toggles&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Toggle italic text&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ italic }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;italic = !italic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M10 4h7M7 20h7M14 4 10 20&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Italic </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Outline toggles&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Toggle italic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ italic }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;italic = !italic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M10 4h7M7 20h7M14 4 10 20&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Italic </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Toggle bold&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ bold }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bold = !bold&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Bold </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Toggle sizes&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Small </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Default </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lg&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Large </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Bookmark: {{ bookmark ? &#39;on&#39; : &#39;off&#39; }}, Bold: {{ bold ? &#39;on&#39; : &#39;off&#39; </span></span><span style="display:flex;"><span> }}, Italic: {{ italic ? &#39;on&#39; : &#39;off&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/toggle-workflows.html" title="Toggle disabled and RTL workflows" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Toggle Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledState = true; rtlBookmark = false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-disabled toggle-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;component-state-grid visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;component-state-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-disabled-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-disabled-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-disabled</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledState&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Disabled </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-disabled</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledState&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Disabled </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledState = !disabledState&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ disabledState ? &#39;Enable toggles&#39; : &#39;Disable toggles&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;component-state-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-rtl-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-rtl-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>إشارة مرجعية<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تبديل الإشارة المرجعية&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-pressed</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ rtlBookmark }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlBookmark = !rtlBookmark&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M6 3h12v18l-6-4-6 4z&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> إشارة مرجعية </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> الحالة: {{ rtlBookmark ? &#39;مفعلة&#39; : &#39;غير مفعلة&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/toggle-group/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/toggle-group/<p>Use radios sharing a name for single selection, or checkboxes for independent multiple selection.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Alignment<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;left&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> Left </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;center&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> Center </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/toggle-group.html" title="Toggle group example" loading="lazy" scrolling="no" style="height: 180px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Toggle Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment=&#39;center&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack-sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group visual-example&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Text alignment<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;left&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> Left </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;center&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> Center </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;right&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> Right </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Alignment: <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alignment&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/toggle-group-workflows.html" title="Toggle group state and layout workflows" loading="lazy" scrolling="no" style="height: 1260px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Toggle Group Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fontWeight=&#39;normal&#39;; pageDirection=&#39;rtl&#39;; bold=true; italic=true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group-demo toggle-group-disabled toggle-group-font-weight-selector toggle-group-outline toggle-group-rtl toggle-group-sizes toggle-group-spacing toggle-group-vertical&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group-workflows visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-format-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-format-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Formatting<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;multiple-toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Text formatting<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bold&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Bold<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;italic&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Italic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Underline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-keyboard-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-keyboard-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Keyboard navigation<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;keyboard-toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Text style<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;style&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bold&#34;</span> <span style="color:#c4a000">checked</span> <span style="color:#000;font-weight:bold">/&gt;</span>Bold<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;style&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;italic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span>Italic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;style&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;underline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span>Underline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-disabled-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-disabled-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-toggle-group&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled formatting<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Bold<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Italic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Underline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-weight-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-weight-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Font weight<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">spacing</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lg&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;font-weight-toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Font weight<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-weight-item&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;weight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;light&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fontWeight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;font-weight: 300&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Aa<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Light<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-weight-item&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;weight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;normal&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fontWeight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;font-weight: 400&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Aa<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Normal<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-weight-item&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;weight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;medium&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fontWeight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;font-weight: 500&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Aa<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Medium<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-weight-item&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;weight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;bold&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fontWeight&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;font-weight: 700&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Aa<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Bold<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Selected: font-{{ fontWeight }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-sizes-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-sizes-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Sizes and spacing<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group-size-stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Small position<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;small-position&#34;</span> <span style="color:#c4a000">checked</span> <span style="color:#000;font-weight:bold">/&gt;</span>Top<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;small-position&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Bottom<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">spacing</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spaced-toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Spaced position<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spaced-position&#34;</span> <span style="color:#c4a000">checked</span> <span style="color:#000;font-weight:bold">/&gt;</span>Top<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spaced-position&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Bottom<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-vertical-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-vertical-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Vertical<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">spacing</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical-toggle-group&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Vertical formatting<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">checked</span> <span style="color:#000;font-weight:bold">/&gt;</span>Bold<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">checked</span> <span style="color:#000;font-weight:bold">/&gt;</span>Italic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>Underline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ pageDirection }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-rtl-shell&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-rtl-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-rtl-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>اتجاه العرض<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pageDirection = pageDirection === &#39;rtl&#39; ? &#39;ltr&#39; : &#39;rtl&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Change direction </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-group&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-toggle-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>طريقة العرض<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;view&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;list&#34;</span> <span style="color:#c4a000">checked</span> <span style="color:#000;font-weight:bold">/&gt;</span>قائمة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;view&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;grid&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>شبكة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;view&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;cards&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span>بطاقات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>https://angular-wave.github.io/angular.css/docs/patterns/validation-summary/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/patterns/validation-summary/<p>Place a validation summary before the related fields when submission reveals several errors. Each message links directly to its native form control.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/validation-summary.html" title="Form validation summary" loading="lazy" scrolling="no" style="height: 420px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Validation Summary<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;validation-summary-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">aside</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;alert&#34;</span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>There are two problems with this form<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Correct the fields below, then submit again.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#customer-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Enter a customer name.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#customer-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Enter a valid email address.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">li</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">ul</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">aside</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;customer-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Customer name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;customer-name&#34;</span> <span style="color:#c4a000">required</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;customer-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;customer-email&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> <span style="color:#c4a000">required</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>