Euroflorist Design System has five defined types of alerts, which are available for any length of text. Those elements can be modified for example changing the icon or adding optional dismiss button.
Euroflorist DS Framework contains two types of the card as a flexible container to present products.
Card with lifting animation was prepared in two options. One of them is prepared for full background images, there is no padding and floating element are not transparent. Another is prepared for images with white or transparent background.
Euroflorist DS define one type on of checkbox, which is prepared for all states and can be modified for need (for example gradient checkbox).
The collapse element was created to show and hide content. To use it in the project there need copy template below.
Id attribute for the
.collapse element should be unique and put as a value for the
href attribute of
To initialize collapse there is need to use a function with parameter as a selector of
.panel element. There can be an
id (for single elements) or a
class (for group elements). For class name, there is recommended to write a prefix
A dropdown receives user input, allowing it to choose one of several options. The DS library included three types of dropdown presented below.
The native dropdown should be used for checkout flow or for dropdowns where is a lot of options. It will be more friendly user experience.
The custom dropdown can be used, where contain a few options, for example, sorting function.
The custom multi-select dropdown can be used, where user can choose more than one option, for example, filter function. There is important to include
title attribute in
select tag because the value of this attribute will be used as a placeholder text.
Default form field size uses a height of 48px, small forms use a height of 36px (add
With helper text
The form group is a set of two elements, easily extends form controls by text buttons or checkboxes.
In the button, which fire modal, there should be the date attribute
data-modal with the modal's id as a value.
<button id="idButton" type="button" data-modal="modal">Modal</button>
If there is a need to fire modal by different buttons - use to this the dedicated class name. Example:
<button class="js-modal-btn" type="button" data-modal="modal">Modal</button> <button class="js-modal-btn" type="button" data-modal="modal">Modal</button> <script> new Modal('.js-modal-btn'); </script>
This is a title heading
This is a title heading
Spinner is a simple circle spinning around its own centre including small animation of color referring to main gradient.
Euroflorist Design System is using Tippy.js library to create simple static text tooltips. Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.