Components

Alert

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.

Default

    <div class="alert" role="alert">
        Default Text
    </div>

    <div class="alert alert-primary" role="alert">
        Info Text
    </div>

    <div class="alert alert-warning" role="alert">
        Warning Text
    </div>

    <div class="alert alert-success" role="alert">
        Success Text
    </div>

    <div class="alert alert-danger" role="alert">
        Error Text
    </div>

Modificated

    <div class="alert" role="alert">
        Default Text
        <i class="icon-check-filled alert-icon"></i>
    </div>

    <div class="alert alert-danger" role="alert">
        Warning Text - <a href="">Link</a>
        <i class="icon-warning-filled alert-icon"></i>
    </div>

    <div class="alert alert-primary" role="alert">
        Info Text
        <i class="icon-cross alert-icon clickable" aria-label="Close"></i>
    </div>

Button

Euroflorist DS uses different predefined button styles, each serving its own purpose. Default button size uses a height of 48px, small buttons use a height of 36px (add .btn-sm).

Use one of those tags: <a>, <button>, <input> to create button, prevent tags which are not focusable. Thanks, that website accessibility on the will be increased.

Default

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Default disabled

<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-warning" disabled>Warning</button>
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-light" disabled>Light</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>

Default loading

<button type="button" class="btn btn-primary btn-loading">Primary</button>
<button type="button" class="btn btn-secondary btn-loading">Secondary</button>
<button type="button" class="btn btn-success btn-loading">Success</button>
<button type="button" class="btn btn-danger btn-loading">Danger</button>
<button type="button" class="btn btn-warning btn-loading">Warning</button>
<button type="button" class="btn btn-info btn-loading">Info</button>
<button type="button" class="btn btn-light btn-loading">Light</button>
<button type="button" class="btn btn-dark btn-loading">Dark</button>

Ghost

<button type="button" class="btn btn-ghost-primary">Primary</button>
<button type="button" class="btn btn-ghost-secondary">Secondary</button>
<button type="button" class="btn btn-ghost-success">Success</button>
<button type="button" class="btn btn-ghost-danger">Danger</button>
<button type="button" class="btn btn-ghost-warning">Warning</button>
<button type="button" class="btn btn-ghost-info">Info</button>
<button type="button" class="btn btn-ghost-light">Light</button>
<button type="button" class="btn btn-ghost-dark">Dark</button>

Ghost disabled

<button type="button" class="btn btn-ghost-primary" disabled>Primary</button>
<button type="button" class="btn btn-ghost-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-ghost-success" disabled>Success</button>
<button type="button" class="btn btn-ghost-danger" disabled>Danger</button>
<button type="button" class="btn btn-ghost-warning" disabled>Warning</button>
<button type="button" class="btn btn-ghost-info" disabled>Info</button>
<button type="button" class="btn btn-ghost-light" disabled>Light</button>
<button type="button" class="btn btn-ghost-dark" disabled>Dark</button>

Ghost loading

<button type="button" class="btn btn-ghost-primary btn-loading">Primary</button>
<button type="button" class="btn btn-ghost-secondary btn-loading">Secondary</button>
<button type="button" class="btn btn-ghost-success btn-loading">Success</button>
<button type="button" class="btn btn-ghost-danger btn-loading">Danger</button>
<button type="button" class="btn btn-ghost-warning btn-loading">Warning</button>
<button type="button" class="btn btn-ghost-info btn-loading">Info</button>
<button type="button" class="btn btn-ghost-light btn-loading">Light</button>
<button type="button" class="btn btn-ghost-dark btn-loading">Dark</button>

Outline

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Outline disabled

<button type="button" class="btn btn-outline-primary" disabled>Primary</button>
<button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-outline-success" disabled>Success</button>
<button type="button" class="btn btn-outline-danger" disabled>Danger</button>
<button type="button" class="btn btn-outline-warning" disabled>Warning</button>
<button type="button" class="btn btn-outline-info" disabled>Info</button>
<button type="button" class="btn btn-outline-light" disabled>Light</button>
<button type="button" class="btn btn-outline-dark" disabled>Dark</button>

Outline loading

<button type="button" class="btn btn-outline-primary btn-loading">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-loading">Secondary</button>
<button type="button" class="btn btn-outline-success btn-loading">Success</button>
<button type="button" class="btn btn-outline-danger btn-loading">Danger</button>
<button type="button" class="btn btn-outline-warning btn-loading">Warning</button>
<button type="button" class="btn btn-outline-info btn-loading">Info</button>
<button type="button" class="btn btn-outline-light btn-loading">Light</button>
<button type="button" class="btn btn-outline-dark btn-loading">Dark</button>

