Sickbrah 🤙

Sickbrah is a living, ever changing and never final styleguide and pattern library for eola.co. It may or may not be up to date.

We have a Storybook for showcasing our React components.

Colophon

eola was and still is discussed, designed and built on Apple MacBooks by Jaime Caballero and Dan Steele.

We use Slack, Sketch, Zeplin, Heroku, GitHub, Cloudflare and Cloudinary.

Credits

Pattern library:

Colours

Brand

$pink
#ec165a
$navy
#3e4ea0
$blue
#22a9e1
$orange
#f4873d

Text and backgrounds

$color-text
#666
$color-headings
#484848
$color-border
#e4e4e4
$color-bg
#fbfbfb
$color-bg-alt
#fdfdfd
$color-shadow
#8d979e
$light-grey
#dbdbdb
$white
#fff

States

$red
#e05d39
$green
#87c062

Calendar event states

under
#eb562e
over
#C00000
default
#22a9e1
medium
#2b8acb
good
#356cb5
high
#3e4ea0
full
#5fad35
unbooked
#dbdbdb
disabled
CSS gradient
limited
CSS gradient

Gradients

$gradient-winter
linear-gradient(135deg, #7584d2, $navy)
$gradient-summer
linear-gradient(135deg, $orange, $pink)
$gradient-brand
linear-gradient(90deg, $orange 1%, $pink 30%, $navy 63%, $blue 98%)
$gradient-brand-alt
linear-gradient(90deg, #ff882a 1%, #ff417f 30%, #4e59ff 62%, #00b3f9 98%)

Typography

Golden rules

  1. Headings on Poppins 600 (700 if the type is big).
  2. Body content on Chivo 400 (300 if there's enough contrast).
  3. Tags on Poppins 400/300, all caps and with some letter-spacing.
  4. Avoid caps and italics if possible. Use alternate weights as an accent.
  5. In case of doubt, left align. Never justified.

Typefaces

We use 2 typefaces, one mainly for headings and the other for content.

Poppins by Indian Type Foundry

Chivo by Omnibus-Type

Styles

Poppins 700

Poppins 600

Poppins 400

Poppins 300

Chivo 700

Chivo 400

Chivo 400 italic

Chivo 300

Headings

Use the classes only when you want these styles. You may use straight up h1 to h6 elements anywhere for semantic reasons.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5



Buttons

Classes may be combined to achieve multiple results. Custom buttons support inline CSS for color or background.

Default

Just a div
SPAN Link

Large — .c-button--large

Just a div
SPAN Link

Small — .c-button--small

Just a div
SPAN Link

Full width — .c-button--full

Just a div
SPAN Link

Outline

Just a div
SPAN Link

Alternative

Default alt
Pink alt
Orange alt
Blue alt
Custom alt

Colours/styles

Default
Navy
Pink
Orange
Blue
Red
Green
Custom
Text
Fancy
Summer
Fancy summer
Disabled

Spinner

Processing
Processing
Processing

Icons in buttons

Use the .c-button--iconed modifier and put the text in a span with .c-button__text wrapper. Icon colour won't change with the button style. If you want the text to hide on certain scenarios, use .is-hidden-until or .is-hidden-from You can put the icon before or after the text.

Recommended button styles are outline and alternative.

Just a div
SPAN Link

You may also use the button without a label at all, although only if the former doesn't fit.

Filter

Filter should always contain the All option, and it should be the default state. Only use filter if the default view is All. The customer should then filter down. If the default view is an active state (e.g. live) but the other types are on the same hierarchy level (e.g. archived) then use tabs.

Filter is being used on the Blog and Academy to filter the posts, and is a great suit for data pages where you might wanna get more granular data.

All
Category A
Category B

Form elements

Form elements represent a baseline only, to achieve best results please use the slightly more complete components like Field.

Input




Select

Icon input

Textarea

Rich textarea

Enhanced inputs


Checkbox

Mind the .c-tickbox wrapper, and please remember to always place the label straight after the input

If the label has to "contain" links, please use this pattern.
with the terms & conditions and the privacy policy

Radios

Toggles



Button toggle

Enthusiast
Instructor

Single toggle


You can use single toggles to show/hide stuff with the optional container .c-singletoggle__content.
hi there 👋

Time slot

Wed, 28th Feb
21:00 - 23:00
Thu, 1st Mar
06:00 - 08:00
Thu, 1st Mar
21:00 - 23:00
Add

Tick modules

Tick modules stacked

Navigation

Tabs

The internal link slug must match the ID of the tabs-pane element.

Superheros

Spiderman, Batman, or Iron Man... which one is your favorite?

Ice Cream

Chocolate, vanilla or strawberry?

Seasons

Winter, summer, spring or fall?

Steps

Details
Schedule
Pricing
Options

Vertical steps

Invited everyone for BSUPA Introductory lesson for families
Daniel Steele cancelled your booking. Mad lad.
Wave cane at him
in 1 month - Tuesday 24th August
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vitae error in? Incidunt ea blanditiis, soluta unde eum cumque molestias, sapiente et quisquam excepturi tempore aperiam assumenda aliquam ex facilis?
Liked that? Check out similar activities in the marketplace:
Browse activities

Messages

This is straight up content. No paragraph around it.

Now this is on a paragraph.

This is a paragraph. We can list stuff too, like errors:

  • Message 1
  • Message 2
  • Message 3

States

Hooray! Something good happened.
Oops! Something's not quite right.
Eh! There's something you should know.
Woah! You have a status that makes you stand out.

With icons

Something is somewhat pending
Something is bad, but not an error
Something is good, but not success

Important notices

Get back to verified!

Seems like we might need more details from you. Update them now to get your verified badge back!

We are verifying your details

The verification process takes about 2-3 business days. If successful, you will get your verified badge straight away!

You need to do a thing

Doing things will help you a lot. Trust me, I'm a robot.

Ugh fine

You are completing things

Doing things will help you a lot. Trust me, I'm a robot.

Get verified status

Customer trust increases for verified businesses. Make yours stand out by verifying it now completing 3 simple steps.

You are verified!

Customer trust increases for verified businesses. Keep these details up to date to maintain your verified status.

Field

.c-field is formed by multiple elements:

  • .c-field__label Constitutes the label of the field
  • .c-field__hint (optional) Adds hint text for field
  • .c-field__content This consistitutes the field itself. It may be combined with other classes depending on the type of field.
  • .c-field__error (optional) Presents the error text in red

Default

Hint state

Error state

Dark scope

Rich text

Static data

Email
thisisaverylongemailthaticameupwith@eola.co
Bank account
Partially hidden for security reasons
·······789
Address
10 Greenwood House
Green Lanes
Haringey N4 1AJ
London (United Kingdom)

Form wrappers

Combine multiple elements in new ways.

Subscribe

Join the community
Subscribe

Form grid

Formsection

title

Content goes here


title
This intro should appear in the content

Content goes here


title
This intro should appear in the header

Content goes here


title
subtitle

Content goes here


title
subtitle

When a formsection has an action parameter (which must be an URL), you must also pass action state modifier.

title
subtitle

title
subtitle
Child price
£20

title
subtitle

Content goes here


title
subtitle

Content goes here

Tables

Tables

Tables have rows, and rows have cells, and sometimes an icon. Rows can be of 3 types:

  • .c-table__row--header The top level and first row, show be a series of labels for each column
  • .c-table__row--parent Done for grouping regular rows
  • .c-table__row The default and most common
Property A
Property B
Property C
Parent name
Parent value
Parent value
Normal cell A
Normal cell B
Normal cell C

Each row is formed by cells. Different modifiers are available. Modifiers must be used in the matching header cell.

  • .c-table__cell--title is a standard solution for name of item. Adds trailing dots after a certain width.
  • .c-table__cell--number is for somewhat small unitless numbers, like counts. Will center align.
  • .c-table__cell--amount is for large numbers where the user may want to see a progression. Will right align.
Title
No modifier
Number
Amount
Name of a thing
Joanna Doe
71
£3,616.65
Name of a thing
Joanna Doe
21
£9,959.63
Name of a thing
Joanna Doe
72
£8,971.86

Rows may combine into groups and parents may be set to them

Title
Number
Amount
Name of a thing
13
£418.43
Some part of that thing
21
£1,544.78
Other part of that thing
17
£314.80
The last bit of that thing
25
£2,509.53

Cells can be unique to mobile, tablet and desktop with the unique identifiers. Tablet applies to desktop too.

Title
Transactions
Bookings
Vouchers
Refunds
Total
Fee
Amount
Name of a thing
94
56
23
1
£2,100.38
£84.02
£2,016.36
Name of a thing
67
52
1
3
£3,421.10
£136.84
£3,284.26
Name of a thing
7
53
22
6
£3,488.97
£139.56
£3,349.41
Name
Link
Name of ting
Name of ting
Name of ting

Breakdown

To break down pricing structures or calculations into bits.

Price per person
£60
People going
3
Children going
Yes
Total
£180

Cards

Cards are one of the main branded components. By default, cards don't have a fixed height and take the full width of the container. You'll have to use .l-cards to give these cards width constrains.

  • If the .c-card component is a link, it will have a hover/focus event.
  • All elements are optional, but removing them may cause unexpected alignment.
  • .c-card__frame will vary in height depending of the card type.
  • The cards layout will make each card the same height, but remember the content alignment still has to take place here.

Default card

Rarely used by itself, but used by all cards as a baseline.

.c-card__pin

.c-card__title

.c-card__subtitle
Lorem ipsum this is .c-card__text
.c-button.c-button--alt

Fancy card

Fancy cards are the variant used when you want a poster-like appereance, with just the title of the element and a CTA, but with room in the middle to see the image.

Some detail

Big poster title

Author or subline
I'm floating!

Blog card

Extends fancy card and applies different height constrains. Also adds a gradient overlay between the image and the text. Useful for user-generated images.

CATEGORY

Post title

by post author
CTA here!

Profile card

Content-full cards use the profile pattern. These have the image as an addition and focus on the content.

Default profile card

Micro bit here
Piece title
Lorem ipsum blah blah blah
CTA

Profile card with frame

Micro bit here
Piece title
Lorem ipsum blah blah blah
CTA

Profile card with frame and no micro

Piece title
Lorem ipsum blah blah blah
CTA

Image in profile card

Micro bit here
Piece title
Lorem ipsum blah blah blah
CTA

Image in profile & landscape card

Micro bit here
Piece title
Tuesday 26th August
10:00 - 13:00
Meeting point
Lower Promenade, Saltburn-by-the-Sea TS12 1HQ
Can't find us?
079876543
Be there early
The instructors need you to arrive 40 minutes early.

Lorem ipsum blah blah blah

Primary
Secondary

Activity card

Surf
Activity name
Property 1:
Value
Property 2:
Value
CTA

Activity card with timeslots

Surf
Activity name
Property 1:
Value
Property 2:
Value
Timeslot title
Timteslot subtitle
Timeslot title
Timteslot subtitle
Timeslot title
Timteslot subtitle

Activity card quick view

Surf
Activity name
Property 1:
Value
Property 2:
Value
Timeslot title
Timteslot subtitle

Activity card with form

Surf
Activity name
Adults @ £60

Landing

We only get paid
when you do

No monthly fees. We understand your business and want to adapt to you.
Get started for free
Image content goes here

Compare us to other booking systems

We know picking a booking system to rely on is hard work. That’s why we’ve wanted to do the ground work for you, so you can focus on running your business.

Get started for free

Create activities tailored to your needs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum velit quis ullamcorper dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Create activities tailored to your needs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum velit quis ullamcorper dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.




Super Duper Surf School

⭐⭐⭐⭐⭐

I’m a one-man company so sometimes I get very low seasons. eola’s flexible pricing model allowed me to forget about pricing as it’s free to have!

Maria McAlliston


Perranporth Surf School

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum velit quis ullamcorper dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Super Duper Surf School

I’m a one-man company so sometimes I get very low seasons. eola’s flexible pricing model allowed me to forget about pricing as it’s free to have!

eola vs trekksoft

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum velit quis ullamcorper dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Pros

  • Lorem ipsum
  • Dolor sit amet
  • Lorem ipsum

Cons

  • Lorem ipsum
  • Dolor sit amet
  • Lorem ipsum


eola Trekksoft bookingbug Rezdy booking hound
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Unlimited instructors
Loading speed on 3G mobile 3.2 seconds 13.2 seconds 23.2 seconds 33.2 seconds 43.2 seconds
Conversion rate on widget 40% 50% 60% 70% 80%
User experience Terrible Bad Average Good Excellent
Compare
Compare
Compare
Compare