---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import TabsCard from '@shared/components/cards/TabsCard.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Tabs" pageMenu="base.tabs" description="Tabs switch between related panels of content inside a card.">
  <DocsLink slot="page-header-actions" path="/ui/layout/navs-tabs" />

  <div class="row row-cards">
    <div class="col-md-4"><TabsCard id="1" settings /></div>
    <div class="col-md-4"><TabsCard id="2" reverse settings /></div>
    <div class="col-md-4"><TabsCard id="3" icons /></div>
    <div class="col-md-4"><TabsCard id="4" dropdown /></div>
    <div class="col-md-4"><TabsCard id="5" justified activity /></div>
    <div class="col-md-4"><TabsCard id="6" justified disabled /></div>
    <div class="col-md-4"><TabsCard id="7" justified icons activity /></div>
    <div class="col-md-4"><TabsCard id="8" animation activity /></div>
  </div>
</DefaultLayout>