1. Komponenty

Akordeon

angl. Accordion

Slouží ke sbalení obsahu, který pro uživatele není v dané chvíli podstatný.

Ukázka použití akordeonu v textu


<div class="min-height--accordion">
    <div class="accordion">
        <a href="#" class="accordion__link">
            <h3 class="accordion__title">První položka akordeonu</h3>
        </a>
        <div class="accordion__content">
            <p>
                Obsah první položky akordeonu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.
            </p>
        </div>
    </div>
    <div class="accordion">
        <a href="#" class="accordion__link">
            <h3 class="accordion__title">Druhá položka akordeonu</h3>
        </a>
        <div class="accordion__content">
            <p>
                Obsah druhé položky akordeonu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.
            </p>
        </div>
    </div>   
</div>

Ukázka použití menšího akordeonu ve formuláři


<div class="min-height--accordion">
    <div class="accordion accordion--smaller">
        <a href="#" class="accordion__link">
            <h4 class="accordion__title">Direct Mail Advertising How I Made …</h4>
        </a>
        <div class="accordion__content">
            <div class="row">
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-1">
                        <label for="accordion-checkbox-1">Pictures In The Sky</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-2">
                        <label for="accordion-checkbox-2">Radio Astronomy</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-3">
                        <label for="accordion-checkbox-3">The Basics Of Buying A Telescope</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion accordion--smaller">
        <a href="#" class="accordion__link">
            <h4 class="accordion__title">Feedback Management</h4>
        </a>
        <div class="accordion__content">
            <div class="row">
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-4">
                        <label for="accordion-checkbox-4">Pictures In The Sky</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

  • Pro zpřehlednění stránky a pro urychlení orientace v případech, kdy uživatelé potřebují pouze malou část obsahu
  • V případě omezeného vertikálního prostoru na stránce, nebo pokud není žádoucí, aby byla stránka příliš dlouhá
  • Vyhněte se vnořeným akordeonům
  • Umožněte v akordeonu rozbalení (otevření) více sekcí zároveň
  • Zajistěte klikatelnou celou oblast záhlaví
  • Označení jednotlivých sekcí akordeonu volte takové, aby bylo jasné, co je jejich obsahem, ještě než je uživatel rozbalí

Akordeon v textu

  • Nadpis je dostatečně velký
  • Vhodné pro velmi dlouhé a odborné texty

Akordeon ve formuláři

  • Vhodné pro dlouhé formuláře, kde není potřeba vyplňovat všechny údaje
  • Nadpis akordeonu je menší kvůli omezenějšímu prostoru uvnitř formuláře

Užitečné odkazy

Pravidla pro formuláře