02.06 Boxy – S pozadím

Zdrojové CSS: /src/css/molecules/box/_bg.scss

Defaultní

Výchozí molekula pro zobrazení nějakého obsahu / molekuly na barevném podkladu. Do .box-bg lze vkládat libovolné komponenty z frameworku.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Ukázka s větším písmem

Stejné jako výchozí molekula, jen je uvnitř použita classa big z SK mini frameworku.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Ukázka s menším odsazením

Molekula vycházející z defaultní molekuly. Pro menší odsazení je potřeba přidat modifikátor box-bg--medium na .box-bg.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Ukázka s nejmenším odsazením

Molekula vycházející z defaultní molekuly. Pro malé odsazení je potřeba přidat modifikátor box-bg--small na .box-bg.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Ukázka s barevným (primárním) pozadím a bílým textem

Molekula vycházející z defaultní molekuly. Pro jiný barevný podklad je potřeba přidat modifikátory box-bg--primary a box-bg--color-light na .box-bg. Ukázka je připravena pro všechna nadefinovaná odsazení.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Ukázka na celou šířku

Molekula vycházející z defaultní molekuly. Pro správné zobrazení je potřeba přidat modifikátor box-bg--full na .box-bg a dovnitř vložit .row-main, který se stará o vycentrování obsahu.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Barevné varianty

Molekula vycházející z defaultní molekuly. Pro jiný barevný podklad dle barev fakult je potřeba přidat modifikátor box-bg--* (zkratka fakulty) a případně box-bg--color-light (pro změnu barvy) na .box-bg.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.