Sekcja(ang. Section)

Strony można podzielić na poziome sekcje. Sekcja jest największym elementem składowym strony i służy do oddzielania od siebie i nazwania oddzielnych grup treści.

Struktura

section

  1. Nagłówek sekcji

    1. Tytuł

      Rekomendowany limit tekstu to 3-4 wyrazy i maksymalnie 2 linijki na wszystkich rozdzielczościach. Na końcu tytułu sekcji nie należy stawiać kropki.

    2. Separator (opcjonalny)

      Separator jest elementem opcjonalnym. Powinien być stosowany w sposób spójny na całej stronie. Separatory mogą oddzielać od siebie: dwie sekcje, dwie podsekcje lub podsekcję i tytuł sekcji.

  2. Treść sekcji

    Sekcja może zawierać dowolne komponenty z wyjątkiem elementów typu menu, ścieżka okruszków czy stopka. Dodatkowo, może być podzielona na podsekcje.

Warianty

section

W zależności od umiejscowienia w hierarchii informacji wyróżniamy:

  1. Sekcję

    Największy element składowy strony, grupujący inne komponenty.

  2. Podsekcję

    Jeśli istnieje taka potrzeba, sekcja może zostać podzielona na podsekcje. Sprzyja to lepszej organizacji treści w przypadku podstron zawierających dużą ilość informacji czy komponentów.

section

Zarówno sekcje, jak i podsekcje występują w dwóch wariantach kolorystycznych:

  1. Z białym tłem

    Wariant podstawowy.

  2. Z szarym tłem

    Wariant stosowany w celu dodatkowego podkreślenia odrębności danej sekcji (i ewentualnych podsekcji) i zwrócenia na nie uwagi użytkownika. Nie należy używać więcej niż jednej szarej sekcji na podstronie.

Podsekcje muszą występować w tym samym wariancie kolorystycznym co sekcja, w skład której wchodzą.

Zasady stosowania

Spójne tytuły sekcji

Konsekwentne stosowanie różnych wariantów tytułu strony. Dobrą praktyką jest stosowanie tego samego wariantu we wszystkich sekcjach.

Wyróżnione sekcje

Możliwe są pewne odstępstwa od tej reguły. Przykładowo, ostatnia sekcja zawierająca zapis do newslettera lub odsyłająca do innych podstron może zostać wyróżniona tytułem na całą szerokość strony dla podkreślenia jej odrębności. Można także wykorzystać wariant z szarym tłem, by np. w środku podstrony wyróżnić daną treść.

Spójna kolorystyka

Podsekcje zawsze powinny mieć ten sam kolor co sekcja, do której należą.

Zbyt długie tytuły sekcji

Rekomendowany limit tekstu to 3-4 wyrazy i maksymalnie 2 linijki na wszystkich rozdzielczościach. Tytułu nie należy kończyć kropką.

Zbyt dużo szarych sekcji

Sekcja z szarym tłem powinna być stosowana w wyjątkowych sytuacjach i nie częściej niż raz na jednej podstronie.

Tylko jedna podsekcja

Nie powinno się stosować pojedynczej podsekcji. W takim przypadku należy umieścić treść bezpośrednio w sekcji.