Feature List Tango

overview

A vertical list of feature cards with a styled connector.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Feature List Tango is designed to be a vertical list of connected feature cards.

The visual connector can easily be styled with locally scoped variables and will maintain perfect position even as icon dimensions and divider styling are tweaked.

On at lower breakpoints, the visual connector will disappear as the cards are placed into a traditional horizontal layout. At the final mobile breakpoint the cards will be stacked again, but still won’t feature the connector as the icon is aligned above the card content.

Note: Make sure you adjust the dimensions of your image/icon using the –media-height variable as the connector line position depends on knowing this height value.

Query Loop Compatible

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--media-height

Set height of image/icon

--accent-line-display

Show or hide the connector line

--accent-line-color

Color of the connector line

--accent-line-width

Thickness of the connector line

--card-gap

Gap between cards