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

Clickable tiles create interactive content areas that link to other pages or trigger actions. Use them to group related content and provide clear navigation targets.

## Default

Create a clickable tile with an `href` to link to another page.

<ClickableTile href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>

## Prevent default behavior

Handle the `click` event to override the default link behavior. Use `e.preventDefault()` to stop navigation.

<ClickableTile
  href="/"
  on:click={(e) => {
    e.preventDefault();
    // custom behavior
  }}
>
  Carbon Design System
</ClickableTile>

## Light variant

Set `light` to `true` to use the light color scheme.

<ClickableTile light href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>

## Disabled state

Set `disabled` to `true` to prevent interaction.

<ClickableTile disabled href="https://www.carbondesignsystem.com/">
Carbon Design System
</ClickableTile>
