> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/visual-tabs.md).

# Visual Tabs

The **Visual Tabs** module lets you organize visual content (images or videos) into clickable or auto-rotating tabs — perfect for showcasing product features, service categories, or visual storytelling.

<figure><img src="https://3867724846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5cjsG9gBFSIZ5CisPtcx%2Fuploads%2FtlyNog2nTZMDszGulLQu%2Fb27457dee50ea9f4dc267ed18d16609.png?alt=media&amp;token=9b3b8cd0-ec84-417b-91bb-5d0fd7777083" alt=""><figcaption></figcaption></figure>

### 🔧 Basic Configuration

* **Height Options**:
  * *Small*: Ideal for minimal layout or icon focus
  * *Medium*: Balanced layout for text and visuals
  * *Large*: Best for high-impact visuals or videos
* **Tab Style**:
  * *Underline*: Classic and clean
  * *Slanted*: Modern and dynamic look
* **Switching Settings**:
  * *Enable Auto Switch*: Automatically rotates tabs
  * *Switch Interval*: 3–15 seconds (recommended: **5s** for readability)

***

### 📦 Tab Content Block Options

Each tab can include either image or video content, plus customizable text and icons.

**1. Image Tab**

* **Upload Image**
* **Tab Settings**: Add tab icon, title, and description

**2. Video Tab**

* **Embed Video**: YouTube or Vimeo links supported
* **Upload Local Video**: Recommended duration: **10–15 seconds** for optimal loading
* **Cover Image**: Displayed while video loads. Recommended size: **1800x800px**, adjust according to height setting
* **Video Controls**: Enable play/pause, mute, seek bar, etc.
* **Loop Video**: Automatically replays after end
* **Tab Settings**: Add tab icon, title, and description for clarity

***

### ✅ Tips for Best Use

* Use uniform layout and media proportions across all tabs for a consistent look
* Enable auto switch for engaging presentations or showcases; disable if content needs user focus
* For video tabs, ensure the cover image matches video dimensions and has sufficient contrast for overlaid text
* Use meaningful tab icons to improve scannability and navigation