Text
The text stack that comes with Foundation is powered by Markdown. This results in clean HTML output that is predictable. This makes your text easier to style. All of the text sections throughout this demo site (including the headers) are done with the Text stack and Markdown.
You can easily style your text and make it bold or italic.
You can easily make numbered lists...
- List Item A
- List Item B
- List Item C
And bulleted lists...
- List Item 1
- List Item 2
- List Item 3
While there is more that you can do with Markdown, the bascis are very simple and powerful.
Headers
While you can do headers (h1-h6) with the Text stack, there is a dedicated header stack that give you some additional features just for headers.
Underscore Header
Gradient Header
Image Mask
Header with Small Segments
Labels
Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata.
Badges
The badge is a basic component that displays a number or letter.
Code Blocks
Code blocks allow you to display text in a different format. While this has traditionally been used for short code snippets, there if nothing stopping you from using it for your own needs.
var javascript = true;
var codeBlocks = "Not just for code";
Definition Lists
Definition Lists are a list of groups of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
- Foundation 6 Stacks
- The best and most fun way to build a website.
- Weaver's Space
- The maker's of Foundation Stacks. Founded by Joe Workman, who is a pretty cool guy.
Details
The Details Element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. This is bascially the most basic form of an Accordion. The details widget is a native browser component. Therefore, it will be very performant. This could be a great way to displays some FAQs on your webpages.
Open on Load
You can set any section inside of the Details stack to be open on page load. You can simply open and close each section by clicking on the carret in the section title.
Not Just for Text
You are not restricted to just text inside of the Details content area. You can add any stack that you want.
Quotes
The Quotes stack allows you to easy display quotes and testimonials onto your webpages. The author citation is optional.
Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do. Rob Siltanen
Tables
The Tables stack allows you to easily display simple tables onto your webpage. The tables use Markdown to build the tables and apply simple alignment and styles.
There are many great online utilities that can help you convert a CSV file to Markdown.
| Tables | Are | Cool |
|---|---|---|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
Video Tutorials
Below are video tutorials that are relevant to the stacks used on this page.