Sizes

<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Card

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.

Default

...
Without animation
<div class="card">
    <div class="card-img">
        <img class="img-responsive" src="kss-assets/image/placeholder_white_200x200.png" alt="...">
    </div>
    <div class="card-body">Without animation</div>
</div>

Lifting

...
Example text
hover 
<div class="card card-lifting">
    <div class="card-img">
        <img class="img-responsive" src="kss-assets/image/placeholder_gray_200x200.png" alt="...">
    </div>
    <div class="card-body">
        <div class="card-lifting-content">Example text</div>
        <div class="card-lifting-hover">
            hover
        </div>
    </div>
</div>

Lifting Transparent

...
Example text
hover 
<div class="card card-lifting card-transparent">
    <div class="card-img">
        <img class="img-responsive" src="kss-assets/image/placeholder_white_200x200.png" alt="...">
    </div>
    <div class="card-body">
        <div class="card-lifting-content">Example text</div>
        <div class="card-lifting-hover">
            hover
        </div>
    </div>
</div>

Checkbox

Euroflorist DS define one type on of checkbox, which is prepared for all states and can be modified for need (for example gradient checkbox).

Default

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="default-checkbox">
    <label class="form-check-label" for="default-checkbox">Default checkbox</label>
</div>

Disabled

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="disabled-checkbox-1" disabled checked>
    <label class="form-check-label" for="disabled-checkbox-1">Disabled checkbox</label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="disabled-checkbox-2" disabled>
    <label class="form-check-label" for="disabled-checkbox-2">Disabled checkbox</label>
</div>

Gradient

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="gradient-checkbox">
    <label class="form-check-label form-check-gradient" for="gradient-checkbox">Gradient checkbox</label>
</div>

Collapse

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 .panel-title element.

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 js-.

Initialize modal via JavaScript:

CollapsePanel.init('#product-panel');
Product information
The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer.The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer. The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer. 
<div id="product-panel" class="panel">
    <div class="panel-heading">
        <a class="panel-title" role="button" href="#product-info">Product information</a>
    </div>
    <div id="product-info" class="collapse">
        <div class="panel-body">
            The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, tulips
            and orange roses to make a stunning arrangement, sure to impress. Packed up whilst still the
            flowers are still in bud so the flowers remain fresh for longer.The epitome of spring. Hot pinks 
            mingled with yellow freesia, fragrant blue hyacinth, tulips and orange roses to make a stunning arrangement,
            sure to impress. Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer.
            The epitome of spring. Hot pinks mingled with yellow freesia, fragrant blue hyacinth, 
            tulips and orange roses to make a stunning arrangement, sure to impress. 
            Packed up whilst still the flowers are still in bud so the flowers remain fresh for longer.
        </div>
    </div>
</div>

Dropdown

A dropdown receives user input, allowing it to choose one of several options. The DS library included three types of dropdown presented below.

Native

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.

<div class="dropdown dropdown-select">
    <select class="dropdown-select-btn">
        <option value="native-1">Item 1</option>
        <option value="native-2">Item 2</option>
        <option value="native-3">Item 3</option>
        <option value="native-4">Item 4</option>
        <option value="native-5">Item 5</option>
        <option value="native-6">Item 6</option>
        <option value="native-7">Item 7</option>
        <option value="native-8">Item 8</option>
        <option value="native-9">Item 9</option>
        <option value="native-10">Item 10</option>
    </select>
</div>

Custom

The custom dropdown can be used, where contain a few options, for example, sorting function.

Initialize modal via JavaScript:

new SingleDropdown('#dropdown');

<div class="dropdown">
    <select id="dropdown" class="dropdown-select-btn">
        <option value="native-1">Item 1</option>
        <option value="native-2">Item 2</option>
        <option value="native-3">Item 3</option>
        <option value="native-4">Item 4</option>
        <option value="native-5">Item 5</option>
        <option value="native-6">Item 6</option>
        <option value="native-7">Item 7</option>
        <option value="native-8">Item 8</option>
        <option value="native-9">Item 9</option>
        <option value="native-10">Item 10</option>
    </select>
</div>

Multiselect

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.

Initialize modal via JavaScript:

new MultipleDropdown('#multi-dropdown');

