WT Styleguide — V2

Style Guide - Components

TypographyColoursComponents

Basic design system for site-wide styling. This is where creativity begins. Clone it and own it.

Icons

icon
shout
icon
is--medium
shout

Buttons

button
Button Text
button
is--secondary
Button Text
button
is--outline
Button Text
button
is--inversed-outline
Button Text

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Spacers

spacer
is--xxl
spacer
is--xl
spacer
is--l
spacer
is--m
spacer
is--s
spacer
is--xs

Images

Image

Navigation

Navigation
Footer
Information
WebTricksProjectsBlogCVStyleguide
Contact me
Send me a Message
© 2024 The Code Raccoons. All rights reserved.
Privacy Policy

Cards

Image
Tag name
dd/mm/yyy
Blog title goes here...
function-card
title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Webflow Only
Docs Coming Soon
portfolio-card

Heading

card text
card text
card text
card text
card text
card text
card text
card text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Project Card

Tagline

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button
Button

Hero ?

Tagline

Short heading here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Hero ?

This is some text inside of a div block.
Attribute to add
Name
This is some text inside of a div block.
Value
This is some text inside of a div block.
Instructions

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Where?
This is some text inside of a div block.
How does it look?

FAQs

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Contact
Question text goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.