List

List lets you define a list of components. For example: list of buttons, list of icons, list of cards. It is basically a flexbox.

Usage

You can use a list in following way:

{{<list>}}
  Your components goes here.
{{</list>}}

Available Properties

dir: Direction of the list. It can be either row or col. The default is row.
gap: Controls the gap between the items. The default is 1.

Example

List of Icons

{{<list>}}
  {{<icon name="docker">}}
  {{<icon name="gcp">}}
  {{<icon name="facebook">}}
{{</list>}}

List of Buttons

Resume Resume

{{<list>}}
  {{< button type="icon-only" icon="file-text" >}}
  {{< button type="text-only" text="Resume" >}}
  {{< button type="icon-text" icon="file-text" text="Resume" >}}
{{</list>}}

Changing Gap Between Items

Resume Resume

{{<list gap="4">}}
  {{< button type="icon-only" icon="file-text" >}}
  {{< button type="text-only" text="Resume" >}}
  {{< button type="icon-text" icon="file-text" text="Resume" >}}
{{</list>}}

Changing List Direction

Resume Resume

{{<list dir="col">}}
  {{< button type="icon-only" icon="file-text" >}}
  {{< button type="text-only" text="Resume" >}}
  {{< button type="icon-text" icon="file-text" text="Resume" >}}
{{</list>}}