Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Utilities
Styleguide

Styleguide

Based on Squid Style Guide

Typography

Font-family: Open Sans, sans-serif

Google Fonts Open Sans

Weights

AaThin 100

AaLight 300

AaRegular 400

AaMedium 500

AaBold 700

AaBlack 900

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 - = + < > ? / . , : “

Sizes

H1 24px Bold

H2 22px Bold

H3 20px Bold

H4 18px Bold

H5 16px Bold
H6 14px Bold

Text 14px Regular

Text Small 12px (85%) Regular

Text Big 16px (115%) Regular

Icons

Font-awesome v6.0.0

See All Icons

Colors

Spacing

0.25rem - 3.5px default

0.5rem - 7px default

1rem - 14px default

1.5rem - 21px default

2rem - 28px default

2.5rem - 35px default

3rem - 42px default

Sizes

Breakpoints

Extra Small< 576px
Small - SM>= 576px ~ 767px
Medium - MD>= 768px ~ 991px
Large - LG>= 992px ~ 1199px
X-Large - XL>= 1200px ~ 1399px
XX-Large - XXL>= 1400px

Container Fluid

Padding: 1rem - 14px Default

Size100% in all breakepoints

Container Sizes

Padding: 1rem - 14px Default

Extra Small100%
Small - SM540px
Medium - MD720px
Large - LG960px
X-Large - XL1140px
XX-Large - XXL1320px

Grid

24 columns

Padding Between: 0.5rem - 7px Default

Use all Breakpoints

Custom Scrollbar

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum facilisis dui sed hendrerit. Aliquam non massa vel orci finibus euismod. Phasellus consequat, tortor et consequat mattis, sem est tempus dui, nec rhoncus eros libero vel odio. Cras finibus aliquet urna, a dignissim lectus posuere id. Phasellus aliquet nisl ipsum, quis vestibulum felis egestas in. Maecenas nibh sapien, egestas et fermentum id, maximus vehicula justo. Praesent quis arcu non urna mollis tincidunt. Pellentesque pharetra mollis lorem. Nam congue tellus at vehicula venenatis. Morbi hendrerit at magna eget laoreet. Mauris rutrum tortor turpis. Cras varius justo et velit hendrerit bibendum. Ut ac tristique diam. Proin et malesuada est, nec efficitur felis. Vestibulum tempor euismod congue. Phasellus at tincidunt felis, ac tincidunt nisi. In quis fermentum lorem. Nam vitae felis tincidunt, vehicula tellus id, malesuada lectus. Donec congue condimentum lectus ut rhoncus. Ut elementum feugiat arcu, non vestibulum ipsum rutrum ut. Maecenas egestas nibh est, quis tempor ligula porttitor maximus. Suspendisse viverra justo hendrerit ipsum congue, vel molestie nunc pharetra. Proin sapien lorem, molestie vitae quam non, commodo vulputate erat. Fusce molestie felis at tellus ultrices condimentum. Sed eleifend, ligula at egestas pellentesque, elit felis molestie leo, quis imperdiet libero sapien sit amet tellus. Sed sagittis ex odio, quis ultricies orci consectetur a. Suspendisse placerat tempus malesuada. Nulla ultrices aliquet justo, vitae eleifend lectus placerat id. Nulla elementum non risus ut gravida. Fusce quis rhoncus ipsum, at hendrerit felis. Aenean congue, dolor sed sollicitudin hendrerit, sem diam semper purus, et porttitor eros mi quis dui. Vestibulum dictum accumsan urna, et gravida est pulvinar dapibus. Suspendisse laoreet sapien massa, sed efficitur leo bibendum id. Duis id est ac ex pharetra viverra. Nulla facilisi. Integer mauris sapien, fermentum quis mauris quis, aliquet egestas mauris. Sed ac urna lectus.

Buttons

Inputs

Default
R$
,00
R$
Readonly
Disabled
Validation
Error
Valid

Textarea

Default
@R$
Readonly
Disabled
Validation
Error

Select

Default
@
Disabled
Validation
Error

Selectors

Checkbox
Radio
Toggle

Range

Default
Disabled

Tag

Support all colors - like buttons

Default
I'm a tag

I'm a tag

I'm a tag
Readonly
I'm a tag

I'm a tag
Disabled
I'm a tag

I'm a tag

Badges

Support all colors - like buttons

Default

10
100
100
Over Element

10
100
100

Progress Bar

Support all colors - like buttons

Example

Loader

Support all colors - like buttons

Default
Loading...
Loading...
Loading...
Bar

Toast

JS Required

Support all colors - like buttons

Layout
Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world
Exemple

Tooltip

JS Required

Dark/Default
Hello World!

Mouse Over Here
Light
Hello World!

Click Here

Box

Example
Text Here
Text Here 2

Alert

Support all colors - like buttons

Example
I`m a good Alert!
I`m a warning Alert!
I`m a bad Alert!
I`m a info Alert!
I`m a Alert!
I`m a Alert!

Card

Support all colors - like buttons

Example
Title

Some text

Title

Some text

Title

Some text

Title

Some text

Dropdown

JS Required

Layout
Example

Accordion

JS Required

Example

Title 1

Content 1

Title 2

Content 2

Title 3

Content 3
Open more than one

Title 1

Content 1

Title 2

Content 2

Title 3

Content 3

Modal

JS Required

Layout
Example

Tabs

JS Required

Line Style Support all colors - like buttons

Default
  • Home
  • Profile
  • Messages
  • Settings
Content 1
Content 2
Content 3
Content 4
Line Style
  • Home
  • Profile
  • Messages
  • Settings
Content 1
Content 2
Content 3
Content 4

Breadcrumb

Example

Pagination

Support all colors - like buttons

Example

Steps

Support all colors - like buttons

Example

Table

Table Head Line Support all colors - like buttons

Example - Mobile Overflow
We found 3 out of 3 campaignsWe found 3 out of 3 campaigns
CampaignSocial NetworkCustomerResponsableStatusActions

Campaign 128/01/2021 - 29/10/2021

Customer 1

Responsable 1

Status 1

Campaign 228/01/2021 - 29/10/2021

Customer 2

Responsable 2

Status 2

Campaign 328/01/2021 - 29/10/2021

Customer 3

Responsable 3

Status 3

Some text to footer
Example - Mobile Column as Row
We found 3 out of 3 campaignsWe found 3 out of 3 campaigns
CampaignSocial NetworkCustomerResponsableStatusActions

Campaign 128/01/2021 - 29/10/2021

Customer 1

Responsable 1

Status 1

Campaign 228/01/2021 - 29/10/2021

Customer 2

Responsable 2

Status 2

Campaign 328/01/2021 - 29/10/2021

Customer 3

Responsable 3

Status 3

Some text to footer