Feature List Tango

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.