Abide
Accordion
-
Heeft mijn zorgverzekeraar een contract?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quidem maxime tenetur non, minus suscipit velit. Voluptatem officia tempore ducimus ipsa voluptate, odio excepturi tempora ipsam vitae in nisi dolores accusantium, maiores totam fugit quod blanditiis eligendi maxime perferendis, commodi deserunt facilis eveniet. Unde delectus facere reprehenderit mollitia dolorem, earum architecto non magnam quaerat possimus inventore repellat laborum, maiores labore facilis dignissimos praesentium voluptatibus culpa sit voluptatum quibusdam in atque magni harum. Assumenda, eveniet, impedit. Expedita minus repudiandae delectus quisquam.
-
Ik heb een budgetpolis, krijg ik de zorgkosten vergoed?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab minima alias consectetur officiis recusandae autem, quis, enim eaque mollitia, aperiam id vel atque voluptas maxime est explicabo nostrum odio quibusdam veniam accusantium iste eveniet aliquid! Vero atque labore excepturi accusamus deleniti. Ullam maxime aut qui iusto maiores. Earum quod asperiores corporis, excepturi maiores alias ad impedit omnis, fugit quia expedita.
-
Accordion 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus odit omnis reiciendis unde maxime sunt facilis. Deserunt eveniet error inventore magni autem quisquam facilis doloremque dolorem earum ab dolores doloribus neque nesciunt vitae assumenda ea velit tempora, fugit voluptates itaque nobis minus voluptatibus. Dicta quasi, suscipit quia, ullam ab ad repudiandae cumque accusantium eos quae assumenda vel, obcaecati aspernatur omnis aut nulla illum enim laboriosam optio quas. Eos numquam excepturi commodi, quidem consequatur itaque. Minus earum odio dignissimos, omnis inventore quaerat sit fuga! Natus distinctio voluptas maiores minima tempora, unde. Illum iusto enim libero consectetur ad quos facere, dicta ipsa!
Accordion Menu
Badge
2 3 A BBreadcrumbs
Button
Primary Secondary Success Alert WarningSo Tiny So Small So Basic So Large Such Expand
Callout
Waar kunnen we u mee helpen?
Link naar een pagina
Waar kunnen we u mee helpen?
Link naar een pagina
Waar kunnen we u mee helpen?
Link naar een pagina
Callout with equalizer
Cards
Dreams feel real
I'm going to improvise. Listen, there's something you should know about me... about inception.
Last updated 1 minute agoMenus
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.
And button groups...
Button groups also work great!
Members Cards
Close Button
This is a static close button example.
Drilldown Menu
Dropdown Menu
Dropdown Pane
Equalizer
Pellentesque habitant morbi tristique senectus et netus et, ante.
Flex Video
Forms
Grid (XY)
Label
Secondary Label Success Label Alert Label Warning LabelMedia 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.
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.
Menu
Motion UI
This panel fades.
This panel slides.
Orbit
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 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
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
Title Bar
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.
Can't touch this.
Can sort of 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.