<script>
  import { Button } from 'sveltestrap';
</script>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="info">Info</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>

<script>
  import { Badge } from 'sveltestrap';
</script>
<Badge color="primary">Primary</span>
<Badge color="secondary">Secondary</span>
<Badge color="success">Success</span>
<Badge color="info">Info</span>
<Badge color="warning" class="text-dark">Warning</span>
<Badge color="danger">Danger</span>
<Badge color="light" class="text-dark">Light</span>
<Badge color="dark">Dark</span>

<script >
  import { Progress } from 'sveltestrap';
</script>

<Progress />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

<script>
  import { Alert } from 'sveltestrap';
</script>
<Alert color="primary" fade={false}>This is a info alert—check it out!</Alert>
<Alert color="secondary">This is a light alert—check it out!</Alert>
<Alert color="success">This is a success alert—check it out!</Alert>
<Alert color="info">This is a danger alert—check it out!</Alert>
<Alert color="warning">This is a secondary alert—check it out!</Alert>
<Alert color="danger">This is a warning alert—check it out!</Alert>
<Alert color="light">This is a dark alert—check it out!</Alert>
<Alert color="dark">This is a dark alert—check it out!</Alert>

<script>
  import { Popover } from 'sveltestrap';
</script>
<a class="btn btn-primary" id="btnDismissible" tabindex="0">Click to toggle popover</a>
<Popover placement="right" target="btnDismissible" dismissible title="Popover with hover">
<a class="btn btn-secondary" id="btnDismissible" tabindex="0" >Dismissible popover</a>
<Popover placement="right" target="btnDismissible" dismissible title="Popover with hover">
<a class="btn btn-success" id="btnDismissible" tabindex="0" >On Hover Tooltip</a>
<Popover placement="right" target="btnDismissible" dismissible title="Popover with hover">

<Button id="top">
  <Tooltip target="top" placement="top">Top<Tooltip>
</Button>

<script>
  <import {Dropdown,DropdownItem,DropdownMenu,DropdownToggle} from 'sveltestrap'>
</script>
<Dropdown>
  <DropdownToggle caret"></DropdownToggle>
  <DropdownMenu>
    <DropdownItem>Action</DropdownItem>
    <DropdownItem>Another Action</DropdownItem>
    <DropdownItem>Something Else Here</DropdownItem>
  </DropdownMenu>
</Dropdown>

<ul class="nav nav-tabs" id="myTab3" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent3">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p class="mb-0 m-t-30">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p class="mb-0 m-t-30">
      ...
    </p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p class="mb-0 m-t-30">
      ...
    </p>
  </div>
</div>

<script>
  import { Accordion, AccordionItem } from 'sveltestrap';
<script>
<Accordion>
  <AccordionItem active header="Collapsible Group Item #1">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
    terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch.
    Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
    on it squid single-origin coffee nulla assumenda shoreditch et.
  </AccordionItem>
  <AccordionItem header="Collapsible Group Item #2">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
    terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch.
    Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
    on it squid single-origin coffee nulla assumenda shoreditch et.
  <AccordionItem>
  <AccordionItem header="Collapsible Group Item #3">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
    terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch.
    Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
    on it squid single-origin coffee nulla assumenda shoreditch et.
  </AccordionItem>
</Accordion>