Kitchen Sink


This page includes every single Foundation element so that we can make sure things work together smoothly.


Abide

Here's how you use this input field!

This input is ignored by Abide using `data-abide-ignore`

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Choose Your Favorite, and this is required, so you have to pick one.
Choose Your Favorite - not required, you can leave this one blank.
Check these out

Accordion


Accordion Menu


Badge

2 3 A B

Button

Primary Secondary Success Alert Warning

So Tiny So Small So Basic So Large Such Expand

Callout

This is a default callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a primary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Cards

Dreams feel real

I'm going to improvise. Listen, there's something you should know about me... about inception.

Last updated 1 minute ago

Menus

Cards play nicely with menus too! Give them a try.

Featured

Your title here!

An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Buttons!

Who doesn't love a good button? Buttons work in all of their forms too.

I'm a button

And button groups...

Button groups also work great!

Centered

The utility classes like .text-center work great too.

Click me

Close Button

This is a static close button example.


Drilldown Menu




Equalizer

Pellentesque habitant morbi tristique senectus et netus et, ante.


Flex Video


Forms

Here's how you use this input field!

Choose Your Favorite
Check these out
$

Grid (XY)

full width cell
full width cell
6 cells
6 cells
12/6/4 cells
12/6/8 cells

Label

Secondary Label Success Label Alert Label Warning Label

Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.



Motion UI

This panel fades.

This panel slides.


Orbit

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill

  • You can also throw some text in here!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.

    This Orbit slide has chill


Pagination


Progress Bar

25%

50%

75%



Native progress: As an alternative to our custom progress bar style, you can also opt to use the native <progress> element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. View <progress> element support.



Native meter: For the extra adventurous developers out there, we also provide styles for the <meter> element. What's the difference? <progress> represents a value that changes over time, like storage capacity. <meter> represents a value that fluctates around some optimum value. It also has no support in Internet Explorer, Mobile Safari, or Android 2. View <meter> element support.


Reveal

Click me for a basic modal

Click me for a full-screen modal

This is a basic modal

Using hipster ipsum for dummy text

Stumptown direct trade swag hella iPhone post-ironic. Before they sold out blog twee, quinoa forage pour-over microdosing deep v keffiyeh fanny pack. Occupy polaroid tilde, bitters vegan man bun gentrify meggings.

Full screen modal

Intropsective Cage

Slider



Native range slider: In Foundation 6.2, we introduced styles for <input type="range">, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. View browser support for the range input type.


Switch


Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Tabs

One

Check me out! I'm a super cool Tab panel with text content! On medium-down screen sizes, this component will transform into an accordion.

Two

Three

Check me out! I'm a super cool Tab panel with text content!

Four

Five

Check me out! I'm a super cool Tab panel with text content!

Six


Thumbnail

Placeholder image.
Placeholder image.
Placeholder image.

Title Bar

FoundationPress

Toggler


Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.


Top Bar


Visibility classes

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

Can't touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.



NEW CARD

Dreams feel real

I'm going to improvise. Listen, there's something you should know about me... about inception.

Last updated 1 minute ago

Visit Yetiland

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloremque accusantium, repellendus ex debitis molestias, recusandae dignissimos delectus.

Book now

Visit Yetiland

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloremque accusantium, repellendus ex debitis molestias, recusandae dignissimos delectus.

Book now

Content from the kitchen Sink ‘page’

edit die content hier

Alle shortcodes hieronder:

CARD met extra info

parameters:
‘style’ => zelfde als bij box (red, black, grey, etc..)
‘img’ => ” URL van media file. klik op media toevoegen, selecteer je file, kies je size uit dropdown en kopieer dan je url. bv. http://theumacom.webhosting.be/theumawp2018/wp-content/uploads/2018/03/Leiden_De_Verleyding-640×351.jpg .

‘title’ => Titel van je Card (tekst staat gewoon tussen de [-card-] en [-/card-] shortcodes
‘url’ => bv. http://www.google.com, maakt heel de blok clickable

test list-projects SC

test list-projects SC

box between square brackets

met twee parameters: style (kleur en stijl) en bar (positie van ‘bar’)
style=”box-red”, “box-gray”, “box-black”, “shadow”, “redborder”
bar=”tr”, bar=”tl”, bar=”br”, bar=”bl”, bar=”ml”, bar=”mr” (top-right, top-left, bottom-right, bottom-left, mid-left, mid-right)

bv.

box between square brackets

wordt:

rode box met bar top-right
Tijd voor een babbel ? Neem nu contact op.
Tijd voor een babbel met een button ? Neem nu contact op.Some text for the button
Tijd voor een babbel ? Neem nu contact op.
Tijd voor een babbel ? Neem nu contact op.
box red bar defSC
TL Tijd voor een babbel ? Neem nu contact op.
box bar TL SC
Black TR Tijd voor een babbel ? Neem nu contact op.
box black bar TR SC
black BL Tijd voor een babbel ? Neem nu contact op.
box bar gray BL SC
gray MR Tijd voor een babbel ? Neem nu contact op.
gray ML Tijd voor een babbel ? Neem nu contact op.
shadow Tijd voor een babbel ? Neem nu contact op.
Some box shadow SC

rij en kolommen

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
kolom 2 info

some column content

ALL refs

headings


test

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

es

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

title h3

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

title h4

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

title h5

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

title h6

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


  • dskfhds
  • dlfkjdsf
  1. sdfjsdfljsdf
  2. dsfhdsfd
Coffee
Black hot drink
Milk
White cold drink