Design System

Misc

Headings

Page Heading Level 1

Page Heading Level 2

Page Heading Level 3

Page Heading Level 4

Page Heading Level 5
Page Heading Level 6

Icons

The icons in the Lucide library can be implemented via a JavaScript call, passing the icon name and, optionally, its width, height and stroke-width attributes.

Modal

Use the Modal component to add a pre-designed one. Then simply fill the slots with the content specific to your instance.

When editing, please press the Enter key once the open/close button is selected to show/hide the modal window.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis eleifend cursus. Suspendisse in turpis in est congue sollicitudin ut at ex. Donec tristique, lacus sed gravida elementum, velit neque pulvinar dolor, sed congue nisi velit id leo. Curabitur eu convallis nunc, non tempus leo. Aliquam erat sem, pharetra vulputate enim non, ultrices sollicitudin justo. Donec egestas elementum nisl, eu cursus turpis lobortis vel. Curabitur vel velit eu felis vehicula auctor. Aliquam cursus diam ante, vitae pulvinar nunc porta rutrum. Nulla posuere mauris tortor, gravida lobortis nisi iaculis id. Sed faucibus ullamcorper metus, sit amet laoreet ipsum auctor at. Cras tincidunt urna vel molestie pharetra. Nam tortor diam, lobortis at dapibus in, pulvinar ut mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis purus sit amet nibh egestas feugiat. Cras ultricies nec purus nisi.

Buttons

DefaultButton

The primary and outlined attributes allow for easy modification of the button style.

CustomButton

Some CSS4 variables like --ft-button-primary-background-color or --ft-button-color allows you to easily change the coloring of buttons.

Pills

LifecyclePill

ProductPill

StatusPill

Cards

  • The CSS4 variables --color and --color-light allow you to easily change the coloring of card elements.
  • The CSS4 variable --arrow-link-display allows you to condition the display of the arrow icon (and the "Docs" text for ProductCard), visible by default.
  • The CSS declaration height: 100%; ensures that the card will occupy the entire height, regardless of the number of lines occupied by the text.
  • The font-size property allows you to reduce or increase the size of card elements.

JourneyCard

ProductCard

IconLinkCard

ListGroupCard

In a List group card component, it is possible to add as many items as desired via drag&drop of List group item components.

List group card title
List group card text