ExpandableTile

Source code
Table of Contents

Usage

Default (unexpanded)

Above the fold content here
Below the fold content here
<script>
  import { ExpandableTile } from "carbon-components-svelte";
</script>

<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

Above the fold content here
Below the fold content here
<script>
  import { ExpandableTile } from "carbon-components-svelte";
</script>

<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

Above the fold content here
Below the fold content here
<script>
  import { ExpandableTile } from "carbon-components-svelte";
</script>

<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>
Table of Contents