Color Palette

  • black#000000
  • white#FFFFFF
  • font#1A1A18
  • background#333333
  • signal#D0021B
  • karstens-main--dark#5C5F64
  • karstens-main#878A8E
  • karstens-grey--light#D8D8D8
  • karstens-grey--lighter#EEEEEE
  • heinrich-main--dark#00533D
  • heinrich-main#00805F
  • gebrueder-main--dark#B65202
  • gebrueder-main#E56600
  • garten-main--dark#8E8B00
  • garten-main#C9C600
  • matthiesen-main--dark#26551E
  • matthiesen-main#3A9D40

SVG Symbols

  • symbol-arrow-down
  • symbol-arrow-left
  • symbol-arrow-right
  • symbol-icon-about-us
  • symbol-arrow-up
  • symbol-icon-attachment
  • symbol-icon-building-construction
  • symbol-icon-channel-worker
  • symbol-icon-civil-engineering
  • symbol-icon-close
  • symbol-icon-construction-management
  • symbol-icon-current
  • symbol-icon-delete
  • symbol-icon-draftsman
  • symbol-icon-environmental-engineering
  • symbol-icon-facts-and-figures
  • symbol-icon-hamburger
  • symbol-icon-infrastructure
  • symbol-icon-investments
  • symbol-icon-k
  • symbol-icon-landscaping
  • symbol-icon-managing-directors
  • symbol-icon-map
  • symbol-icon-mason
  • symbol-icon-oepp
  • symbol-icon-office-management
  • symbol-icon-office
  • symbol-icon-partnering
  • symbol-icon-pdf
  • symbol-icon-philosophy
  • symbol-icon-photo
  • symbol-icon-play
  • symbol-icon-project-development
  • symbol-icon-road-builders
  • symbol-icon-sfb
  • symbol-icon-shell
  • symbol-icon-steel-and-concrete-workers
  • symbol-icon-timeline
  • symbol-icon-video
  • symbol-iconfine-abwechslungsreiche-projekte
  • symbol-iconfine-arbeitsbedingungen
  • symbol-iconfine-arbeitskleidung
  • symbol-iconfine-arbeitsweise
  • symbol-iconfine-bagger
  • symbol-iconfine-bau-dir-deine-zukunft
  • symbol-iconfine-gesundheitspraevention
  • symbol-iconfine-karriere
  • symbol-iconfine-kieswerk
  • symbol-iconfine-mitarbeiter-und-teamevents
  • symbol-iconfine-moderne-techniken
  • symbol-iconfine-schubkarre
  • symbol-iconfine-zusatzleistungen
  • symbol-link-download
  • symbol-link-extern
  • symbol-link-intern
  • symbol-mail
  • symbol-phone
  • symbol-search
  • symbol-social-facebook
  • symbol-social-instagram

Webfonts

Open Sans (sans-serif)

400 / regularThe quick brown fox jumps over the lazy dog. 400 / italicThe quick brown fox jumps over the lazy dog. 600 / regularThe quick brown fox jumps over the lazy dog. 700 / boldThe quick brown fox jumps over the lazy dog.

Grid

col 1
col 11
col 2
col 10
col 3
col 9
col 4
col 8
col 5
col 7
col 6
col 6
col 7
col 5
col 8
col 4
col 9
col 3
col 10
col 2
col 11
col 1
col 12

Offset Columns

col 3 offset 3
col 3 offset 3

Nested Grid

col 6
nested col 6
nested col 6
col 6
nested col 9
nested col 3

Grids (in use)

Grid-1--12

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Grid-2--8-3

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Grid-2--6-4 (aside)

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Grid-2--4-4-4 (left)

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Grid-2--4-4-4 (center)

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Grid-2--4-4-4 (right)

Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.