Components

Collapse

Collapse component might hold large amount of information, while display only part of it depending on users need and preferences.

Components

Collapse component consist of tiny collapse item components. By default all collapse items are closed and could fit only title and description. You can create custom collapse components with different amount of items.

Collapse / Default
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapse / Borderless
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.

Customize

You can quickly style collapse component, by restyling collapse item. Also you can update interactions linked to the component Collapse item (Reveal) and Collapse item (Close) and change how component animates.

Collapse / Collapse Item
Collapsed text title
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi. Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor.