Titel for a tripple promo goes here Titel for a tripple promo goes here
Category
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Icons
Pagination
Article Card
Titel for a tripple promo goes here Titel for a tripple promo goes here
Category
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Titel for a tripple promo goes here Titel for a tripple promo goes here
Category
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Titel for a tripple promo goes here Titel for a tripple promo goes here
Category
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Product Card
Styleguide
H1. The quick brown fox jumps over the lazy dog
H2. We strive to create great products in a kind and sustainable way
H3. We strive to create great products in a kind and sustainable way
H4. We strive to create great products in a kind and sustainable way
H5. We strive to create great products in a kind and sustainable way
H6. We strive to create great products in a kind and sustainable way
Preamble
Will set the sceen cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
Paragraph
In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis. Rivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis.
In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis. Rivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis.
Small
In hac habitasse platea disctumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis. Rivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euismod. Fusce rhoncus porttitor velit, eu bibendum nibh aliquet vel. Fusce lorem leo, vehicula at nibh quis, facilisis accumsan turpis.blockquote
” In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integeret elit egetelit facilisis tristique. Nam vel iaculis mauris”.
Spaces
--spacing-x-small: 0.25rem; //4
--spacing-small: 0.5rem; //8
--spacing-medium: 1rem; //16
--spacing-large: 1.5rem; //24
--spacing-x-large: 2rem; //32
--spacing-xx-large: 2.5rem; //40
--spacing-xxx-large: 3.5rem; //56
Spacer --spacing-x-small (4px)
Spacer --spacing-small (8px)
Spacer --spacing-medium (16px)
Spacer --spacing-large (24px)
Spacer --spacing-x-large (32px)
Spacer --spacing-x-large (40px)
Spacer --spacing-x-large (56px)
Buttons
Buttons primary secondary
eg. button--primary
Buttons small large
eg. button--small
Links
Icons
Icon links
Icon buttons
Aspect Ratio
You can use the ratio--classes to give an element a certain aspect ratio. Add more classes using the $ratios map in config.scss
Section
This is a section. It's an element that is 100vw while its contents is var(--site-width)
Sections are useful for parts of the page that need a background color or image.
A section should only be used directly inside <main>. You should never nest sections or containers.
Container
A container is similar to a section except for two things:
- It doesn't span the entire width of the site
- It uses margin instead of padding
Containers are usefull for parts of the page that should be transparent.
Section
This is a section. It's an element that is 100vw while its contents is var(--site-width)
Sections are useful for parts of the page that need a background color or image.
A section should only be used directly inside <main>. You should never nest sections or containers.
Container Small
A container is similar to a section except for two things:
- It doesn't span the entire width of the site
- It uses margin instead of padding
Containers are usefull for parts of the page that should be transparent.
Container Small Spacing Small (.spacing--small)
A container is similar to a section except for two things:
- It doesn't span the entire width of the site
- It uses margin instead of padding
Containers are usefull for parts of the page that should be transparent.
Container Small Spacing Small (.spacing--small)
A container is similar to a section except for two things:
- It doesn't span the entire width of the site
- It uses margin instead of padding
Containers are usefull for parts of the page that should be transparent.
Grid
Grids can easily be created using the grid class. To specify the number of columns you append --${num} to the class, like grid grid--2.
You can also combine the grid classes with the breakpoint classes to have a different number of columns in different resolutions, like this: grid tablet:grid--2 laptop:grid--3 widescreen:grid--6.
First grid item
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Second grid item
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Third grid item
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
First grid item
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Second grid item
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Third grid item
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Forms
There's some basic form styling in place for inputs, textareas and select elements.
There's also optional styling of HubSpot forms as well as Contact Form 7 forms available.
Result - 10 hits
Ingefær
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.headline-text can be removed if not needed
Result - 10 hits
Ingefær
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.