Styleguide

Colors

–

Primary color

#23ce9b

–

Secondary color

#2874fc

–

Tertiary color

#000316

–

Text color

#17183a

–

Light color

#ffffff

–

Border color

#eeeeee

–

Background color

#ffffff

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Huge Font Size

Large Font Size

Medium Font Size

Normal Font SIze

Small Font Size

Aa

Nunito Font

Paragraphs, Quotes

Lorem ipsum dolor sit amet consectetur adipisicing elit. At hic esse vitae similique iste distinctio neque, quod accusamus, beatae, tempora assumenda excepturi nulla et fuga sed earum incidunt unde corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. At hic esse vitae similique iste distinctio neque, quod accusamus, beatae, tempora assumenda excepturi nulla et fuga sed earum incidunt unde corrupti.

Lorem ipsum dolor sit amet consectetur adipisicing elit. At hic esse vitae similique iste distinctio neque, quod accusamus, beatae, tempora assumenda excepturi nulla et fuga sed earum incidunt unde corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. At hic esse vitae similique iste distinctio neque, quod accusamus, beatae, tempora assumenda excepturi nulla et fuga sed earum incidunt unde corrupti.
Konipas Template

Buttons

Solid buttons rounded

Primary Solid Button

Secondary Solid Button

Thertiary Solid Button

Text Solid Button

Border Solid Button

Background Solid Button

Outline buttons rounded

Primary Outline Button

Secondary Solid Button

Thertiary Outline Button

Text Outline Button

Border Outline Button

Background Solid Button

Solid buttons

Primary Solid Button

Secondary Solid Button

Thertiary Solid Button

Text Solid Button

Border Solid Button

Background Solid Button

Outline buttons

Primary Outline Button

Secondary Solid Button

Thertiary Outline Button

Text Outline Button

Border Outline Button

Background Solid Button

Tables

Stripes table

This can be heading	This can be heading	This can be heading	This can be heading
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content

Default table

This can be heading	This can be heading	This can be heading	This can be heading
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content
Here comes the content	Here comes the content	Here comes the content	Here comes the content

List styles

Regular List

<ul class="list-disc"></ul>

List Item
List Item
- List item nested
List item
- List Item nested
  - List item nested even more

Square Unordered List

<ul class="list-square"></ul>

List Item
List Item
- List item nested
List item
- List Item nested
  - List item nested even more

Lower Alpha Unordered List

<ul class="list-lower-alpha"></ul>

List Item
List Item
- List item nested
List item
- List Item nested
  - List item nested even more

Circle Unordered List

<ul class="list-circle"></ul>

List Item
List Item
- List item nested
List item
- List Item nested
  - List item nested even more

Decimal Leading Zero List

<ul class="list-decimal-leading-zero"></ul>

List Item
List Item
- List item nested
List item
- List Item nested
  - List item nested even more

Upper Roman Unordered List

<ul class="list-upper-roman"></ul>

List Item
List Item
- List item nested
List item
- List Item nested
  - List item nested even more

Columns

Half Column 1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

Half Column 1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium.

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium.

One half 2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

One half 2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium.

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium.

One third 1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

One third 1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

One third1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet,

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet,

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet,

One fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet,

One third 1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros.

Two third 2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Two third 2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros. Nulla tincidunt vitae dui aliquam pretium. Suspendisse sit amet libero a nisl tempor ultrices. Integer quis nisi est Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One third 1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis a est suscipit malesuada. Cras dapibus nulla sed justo convallis, a dignissim nunc tincidunt. Nunc sit amet dictum eros.