Collapse

Collapse is used to group similar content and hide or show it depending on user needs or preferences. It gives users more granular control over the interface and help digest content in stages, rather than all at once.

Components

Collapse / Borderless
Click here to expand the collapsed text
expand_more
Conveniently supply empowered infrastructures whereas client-centered sources. Synergistically exploit high-quality quality vectors for excellent scenarios. Uniquely reinvent intermandated imperatives with unique partnerships. Proactively engage client-focused.
Click here to expand the collapsed text
expand_more
Conveniently supply empowered infrastructures whereas client-centered sources. Synergistically exploit high-quality quality vectors for excellent scenarios. Uniquely reinvent intermandated imperatives with unique partnerships. Proactively engage client-focused.
Click here to expand the collapsed text
expand_more
Conveniently supply empowered infrastructures whereas client-centered sources. Synergistically exploit high-quality quality vectors for excellent scenarios. Uniquely reinvent intermandated imperatives with unique partnerships. Proactively engage client-focused.
Click here to expand the collapsed text
expand_more
Conveniently supply empowered infrastructures whereas client-centered sources. Synergistically exploit high-quality quality vectors for excellent scenarios. Uniquely reinvent intermandated imperatives with unique partnerships. Proactively engage client-focused.
Click here to expand the collapsed text
expand_more
Conveniently supply empowered infrastructures whereas client-centered sources. Synergistically exploit high-quality quality vectors for excellent scenarios. Uniquely reinvent intermandated imperatives with unique partnerships. Proactively engage client-focused.

All SystemFlow resources

SystemFlow Full Version

Everything you need to ship websites faster than ever. Preview all components and sections in the full version of SystemFlow.

SystemFlow for Figma (Free version)

Get a free Figma version where you can use all components, icons and styles and some sections components.

SystemFlow University

Watch a complete guide for Full Version of our framework for Figma and Webflow. Learn how to use the docs, components, styles and more!

Components

Components are the reusable building blocks of SystemFlow. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

General

Typography
Button
Icons

Navigation

Link
Breadcrumbs
Dropdown
Nav Menu

Form

Input
Textarea
Form Toggles
Example Forms

Data Display

Avatar
Card
Collapse
Table
Tag
Tabs
Tooltip

Feedback

Alert
Modal
Toast

Sections

Use sections to build landing pages in a swift. SystemFlow Lite contains 2 out of 15 section categories available in the full version.

Hero Section
FAQ Section

Get access to all SystemFlow components in Full Version

Get SystemFlow