- Components
- Card
Card
A card is a rectangular container that holds your content, makes it easy to digest, and separates it from other similar content.
Clean cut
This card has no title and no top facet. That makes for a nice well.
<t:card title="Look ma, I'm a card with a kitten!" color="dark">
<f:facet name="top">
<img src="http://placekitten.com/g/300/150"/>
</f:facet>
The image is added in the top facet and this text is a child of the card element.
</t:card>
<t:card>
<h3>Clean cut</h3>
This card has no title and no top facet. That makes for a nice well.
</t:card>
<t:card color="primary" title="Primary colors">
This card has a title but no top facet and has the color attribute set to primary.
Foundation for Apps markup and CSS is great!
</t:card>A card is a rectangular container that holds your content, makes it easy to digest, and separates it from other similar content.
Info
| Tag name | card |
|---|---|
| Component type | io.tornadofaces.component.Card |
| Renderer type | io.tornadofaces.component.CardRenderer |
Attributes
| Name | Description | Required |
|---|---|---|
| color | Customize your card with colors. Valid options are dark, primary, success, warning, alert. | false |
| title | The card title is rendered in a divider. | false |
| style | CSS Styles applied to the card div | false |
| rendered | Should this component be rendered? | false |
Usage
If you add the title attribute to the card, the title is displayed in a divider, dividing the content placed in the top facet from content added as a child to the card element. The child elements are added inside a card-section div, below the divider.
You can create the card with any combination of title, top facet content and child content to create different looking cards.
To fully understand the markup of the Card, please consult the Foundation for Apps Documentation.