Island

A grouped Alixan UI content surface with an optional title and description.

Installation

npx alixan-ui-nuxt add island

Usage

Overview

Your latest account information

Aruzhan Sarsenova

+7 701 123 45 67

Daniyar Aliyev

+7 702 234 56 78

Aidana Nurlankyzy

+7 705 345 67 89

<script setup lang="ts">
const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];
</script>

<Island
  title="island.demoTitle"
  description="island.demoDesc"
  header-position="inside"
>
  <List divider="inset">
    <ListTile
      v-for="contact in contacts"
      :key="contact.title"
      :title="contact.title"
      :description="contact.description"
    >
      <template #leading>
        <img :src="contact.image" alt="" loading="lazy" class="size-11 rounded-full object-cover" />
      </template>
    </ListTile>
  </List>
</Island>

Outside Header

Overview

Your latest account information

Aruzhan Sarsenova

+7 701 123 45 67

Daniyar Aliyev

+7 702 234 56 78

Aidana Nurlankyzy

+7 705 345 67 89

<script setup lang="ts">
const contacts = [
  { title: 'list.contacts.aruzhan', description: 'list.contacts.aruzhanPhone', image: '/examples/contact-avatar.webp' },
  { title: 'list.contacts.daniyar', description: 'list.contacts.daniyarPhone', image: '/examples/contact-daniyar.webp' },
  { title: 'list.contacts.aidana', description: 'list.contacts.aidanaPhone', image: '/examples/contact-aidana.webp' },
];
</script>

<Island
  title="island.demoTitle"
  description="island.demoDesc"
  header-position="outside"
>
  <List divider="inset">
    <ListTile
      v-for="contact in contacts"
      :key="contact.title"
      :title="contact.title"
      :description="contact.description"
    >
      <template #leading>
        <img :src="contact.image" alt="" loading="lazy" class="size-11 rounded-full object-cover" />
      </template>
    </ListTile>
  </List>
</Island>

API Reference

Prop	Type	Default	Description
title	string	-	Optional heading displayed above the content.
description	string	-	Optional description displayed below the heading.
headerPosition	'inside' \| 'outside'	'outside'	Places the title and description inside the island or above its border.
contentClass	string	-	Additional classes for the bordered island content container.
default	slot	-	Content rendered inside the island body.