Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Floating Icon Sextet Features Block for Vue

Six features of a cloud-storage app on a framed stage, each an icon tile floating at its own height in a wave that lifts on hover or focus, with a title, a sentence and a link under it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A floating-icon feature section for Vue with Ark UI. Six features stand on a framed stage: each is an icon tile floating at its own height, so the six form a wave, over a soft shadow on the floor. Under the floor line each cell carries its title, one sentence and a link that says where it goes. A tile lifts a few pixels when its cell is hovered or holds keyboard focus, and its shadow shrinks as it rises. The cells share their hairlines inside a frame with + marks on its corners: six across from lg, three from md, and two on a phone, where the tiles stagger in two rows. It's built from Guides, with CSS transitions for the lift and your theme's tokens for every colour. For product pages where six small benefits deserve a little air.

FAQ

How do I change the features?

Edit FEATURES at the top of the file: a name, a sentence, a Lucide icon, the link's words and lift, two margin classes that set the tile's height above the floor on a phone and from lg. Change the lifts to reshape the wave. Keep the count a multiple of six, three or two so the rows fill.

What does the lift do, and does it work from the keyboard?

When the cell is hovered, or when its link has focus, the tile moves up by about 6 pixels and the shadow shrinks, with a CSS transition. A tap on a touch screen hovers the cell too. The tiles and the stage are decorative and hidden from assistive technology; the lift is only a flourish.

What about reduced motion?

With reduced motion the lift and the shadow's change are off; the tiles simply stay at their heights. The header and the stage fade up once on load otherwise.

How does it fit on a phone?

Two cells across, three rows. The tiles stagger: the first column sits high and the second low, and the stage is shorter. Nothing scrolls sideways at 320 pixels.

Does it follow my theme?

Yes. The tiles are card-coloured with a hairline ring and a faint shadow, the floor shadow is the foreground colour at 10%, and every text is a theme token, so it reads the same in light and dark.

All 170 features blocks