Styleguide

This page contains the global classes of the starter installation with some pre defined styles for buttons, sections, containers, and some helpful classes. Nothing we don’t need.

Default Button

.btn is the default class that should get added to every button. it has the border-width, padding, font-size, etc. then you can top it with a second class to modify the colors. the button-radius is set in the style.css of the child theme var(–button-radius).

.btn .btn.btn-secondary

Typography

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

This is an h1 but it looks like a normal paragraph. Use the .is-p class to give a heading the normal paragraph text appearance.

h1 or .is-h1 ipsum dolor sit amet consectetur adipiscing

h2 or .is-h2 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet

h3 or .is-h3 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet

h4 or .is-h4 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fermentum diam nisl sit amet

h5 or .is-h5 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fermentum diam nisl sit amet

h6 or .is-h6 ipsum dolor sit amet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fet consectetur adipiscing non fermentum diam nisl sit amet ipsum dolor sit adipiscing non fermentum diam nisl sit amet

Text SM (–tex-sm) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text S / Body Text (–text-body) or (–text-s). Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text XS (–text-xs) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text 2XS (–text-2xs) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Form

Unable to read published form data

Sections (for vertical spacing)

.section should be a section element and can have top + bottom padding.

.section-xs

.section-s

.section-m

.section-ml

.section-l

.section-xl

.section-breakout

This section will break out any constraints. Please use with caution.

Containers (to constrain content)

.container should not have padding to space out the sections.

.container (Default)

.container-l

.container-m

.container-s

.container-xs