Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Seven Bytes Design Set

In dieser Übersicht werden alle designrelevanten Elemente
der Website gesammelt.

Spacing

Padding (to all sides)

.c-padding-xs

5px

.c-padding-s

10px

.c-padding-m

20px

.c-padding-l

35px

.c-padding-xl

75px

.c-padding-xxl

120px

Margin bottom

.c-margin-bottom-xs

5px

.c-margin-bottom-s

15px

.c-margin-bottom-m

25px

.c-margin-bottom-l

50px

.c-margin-bottom-xl

75px

Margin right

.c-margin-right-xs

5px

.c-margin-right-s

15px

.c-margin-right-m

25px

.c-margin-right-l

50px

.c-margin-right-xl

75px

Typography

Heading

Text Font

Proxima Nova

Font Size

16px - 58px

Font Weight

600 - 700

.c-h1-fat

58px, weight 700

.c-h1

42px, weight 600

.c-h2

36px, weight 600

.c-h3

30px, weight 600

.c-h4

20px, weight 600

.c-h5

18px, weight 600

.c-h6

16px, weight 600

Pre & Sub Headings

.sev-Preheadline

16px, weight 600

.sev-subheadline

20px, weight 500

Heading Color

.c-heading-light

.c-heading-dark

.c-heading-accent

Text

Text Font

Proxima Nova

Font Size

16px

Font Weight

300

Color

.c-text-light

.c-text-dark

.c-text-accent

Text Taglines

.c-text-s

13px

.c-text-m

16px

.c-text-l

18px

.c-text-xl

21px

Text Taglines

.c-tagline

.c-text-m

Box Shadow and Border Radius

.sev-box-shadow

.sev-box-shadow-light

.sev-rounded-corners

.sev-circle

https://brumm.af/shadows

Buttons & CTA

.sev-btn-primary

.sev-btn-secondary

.sev-btn-ghost

.sev-underline-cta underline

.service-box-footer

Div-Container .sev-scrollerbox
Div-Container .sev-scroller

Backgrounds

.sev-background

.sev-bg-light

.sev-bg-light-alt

.c-bg-dark

.c-bg-dark-alt

.c-bg-accent

.c-bg-accent-alt

.c-bg-gradient

https://www.svgbackgrounds.com/

Columns

Columns Desktop

.c-columns-6 + .c-columns-gap-m

.c-columns-5 + .c-columns-gap-m

.c-columns-4 + .c-columns-gap-m

.c-columns-3 + .c-columns-gap-m

.c-columns-2 + .c-columns-gap-m

Images

.sev-image-300

.sev-background

.sev-image-600

.sev-background

.sev-image-900

.sev-background

Images with colorful shadow

.sev-box-shadow-color

Div background-image für die States normal und after geben
Beliebige Größe wählen

Lorem ipsum dolor sit amet

Seven Bytes Design Set

Spacing

Padding (to all sides)

Margin bottom

Margin right

Typography

Heading

Pre & Sub Headings

Heading Color

Text

Color

Text Taglines

Text Taglines

Box Shadow and Border Radius

Buttons & CTA

Backgrounds

Columns

Columns Desktop

.c-columns-6 + .c-columns-gap-m

.c-columns-5 + .c-columns-gap-m

.c-columns-4 + .c-columns-gap-m

.c-columns-3 + .c-columns-gap-m

.c-columns-2 + .c-columns-gap-m

Images

Images with colorful shadow

Blog