Nesting obalových komponent

Základní pravidla pro vrstvení panelů a containerů

• Každá obalová komponenta má nastavení úrovní = Level. Úrovně jsou base, outline a contrast.
• Není dovolené vrstvit panely a containery stejné úrovně!
• Není dovolené vrstvit na sebe panely a další obalové komponenty stejné úrovně.
• Toto pravidla platí pro všechny obalové komponenty a jejich kombinace, do kterých je možné vkládat další úrovně.

Komponenty do kterých můžu vkládat úrovně obsahu

• accordeon
• panel
• container
• tile
• modal
• sidesheet
• searchresults
• sectionheader

Ukázka nestingu jednotlivých úrovní

1. level

• První level panelů a containerů a dalších obalových komponent je vždy Base.

2. level

• Druhý level je standardně Outline.
• Druhý level je standardně Outline. V závislosti na rozhodnutí UX designera pro konkrétní use-case může být také Contrast.

3. level

• Třetí level je standardně Constrast.
• V závislosti na typu panelu použitého na levelu dva je povolené na levelu 3 použít nastavení Outline nebo Contrast.

Omezení

Není dovolené umístit level Base na jinou úroveň než 1. a není dovolené vrstvit dvě stejné úrovně panelu/containeru, protože dochází ke slévání obsahu kvůli vizuálu variant. Například:

• Pokud je na levelu 2 outline, na levelu 3 nemůže být také outline.
• Pokud je na levelu 2 contrast, na levelu 3 nemůže být také contrast

Nikdy nesmí být na druhé úrovni level Base.

Nikdy nesmí být na třetí úrovni level Base, nebo level který je stejný jako předcházející.

4. a další level

• Z důvodu nároků na horizontální prostor se nedoporučuje používat více úrovní zanoření obsahu
• Pokud je to z důvodů například kompikované struktury obsahu nezbytné, je třeba dodržet pravidla. Vždy se musí použít odpovídající úroveň tak aby nebyla v konfliktu s úrovní předcházející.
• To znamená: Base → Outline → Contrast → Outline → Contrast → Outline → Contrast → Outline Contrast NEBO Base → Contrast → Outline → Contrast → Outline a tak dále.

Kombinace s overlay komponentami

• Uvnitř komponent Modal a Sidesheet je možné používat containery a panely.
• v takovém případě se Sidesheet a Modal počítá jako level Base.
• Všechny další obalové komponenty v nich umístěné se řídí pravidlem pro level 2.