Skip to main content

Widget Layout List

The List widget displays the items in a list. The List widget can be configured as follows:

List Parameters & Layout​

List Type​

The List Type option defines the basic styling of the list. The default is UIkit 3 List. Available options are:

  • Default - The list will be styled with a default list styling
  • UIkit 3 List - The list will be styled with the UIkit 3 List component
  • UIkit 3 List Divider - The list will be styled with the UIkit 3 List component and a divider between the list items
  • UIkit 3 List Strip - The list will be styled with the UIkit 3 List component and a strip between the list items
  • UIkit 3 List Disc - The list will be styled with the UIkit 3 List component and a disc before the list items
  • UIkit 3 List Square - The list will be styled with the UIkit 3 List component and a square before the list items
  • UIkit 3 List Circle - The list will be styled with the UIkit 3 List component and a circle before the list items
  • UIkit 3 List Decimal - The list will be styled with the UIkit 3 List component and a decimal counter in front of the list items
  • UIkit 3 List Hyphen - The list will be styled with the UIkit 3 List component and a hyphen before the list items

List Size​

Define the size of the list items (its padding). The default is medium. Available options are:

  • collapse - The list items will be displayed without any padding
  • medium - The list items will be displayed with a medium padding
  • large - The list items will be displayed with a large padding

List Class​

Define a custom class for the list. The default is. Multiple classes can be added by separating them with a space.

my-custom-class another-custom-class

Item Animation​

Define the animation of the list items. The default is Off. Available options are:

  • Off - The list items will be displayed without any animation
  • slide left - The list items will be displayed with a slide left animation
  • slide left small - The list items will be displayed with a small slide left animation
  • slide left medium - The list items will be displayed with a medium slide left animation
  • slide right - The list items will be displayed with a slide right animation
  • slide right small - The list items will be displayed with a small slide right animation
  • slide right medium - The list items will be displayed with a medium slide right animation
  • slide top - The list items will be displayed with a slide top animation
  • slide top small - The list items will be displayed with a small slide top animation
  • slide top medium - The list items will be displayed with a medium slide top animation
  • slide bottom - The list items will be displayed with a slide bottom animation
  • slide bottom small - The list items will be displayed with a small slide bottom animation
  • slide bottom medium - The list items will be displayed with a medium slide bottom animation
  • fade - The list items will be displayed with a fade animation
  • scale up - The list items will be displayed with a scale up animation
  • scale down - The list items will be displayed with a scale down animation

List Attributes​

Define custom attributes for the list. The default is. Multiple attributes can be added by separating them with a space.

data-my-attribute="{foo:'bar', some: 500}"

Image​

Image Aspect Ratio​

Define the aspect ratio of the image. The default is 16:9. The image will cover this ratio based on the list item size.

Width​

Define the width of the image. The default is 100%. Affects device widths of 639px and smaller. Available options are:

  • small - The image will be displayed with a small width
  • medium - The image will be displayed with a medium width
  • large - The image will be displayed with a large width
  • 16% - The image will be displayed with a 16% width
  • 20% - The image will be displayed with a 20% width
  • 25% - The image will be displayed with a 25% width
  • 33% - The image will be displayed with a 33% width
  • 40% - The image will be displayed with a 40% width
  • 50% - The image will be displayed with a 50% width
  • 60% - The image will be displayed with a 60% width
  • 66% - The image will be displayed with a 66% width
  • 75% - The image will be displayed with a 75% width
  • 80% - The image will be displayed with a 80% width
  • 100% - The image will be displayed with a 100% width

Width@s​

Define the width of the image. The default is small. Affects device widths of 640px and larger. Available options are:

  • small - The image will be displayed with a small width
  • medium - The image will be displayed with a medium width
  • large - The image will be displayed with a large width
  • 16% - The image will be displayed with a 16% width
  • 20% - The image will be displayed with a 20% width
  • 25% - The image will be displayed with a 25% width
  • 33% - The image will be displayed with a 33% width
  • 40% - The image will be displayed with a 40% width
  • 50% - The image will be displayed with a 50% width
  • 60% - The image will be displayed with a 60% width
  • 66% - The image will be displayed with a 66% width
  • 75% - The image will be displayed with a 75% width
  • 80% - The image will be displayed with a 80% width
  • 100% - The image will be displayed with a 100% width

Width@m​

Define the width of the image. The default is small. Affects device widths of 960px and larger. Available options are:

  • small - The image will be displayed with a small width
  • medium - The image will be displayed with a medium width
  • large - The image will be displayed with a large width
  • 16% - The image will be displayed with a 16% width
  • 20% - The image will be displayed with a 20% width
  • 25% - The image will be displayed with a 25% width
  • 33% - The image will be displayed with a 33% width
  • 40% - The image will be displayed with a 40% width
  • 50% - The image will be displayed with a 50% width
  • 60% - The image will be displayed with a 60% width
  • 66% - The image will be displayed with a 66% width
  • 75% - The image will be displayed with a 75% width
  • 80% - The image will be displayed with a 80% width
  • 100% - The image will be displayed with a 100% width

Width@l​

Define the width of the image. The default is small. Affects device widths of 1200px and larger. Available options are:

  • small - The image will be displayed with a small width
  • medium - The image will be displayed with a medium width
  • large - The image will be displayed with a large width
  • 16% - The image will be displayed with a 16% width
  • 20% - The image will be displayed with a 20% width
  • 25% - The image will be displayed with a 25% width
  • 33% - The image will be displayed with a 33% width
  • 40% - The image will be displayed with a 40% width
  • 50% - The image will be displayed with a 50% width
  • 60% - The image will be displayed with a 60% width
  • 66% - The image will be displayed with a 66% width
  • 75% - The image will be displayed with a 75% width
  • 80% - The image will be displayed with a 80% width
  • 100% - The image will be displayed with a 100% width

Image Position​

Define the position of the image. The default is last. Available options are:

  • first - The image will be displayed before the list item content
  • last - The image will be displayed after the list item content

Image Layout​

Define the layout of the image. The default is default. Available options are:

  • default - The image will be displayed with the default layout
  • rounded - The image will be displayed with a rounded layout
  • circle - The image will be displayed with a circle layout

Image Container Class​

Define the class of the image container. Multiple classes can be added by separating them with a space.

my-class another-class