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.
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.
Header with Small Segments
Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata.
The badge is a basic component that displays a number or letter.
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.
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.
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.
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
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.
|col 1 is||left-aligned||$1600|
|col 2 is||centered||$12|
|col 3 is||right-aligned||$1|
Below are video tutorials that are relevant to the stacks used on this page.