An introducing line here or just delete this row! You can use class 'grey' or 'green'.
This is the style-playground! It shows how different elements of this template are formatted and can be used as a reference when using the template to style your own website.
The grid system is easy to use. You´ve got 12 colums, so if you want to divide your content into halfs, use "six columns" plus "six columns", for example. Don´t forget to always wrap them into a container with class "row".
There are many useful classes in the Foundation grids, some especially dedicated to mobiles. Have a look at the documentation to find the ones that suit your needs.
The following are examples of header formats:
This paragraph shows how all text encapsulated only within <p></p> tags will appear.
More text examples are as follows:
This is emphasised text
This is strong text
This is deleted text
This is a link
This is a block of code
This is a block of code
This is a block of code
"This is a styled quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus. This is a quote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempor. Nullam tortor. Nulla vel dui. Curabitur et metus." John Doe (1900 - 2000)
The following are examples of image formats:
A left aligned
image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor.
Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien.
In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Consequat dignissim,
luctus blandit, sapien. In ante. Proin aliquam odio ut sem consequat dignissim, luctus blandit, sapien.
In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A right
aligned image. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat
dignissim, luctus blandit, sapien.
In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A left
aligned, linked image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor
non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus
blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Data tables and forms don´t always play nice in responsive layouts. Zurb has got a solution for this, see their article about Responsive Tables. I did NOT include it here because I think that not everybody might need it (you might want to do it yourself if your task demands to), so what you see here is a normal and - down to some point - flexible table:
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content | This is longer content | Content | Content |
| Content | This is longer content | Content | Content |
| Content | This is longer content | Content | Content |
| Content | This is longer content | Content | Content |
Foundation also got you covered if you need some nice pricing tables. To read more about the various elements you can use, see the documentation about elements.
To see a form, go here!
