Stijlgids Conneqt

Versie 1.0

Typografie

Fonts

Headings

Ubuntu Bold

Body text

Poppins Regular

Globale headings H1 tot H6

H1

Een exact overzicht
van alle aanvragen,
offertes en projecten

H2

Een exact overzicht
van alle aanvragen,
offertes en projecten

H3

Een exact overzicht
van alle aanvragen,
offertes en projecten

H4

Een exact overzicht
van alle aanvragen,
offertes en projecten

H5
Een exact overzicht
van alle aanvragen,
offertes en projecten
H6
Een exact overzicht
van alle aanvragen,
offertes en projecten

Overschrijfbare heading groottes

.heading-xlarge

Een exact overzicht
van alle aanvragen,
offertes en projecten

.heading-large

Een exact overzicht
van alle aanvragen,
offertes en projecten

.heading-medium

Een exact overzicht
van alle aanvragen,
offertes en projecten

.heading-small

Een exact overzicht
van alle aanvragen,
offertes en projecten

.heading-xsmall

Een exact overzicht
van alle aanvragen,
offertes en projecten

Overige html tags

Paragraph

Construqt is dé softwaretool om het hele proces vanaf de aanvraag, de offerte, tot en met het project zelf en eventuele serviceklussen gestructureerd te laten verlopen. Hierbij zorgt Construqt ervoor dat er niets vergeten wordt, en dat er ten allen tijde een exact overzicht is van de status van alle aanvragen, offertes en projecten.

Links
Text Link
Block quote
Block Quote

Tekst groottes

.text-xlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-large
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-small
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Tekst diktes

.text-weight-bold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-semibold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-normal
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-light
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-xlight
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Tekst stijlen

.text-style-link
Text Link
.text-style-italic
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-strikethrough
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-allcaps
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-muted
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style-subheading
Subheading
.text-style-quote
Dit is een quote
.text-style-nowrap
Deze text krijgt geen wrap
.text-style-2lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

.text-style-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

Tekst kleuren

.text-color-white
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color-secondary
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Tekst positie

.text-align-left
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-center
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-right
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Rich text styling

Deze elementen worden afzonderlijk opgemaakt wanneer ze onder de .text-rich-text class worden genest.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Dit is een block quote

Een rich text-element kan worden gebruikt met statische of dynamische inhoud. Voor statische inhoud plaats je deze op een willekeurige pagina en begin je met bewerken. Voor dynamische inhoud voeg je een RTF-veld toe aan een collection list en koppel je vervolgens een RTF-element aan dat veld in de collection settings.

This is a link inside of a rich text element

  • List item 1
  • List item 2
  • List item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
caption kan je hieronder plaatsen

Kleurenpalet

Primary / Secondary

Deze kleuren kunnen worden gewijzigd via de "Swatches" panel.

Primary Dark - #3131F30
Steel Grey - #8A9AA4
Primary Medium Grey - #CCD7DA
Primary Light Grey - #EEF5F9
Primary White - #FFFFFF
Conneqt Blue - #7DF9FF

UI elementen

Buttons

Normal buttons
.button.button-secondary
Inverted buttons
.button.invert-colors.button-secondary.invert-colors

Form elementen

Bedankt! We nemen spoedig contact op!
Oops! Something went wrong while submitting the form.

Icons

Icon groottes

.icon-xlarge
Praatwolk icoon
.icon-large
Praatwolk icoon
.icon-medium
Praatwolk icoon
.icon-small
Praatwolk icoon
.icon-xsmall
Praatwolk icoon
.icon-1x1-xlarge
Praatwolk icoon
.icon-1x1-large
Praatwolk icoon
.icon-1x1-medium
Praatwolk icoon
.icon-1x1-small
Praatwolk icoon
.icon-1x1-xsmall
Praatwolk icoon

Social media icons

Kopieer deze embedded .svg icons

Facebook
Twitter
Instagram
LinkedIn
Youtube

Width classes

Containers

.container-large
.container-medium
.container-small

Max widths

max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge

Spacing classes

Margin

.margin-0
.margin-tiny
.margin-xxsmall
.margin-xsmall
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-xxhuge

Padding

.padding-0
.padding-tiny
.padding-xxsmall
.padding-xsmall
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
.padding-xhuge
.padding-xxhuge