<div class="dropdown">
    <select id="multi-dropdown" title="Select Multiple" multiple class="dropdown-select-btn">
        <option value="native-1">Item 1</option>
        <option value="native-2">Item 2</option>
        <option value="native-3">Item 3</option>
        <option value="native-4">Item 4</option>
        <option value="native-5">Item 5</option>
        <option value="native-6">Item 6</option>
        <option value="native-7">Item 7</option>
        <option value="native-8">Item 8</option>
        <option value="native-9">Item 9</option>
        <option value="native-10">Item 10</option>
    </select>
</div>

Form

Default form field size uses a height of 48px, small forms use a height of 36px (add .form-control-sm).

Default

<div class="form-group">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group has-success">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group has-error">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group">
    <input class="form-control" type="text" disabled="">
    <label class="form-label" for="">Text label</label>
</div>

Small

<div class="form-group">
    <input class="form-control form-control-sm" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group has-success">
    <input class="form-control form-control-sm" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group has-error">
    <input class="form-control form-control-sm" type="text">
    <label class="form-label" for="">Text label</label>
</div>

<div class="form-group">
    <input class="form-control form-control-sm" type="text" disabled="">
    <label class="form-label" for="">Text label</label>
</div>

With helper text

Helper text
Helper text
Helper text
Helper text 
<div class="form-group-container">
    <div class="form-group">
        <input class="form-control" type="text">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

<div class="form-group-container">
    <div class="form-group has-success">
        <input class="form-control" type="text">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

<div class="form-group-container">
    <div class="form-group has-error">
        <input class="form-control" type="text">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

<div class="form-group-container">
    <div class="form-group">
        <input class="form-control" type="text" disabled="">
        <label class="form-label" for="">Text label</label>
    </div>
    <span class="form-group-message">Helper text</span>
</div>

With icon

<div class="form-group form-group-with-icon">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
    <span class="form-icon"><i class="icon-info-line"></i></span>
</div>

<div class="form-group form-group-with-icon has-success">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
    <span class="form-icon"><i class="icon-info-line"></i></span>
</div>

<div class="form-group form-group-with-icon has-error">
    <input class="form-control" type="text">
    <label class="form-label" for="">Text label</label>
    <span class="form-icon"><i class="icon-info-line"></i></span>
</div>

<div class="form-group form-group-with-icon">
    <input class="form-control" type="text" disabled="">
    <label class="form-label" for="">Text label</label>
    <span class="form-icon"><i class="icon-info-line"></i></span>
</div>

Textarea

Helper text
Helper text
Helper text 
<div class="form-group">
    <div class="group">
        <label class="form-label-normal" for="">Text label</label>
        <textarea class="form-control form-control-textarea"></textarea>
    </div>
    <span class="form-group-message form-group-message-right">Helper text</span>
</div>

<div class="form-group form-group-textarea has-success">
    <div class="group">
        <label class="form-label-normal" for="">Text label</label>
        <textarea class="form-control form-control-textarea"></textarea>
    </div>
    <span class="form-group-message form-group-message-right">Helper text</span>
</div>

<div class="form-group form-group-textarea has-error">
    <div class="group">
        <label class="form-label-normal" for="">Text label</label>
        <textarea class="form-control form-control-textarea"></textarea>
    </div>
    <span class="form-group-message form-group-message-right">Helper text</span>
</div>

Form Group

The form group is a set of two elements, easily extends form controls by text buttons or checkboxes.

Default

example
example 
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">example</span>
    </div>
    <input type="text" class="form-control" placeholder="Input">
</div>

<div class="input-group">
    <input type="text" class="form-control" placeholder="Input">
    <div class="input-group-append">
        <span class="input-group-text ">example</span>
    </div>
</div>

Small

example
example 
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text input-group-text-sm">example</span>
    </div>
    <input type="text" class="form-control form-control-sm" placeholder="Input">
</div>

<div class="input-group">
    <input type="text" class="form-control form-control-sm" placeholder="Input">
    <div class="input-group-append">
        <span class="input-group-text input-group-text-sm">example</span>
    </div>
</div>

Button

<div class="input-group">
    <div class="input-group-prepend">
        <button type="button" class="btn btn-secondary">Button</button>
    </div>
    <input type="text" class="form-control" placeholder="Input">
</div>

<div class="input-group">
    <input type="text" class="form-control" placeholder="Input">
    <div class="input-group-append">
        <button class="btn btn-secondary" type="button">Button</button>
    </div>
</div>

Checkbox

<div class="input-group">
    <div class="input-group-prepend">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="check-input-group">
            <label class="form-check-label" for="check-input-group"></label>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="Input checkbox">
