<script>
  import { ExpandableTile, Button } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default (unexpanded)

<ExpandableTile>
  <div slot="above" style="height: 10rem">Above the fold content here</div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

## Expanded

<ExpandableTile expanded>
  <div slot="above" style="height: 10rem">Above the fold content here</div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

## Light variant

<ExpandableTile light>
  <div slot="above" style="height: 10rem">Above the fold content here</div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

## With icon labels

<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
  <div slot="above" style="height: 10rem">Above the fold content here</div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

## With interactive content

For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.

<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
  <div slot="above" style="height: 10rem">
    <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
      Native element
    </a>
    <br /><br />
    <Button on:click={e => {
      e.stopPropagation();
      console.log("Hello world");
    }}>
      Svelte component
    </Button>
  </div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>
