300px
x
150px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<action-list> <div data-view-component="true"> <div data-view-component="true" class="ActionList-sectionDivider"> <h3 id="heading-title-b4607c86-896f-4780-bb4c-c608ab590554" data-view-component="true" class="ActionList-sectionDivider-title"> Action List </h3> </div> <ul id="action-list-29e7acfb-cc05-406b-ada8-f87c7482dd99" role="list" aria-labelledby="heading-title-b4607c86-896f-4780-bb4c-c608ab590554" data-view-component="true" class="ActionListWrap"> <li data-targets="action-list.items" data-view-component="true" class="ActionListItem"> <a id="item-9e68b3f9-ee00-452c-9dad-3db11c1d17a1" href="/" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg width="16" height="16" data-view-component="true"><path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path></svg> </span> <span data-view-component="true" class="ActionListItem-label"> Leading SVG visual </span> </a> </li> <li data-targets="action-list.items" data-view-component="true" class="ActionListItem"> <a id="item-02ddd3fa-4438-42a2-9e9a-0e02a0926b39" href="/" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <span data-view-component="true"><span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span></span> </span> <span data-view-component="true" class="ActionListItem-label"> Custom content </span> </a> </li> </ul> </div></action-list>No notes provided.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
render(Primer::Alpha::ActionList.new( role: role, scheme: scheme, show_dividers: show_dividers )) do |component| component.with_heading(title: "Action List") component.with_item(label: "Leading SVG visual", href: "/") do |item| item.with_leading_visual_svg do '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe end end component.with_item(label: "Custom content", href: "/") do |item| item.with_leading_visual_content do '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe end endend| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|