Prefabs

Getting Started

Prefabs

Utilities

Feedback

Donate

Prefabs

Getting Started

Utilities

Feedback

Github

Donate

Getting Started

Prefabs

Utilities

List: Create a custom accessible list in framer

Simple: Turn any component into a list.

Try it out: Copy and try it out

List: Create a custom accessible list in framer

Simple: Turn any component into a list.

Try it out: Copy and try it out

v1.0

List

Creates a custom list assigning the correct aria roles for the div elements following Aria-Patterns.

Accessibility Reference

Github

Accessibility Reference

Github

Why use this prefab?

Framer allows for the creation of list within text but when it comes to custom list there is currently no way of doing this natively in way that would be accessible. This prefab allows for the creation of any component to become a list. It uses aria roles of list and list item to create accessible custom list.

Why use this prefab?

Framer allows for the creation of list within text but when it comes to custom list there is currently no way of doing this natively in way that would be accessible. This prefab allows for the creation of any component to become a list. It uses aria roles of list and list item to create accessible custom list.

Why use this prefab?

Framer allows for the creation of list within text but when it comes to custom list there is currently no way of doing this natively in way that would be accessible. This prefab allows for the creation of any component to become a list. It uses aria roles of list and list item to create accessible custom list.

Features

Features

Features

Sets the correct roles for the items in the list.

Can convert any component to be a custom list item.

Must be a component

To make the list display correctly in the canvas and in preview the connecting list items must be components.

Must be a component

To make the list display correctly in the canvas and in preview the connecting list items must be components.

Must be a component

To make the list display correctly in the canvas and in preview the connecting list items must be components.

How to use

How to use

How to use

Use the Prefab: Drag the prefab on to the canvas.

Connect: Connect and add as many components to the prefab and it will create an instance of that component and set the width:100%

Done: That is it! You are all set to use this prefab.

an image on how to use prefab list.
an image on how to use prefab list.
an image on how to use prefab list.

Accessbility considerations

Accessbility considerations

Accessbility considerations

Things to consider when using the list prefab:

Creating list items: While this prefab can accept any component it is good practice ensure that users who are navigating the site visually still can understand what is a list and what is not.

Order list: This prefab is really meant for unordered list.

Properties

Properties

Properties

Property

Default

Description

Items

Array

Array of component instances to be used within the list.

Direction

Boolean

Sets layout direction of the list.

Gap

Number

The gap between items.