Kitchen Sink

To kick start the kitchen sink we have the intro-heading-section. This is it as you are reading it. This is how some pages make an intro.

Section

Then we have the all important section component that has a header and subtext, its used for pretty much every section on the website. Its purpose is announce a piece of content and split all areas apart. Every section has an id so it can be share to with an #href. And section uses container and background colors.

#some content goes here

Buttons

Buttons with different sizes and colors and icons

button that looks like a

sizing applies

Add color attributes and make your own

Borders

Using the border attribute you can give any side, thickness, style and color to any element. Inspect me an play around

Paragraph with border=1px solid grey-1

Div with a green border "1px solid green-1"

Paragraph with a 2px border border="2px solid blue-1"

Border bottom and right only border="right bottom 2px solid blue-2

dashed border border="bottom 2px dashed yellow-1

dashed border border="right top left 3px dashed blue-2

border radius=1
border radius=2

Colours

Any element can use the color attribute. Font color, background color, active color, hover color

I am an H4 with color orange-1

I am a paragraph with color=grey-1 which is the usual color for paragraphs on this website

I am a paragraph with color=blue-1

I am a paragraph with a spans in different colours

I am a green link

I am a div with background=grey-5 which is a common background color on this site

I am a div with background=blue-1 and color=white which is a common color combo on this site

I am a div the same as above but with a background:hover=blue-4 attribute

Sizes

Size attribute makes anything bigger or smaller

For example a p tag can have size, but its size only goes up to size=3
because a p has been design to go up to a maximum of 17px for this website

I am a p with size=1

I am a p with size=2 or no size, this is my default

I am a p with size=3

I am an h3 tag


I am an h3 tag with size=1 to look like an h1 tag


^^^ the reason we do this is for semantic reasons, just because something is big on the page doesn't mean its always the most important thing to search engines. The most important thing should be an h1 tag, but it might not be the biggest, so we size it down with the size attribute, for example:

I am an h1 that looks like an h5, to the search engine I am very important, to the user we might want them to focus on an advert banner instead of this text.

Weights

Make anything thin, regular, bold with the weight attribute

I am a weight=1 paragraph, i am thin and have a font weight of 300

I am a weight=2 paragraph, i am regular and have a font weight of 400

I am a weight=3 paragraph, i am thick and have a font weight of 600

I am a weight=1 h3, i am thin and have a font weight of 300

I am a weight=2 h3, i am regular and have a font weight of 400

I am a weight=3 h3, i am thick and have a font weight of 600

Margins and Padding

Consistent spacing is key. So we have the m- and p- attributes to help out. 1 of either is 4px of spacing. So mt-1 is margin top 4px. mt-2 is margin-top 8px and so on. mt-10 is the highest, 40px.

Lingo:
m-1 = margin: 4px.
mt-1 = margin-top: 4px.
mb-1 = margin-bottom: 4px.
mtb-1 = margin-top and bottom: 4px.
ml-1 = margin-left: 4px.
mr-1 = margin-right: 4px.
mlr-1 = margin-left and right 4px.
* same applies for padding

I am a p tag with p-4 which gives me 16px padding all round

I am a p tag with p-4 and mtb-4 which pushes me away from the above and bottom p

Icons

Our icon set is created by Fontello.com . Fontello takes svgs and converts them into font icons. See the _icons.scss for more icons and info

Icons (_icons.scss for more icons)
with color and size
text and icons
11-19

Radio group toggle

When you have tab like content in a form or filters where radio buttons need to hide and show divs. You can use any radio button component inside of the <radiogroup> tag

Lorem ipsum dolor sit amet consectetur adipiscing elit
I am a div that shows when a radio button with the value of my id is selected
I am a div for the second radio button

Form

Form fields and elements

Radio Buttons
Fields

Accordion

Collapsable sections

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Tabs

Tab panes

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Some content goes here

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Headers

Logged out, in and register states

logged out
@Model.Heading
logged in
@Model.Heading
registering
@Model.Heading
Already have an account? Log in

General cards

This is the usual top down cards using layout=1

Develop new skills
Changing Worklife

Find tips and guidance to help you find a better work life balance, improve your career prospects or start your own business.

Develop new skills
Changing Worklife

Find tips and guidance

Develop new skills
Changing Worklife

Find tips and guidance to help you find a better work life balance, improve your career prospects or start your own business.

Develop new skills

Side by side cards

adding layout=2 and 3 to the cards will give you this side by side card

Changing Worklife

Find tips and guidance to help you find a better work life balance, improve your career prospects or start your own business.

Develop new skills
Changing Worklife

Find tips and guidance to help you find a better work life balance, improve your career prospects or start your own business.

Develop new skills
Changing Worklife

Find tips and guidance to help you find a better work life balance, improve your career prospects or start your own business.

Develop new skills
Changing Worklife

Find tips and guidance to help you find a better work life balance, improve your career prospects or start your own business.

Develop new skills

Action cards

These cards allow likes, downloads, bookmarking and more

SEND
Lesson plan
324 11-19
Big data, Big what?
Includes tool
SEND
Lesson plan
324 11-19
Big data, Big what?
Includes tool
SEND
Lesson plan
324 11-19
Big data, Big what?
Includes tool
Lesson Plan
16 11-19
Growth mindset toolkit
Includes activity
Popular
Advice
28 5-180 mins
What I think the essentials skills for enterprise success are
Anthony Hall By Anthony Hall

Side scroll row

When the screen shrinks this row scrolls sideways

Delivery guide for adults

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor, metus et blandit facilisis, dolor ante facilisis sapien.

Delivery guide for adults

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor, metus et blandit facilisis, dolor ante facilisis sapien.

Popular
Lesson Plan
16 11-19
Managing money and budgeting
Includes video

Seemingly depreicated cards

These are cards from the old lifeskills, they might never need to be used

Exploring personal strengths for employment

Help students understand that sensible career choices lie where their strengths, interests and personality meet

Exploring personal strengths for employment lesson

Help students understand that sensible career choices lie where their strengths, interests and personality meet

Hero Banner

Everything hero bannery

Hero Video

Hero video that opens in a modal

Content loader

Loading...

Checking for updates

We're checking for new versions of: Exploring personal strengths lesson

Ajax loader