Custom List Item in Sketch

Use the Custom List Item Component in Sketch to display the same type of information that you would in a normal List Item but with the complete freedom to arrange your layout exactly as you would like.

Custom List Item Demo

State

The Custom List Item supports the following interactive states as overrides: Inactive for the normal state and Active for the selected state.

Using the Custom List Item

In order to customize List Item layouts, start by dragging a List/Custom/Item to your artboard, right-clicking on top of it, and selecting the Detach from Symbol option near the bottom of the contextual menu. In your layers panel under the newly appeared List/Custom/Item group, you should see the following:

Layer	Use
🚫 metadata	A special locked layer starting with a prohibited icon. This layer is required by the code generation and you should avoid deleting or modifying it.
💡Primary Action Group	Groups together the Primary Action layout elements
💡Secondary Action Group	Groups together the Secondary Action layout elements
💡State	Contains the item Background and defines whether the List Item is in an active or inactive state

Layout

So, let's see how we can create an intricate layout for the product List Item above in three simple steps. Once we have dragged in a Custom List Item in an empty Artboard, selected the Detach from Symbol, and applied the basic styling available by changing the background color inside the state, we should have something like this for a starting point.

First, we have to remove the paragraph and footer. Then we will reuse the Header from the Primary Action Group but resize it to fit in the right half only and update the strings for the Title and Subtitle Text. In the Secondary Action Group, we will add a Contained Button, position it near the bottom right corner, updating its text and resize it accordingly to fit the new value. Lastly, let's remove the default Secondary Action, as we will not be needing Icons for our target custom layout.
Next, we will insert a List/Custom/Blocks/Image Content in the Primary Action Group and add a Badge on top of it within the same group. Now, we have to size the image according to the Item size and select content for it. After modifying the Badge, updating its Value Text, and setting its Elevation to None, we should have something similar to this.
In the last step, we will add a couple of Text/Title elements to the Primary Action Group: a larger H3 to display the price of the product and a smaller Body 1 to its right for complimentary text. After positioning them in the empty space between the Header and the Contained Button, we can make a final alignment adjustment to the Button with which our target layout is complete.

Styling

The Custom List Item has high-level styling flexibility similar to the normal List Item with a few overrides for the Secondary Actions and control over their text, icons, and buttons colors. Just like every List Item, it is possible to specify the Item background color through the overrides, as well.

Furthermore, additional styling is possible based on the elements that have been inserted in the Custom List Item. For example, we can set a color for the text of the pricing to emphasize it and change the Badge background and Button background colors.