<metro-accordion >     <metro-accordion-item title="@header 1">         <div class="p-2">@content 1</div>     </metro-accordion-item>     <metro-accordion-item title="@header 2" active="true">         <div class="p-2">@content 2</div>     </metro-accordion-item>     <metro-accordion-item title="@header 1">         <div class="p-2">@content 3</div>     </metro-accordion-item> </metro-accordion>      <metro-accordion show-marker="false">     <metro-accordion-item title="@header 1">         <div class="p-2">@content 1</div>     </metro-accordion-item>     <metro-accordion-item title="@header 2" active="true">         <div class="p-2">@content 2</div>     </metro-accordion-item>     <metro-accordion-item title="@header 1">         <div class="p-2">@content 3</div>     </metro-accordion-item> </metro-accordion>      <metro-accordion material="true" one-frame="false">     <metro-accordion-item title="@header 1">         <div class="p-2">@content 1</div>     </metro-accordion-item>     <metro-accordion-item title="@header 2" active="true">         <div class="p-2">@content 2</div>     </metro-accordion-item>     <metro-accordion-item title="@header 1">         <div class="p-2">@content 3</div>     </metro-accordion-item>     </metro-accordion>      <metro-accordion active-heading-class="bg-cyan fg-white" active-frame-class="bg-dark fg-white">     <metro-accordion-item title="Header 1">         <div class="p-2">@content 1</div>     </metro-accordion-item>     <metro-accordion-item title="Header 2" active="true">         <div class="p-2">@content 2</div>     </metro-accordion-item>     <metro-accordion-item title="Header 1">         <div class="p-2">@content 3</div>     </metro-accordion-item> </metro-accordion>