<h1 class="heading-level-1 mw-730 mx-auto mb-md">Form Elements</h1>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Buttons</h2>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Regular</h3>
<div class="mw-730 mx-auto">
    <a href="#" class="button-default">Default</a>
    <button href="#" class="button-default" disabled>Disabled</button>
    <a href="#" class="button-small">Default</a>
    <a href="#" class="button-small selected">Select</a>
    <button href="#" class="button-small" disabled>Disabled</button>
    <a href="#">Link</a>
    <hr>
</div>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Grouped</h3>
<div class="mw-730 mx-auto">
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group single">
        <div class="button-group-title">Studietakt</div>
        <button href="#" class="button-small" data-active="false">100%</button>
        <button href="#" class="button-small" data-active="false">75%</button>
        <button href="#" class="button-small" data-active="false">50%</button>
        <button href="#" class="button-small" data-active="false">25%</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <hr>
</div>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Dropdown</h2>
<div class="mw-730 mx-auto">
    <div class="row">
        <div class="col-6">
            <div class="dropdown">
                <button class="button-dropdown" type="button" id="dropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Välj ditt område<span class="fas fa-caret-down float-right"></span></button>
                <div class="dropdown-menu" aria-labelledby="dropDown">
                    <a href="#" class="dropdown-item">Härnösand</a>
                    <a href="#" class="dropdown-item">Sundsvall</a>
                    <a href="#" class="dropdown-item">Östersund</a>
                </div>
            </div>
        </div>
        <div class="col-6">
            <form class="searchbar-container">
                <input class="button-dropdown" type="text" name="search" id="search" placeholder="Sök bland alla program och kurser"><button class="button-search" type="submit"><span
                        class="fas fa-search"></span></button>
            </form>
        </div>
    </div>
    <hr>
</div>
<h1 class="heading-level-1 mw-730 mx-auto mb-md">{{ text }}</h1>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Buttons</h2>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Regular</h3>
<div class="mw-730 mx-auto">
    <a href="#" class="button-default">Default</a>
    <button href="#" class="button-default" disabled>Disabled</button>
    <a href="#" class="button-small">Default</a>
    <a href="#" class="button-small selected">Select</a>
    <button href="#" class="button-small" disabled>Disabled</button>
    <a href="#">Link</a>
    <hr>
</div>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Grouped</h3>
<div class="mw-730 mx-auto">
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group single">
        <div class="button-group-title">Studietakt</div>
        <button href="#" class="button-small" data-active="false">100%</button>
        <button href="#" class="button-small" data-active="false">75%</button>
        <button href="#" class="button-small" data-active="false">50%</button>
        <button href="#" class="button-small" data-active="false">25%</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <div class="button-group multiple">
        <div class="button-group-title">Utbildningstyp</div>
        <button href="#" class="button-small" data-active="false">Program</button>
        <button href="#" class="button-small" data-active="false">Kurs</button>
    </div>
    <hr>
</div>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Dropdown</h2>
<div class="mw-730 mx-auto">
    <div class="row">
        <div class="col-6">
            <div class="dropdown">
                <button class="button-dropdown" type="button" id="dropDown" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">Välj ditt område<span class="fas fa-caret-down float-right"></span></button>
                <div class="dropdown-menu" aria-labelledby="dropDown">
                    <a href="#" class="dropdown-item">Härnösand</a>
                    <a href="#" class="dropdown-item">Sundsvall</a>
                    <a href="#" class="dropdown-item">Östersund</a>
                </div>
            </div>
        </div>
        <div class="col-6">
            <form class="searchbar-container">
                <input class="button-dropdown" type="text" name="search" id="search"
                    placeholder="Sök bland alla program och kurser"><button class="button-search" type="submit"><span
                        class="fas fa-search"></span></button>
            </form>
        </div>
    </div>
    <hr>
</div>
{
  "text": "Form Elements"
}
  • Content:
    $('.button-group button').on('click', function () {
        if ($(this).parent().hasClass('multiple')) {
            $(this).toggleClass('selected');
            $(this).attr('data-active', $(this).attr('data-active') == 'true' ? 'false' : 'true');
        } else if ($(this).parent().hasClass('single')) {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected').attr('data-active', 'false');
            } else {
                $(this).siblings().removeClass('selected').attr('data-active', 'false');
                $(this).addClass('selected').attr('data-active', 'true');
            }
        }
    });
  • URL: /components/raw/form_elements/form_elements.js
  • Filesystem Path: src\components\01-global_components\form_elements\form_elements.js
  • Size: 612 Bytes
  • Handle: @form_elements
  • Preview:
  • Filesystem Path: src\components\01-global_components\form_elements\form_elements.hbs

Global Component - Buttons (H1)

Variants