</div>

Radio button

<div class="input-group">
    <div class="input-group-prepend">
        <div class="form-radio">
            <input class="form-radio-input" type="radio" id="radio-input-group-1" name="exampleInputRadio"
                value="option1" checked>
            <label class="form-radio-label" for="radio-input-group-1"></label>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="Input radiobutton 1">
</div>

<div class="input-group">
    <div class="input-group-prepend">
        <div class="form-radio">
            <input class="form-radio-input" type="radio" id="radio-input-group-2" name="exampleInputRadio"
                value="option1" checked>
            <label class="form-radio-label" for="radio-input-group-2"></label>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="Input radiobutton 2">
</div>

Modal

Modals are built with HTML, CSS, and JavaScript and they’re positioned over everything else in the document. That means there is a need to build an HTML structure of modal (base on the examples below) and put it in DOM, no matter in which place because modal will be moved to the bottom of HTML document.

In the button, which fire modal, there should be the date attribute data-modal with the modal's id as a value. Example:

<button id="idButton" type="button" data-modal="modal">Modal</button>

Initialize modal via JavaScript:

new Modal('#idButton');

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>

Default

<button id="modalBtn" type="button" class="btn btn-primary" data-modal="modal">Modal</button>

<div class="modal" id="modal">
    <div class="modal-dialog">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <i class="icon-cross"></i>
            </button>
            <h3 class="modal-title">This is a title heading</h3>
            <p class="modal-content">Välkommen! Det är jag som är FloristFia och det här min oas, en plats
                för dig som tycker om blommor och vill ha inspiration till allt vackert du kan göra med
                dem. Här delar jag med mig av mina bästa tips och visar hur du gör allt från vackra
                bordsdukningar till ljuvliga buketter med säsongens blommor.</p>
            <div class="modal-btn">
                <button type="button" class="btn btn-ghost-dark btn-sm" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-secondary btn-sm">Save</button>
            </div>
        </div>
    </div>
</div>

Small

<button id="modalBtn2" type="button" class="btn btn-primary" data-modal="modal2">Small Modal</button>

<div class="modal" id="modal2">
    <div class="modal-dialog">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <i class="icon-cross"></i>
            </button>
            <p class="modal-content">Välkommen! Det är jag som är FloristFia och det här min oas, en plats
                för dig som tycker om blommor.</p>
        </div>
    </div>
</div>

Content

<button id="modalBtn3" type="button" class="btn btn-primary" data-modal="modal3">Content Modal</button>

<div class="modal" id="modal3">
    <div class="modal-dialog">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <i class="icon-cross"></i>
            </button>
            <h3 class="modal-title">This is a title heading</h3>
            <p class="modal-content">
                <input class="form-control form-control-sm" type="text" placeholder="Input modal">
            </p>
            <div class="modal-btn">
                <button type="button" class="btn btn-ghost-dark btn-sm" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-secondary btn-sm">Save</button>
            </div>
        </div>
    </div>
</div>

Radio Button

Euroflorist DS define one type on of checkbox, which is prepared for all states.

Default

<div class="form-radio">
    <input class="form-radio-input" type="radio" name="default-radio" id="default-radio-1"  value="option-1" checked>
    <label class="form-radio-label" for="default-radio-1">Default Radio Button 1</label>
</div>

<div class="form-radio">
    <input class="form-radio-input" type="radio" name="default-radio" id="default-radio-2" value="option-2">
    <label class="form-radio-label" for="default-radio-2">Default Radio Button 2</label>
</div>

Disabled

<div class="form-radio">
    <input class="form-radio-input" type="radio" id="disabled-radio-1" name="disabled-radio" value="option-1" disabled checked>
    <label class="form-radio-label" for="disabled-radio-1">Disabled Radio Button 1</label>
</div>

<div class="form-radio">
    <input class="form-radio-input" type="radio" id="disabled-radio-2" name="disabled-radio" value="option-2" disabled>
    <label class="form-radio-label" for="disabled-radio-2">Disabled Radio Button 2</label>
</div>

Spinner

Spinner is a simple circle spinning around its own centre including small animation of color referring to main gradient.

<i class="spinner"></i>

Tooltip

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.

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="top">
    Tooltip on top
</button>

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="bottom">
    Tooltip on down
</button>

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="left">
    Tooltip on left
</button>

<button type="button" class="btn btn-primary" data-tippy="Tooltip" data-tippy-content="Tooltip" data-tippy-arrow="true"
    data-tippy-placement="right">
    Tooltip on right
</button>