CTA List Alpha

overview

A separated list of calls to action with a basic hover style.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

CTA List Alpha is a very useful list of links with clean dividers, arrow indicators, and a basic hover animation.

You can use CTA list alpha for a minimalist list of products or services, freebies, blog posts, resources, and more.

In addition to being a clean divided list, you can easily remove the divider and turn each list item into an independent card style design. And since it’s built with CSS Grid, it’s easy to change the list into a multi-column layout if desired.

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.

--divider-height

Thickness of divider between items.

--divider-color

Color of divider between items.

HTML5 Tags & Attributes

Accessibility Notes

No additional accessibility notes for this frame.

Related Frames

No related frames.

FAQs

I'm having a hard time finding the styles on this frame, help!

This frame uses an unordered list structure for semantic HTML purposes and since the cards need to be a link, and an <li> can’t also be an <a>, an extra div was required.

The primary styling for the cards is found on the Link Wrapper, not the List Item. We tried to indicate this clearly in the structure panel:

The “List Item” is simply a wrapper for establishing the <li> semantically.

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.