From 6429f44535a89357040857a019b61b617b7a3d15 Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Thu, 29 Sep 2016 10:44:04 +0100 Subject: [PATCH] Add card.md file for the docs Add the card.md file to the docs to explain and showcase the new component. --- docs/pages/card.md | 220 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 220 insertions(+) create mode 100644 docs/pages/card.md diff --git a/docs/pages/card.md b/docs/pages/card.md new file mode 100644 index 000000000..9a4e2c405 --- /dev/null +++ b/docs/pages/card.md @@ -0,0 +1,220 @@ +--- +title: Card +description: Cards are a popular and flexible UI component. +sass: scss/components/_card.scss +tags: + - card +--- + +## Basics + +A card is just an element with a `.card` class applied. You can put any kind of content inside. +Make sure you wrap your content in a `.card-content` element in order to achieve the traditional card look. + +A card container has no padding, allowing you to place full-bleed images inside. Use the `.card-divider` and `.card-content` classes to sub-divide a card. + +```html_example +
+
+ This is a header +
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+``` + +--- + +### Card Divider + +You can also include a `.card-divider` element as a title, footer or to break up content. + +```html_example +
+
+

I'm featured

+
+ +
+

This card makes use of the card-divider element.

+
+
+``` + +--- + +### Images + +Images play nicely with cards. Simply include one outside of the `.card-content` element to span nicely to the edges. + +```html_example +
+ +
+

This is a simple card with an image.

+
+
+``` + +```html_example +
+
+

Images work just fine below the content too!

+
+ +
+``` + +--- + +## Sizing + +You can either set the width of cards with custom css or add them into the Foundation grid. + +```html_example +
+
+
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+
+ +
+

This is a card.

+

It has an easy to override visual style, and is appropriately subdued.

+
+
+
+
+``` + +--- + +## Common examples + +Cards are very flexible and work seamlessly with other foundation components. +Here are some common patterns to give you some inspiration! + +```html_example +
+
+
+ +
+

Dreams feel real

+

I'm going to improvise. Listen, there's something you should know about me... about inception.

+ Last updated 1 minute ago +
+
+
+
+
+ +
+

Menus

+

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.

+
+
+ Last updated 10 minutes ago +
+
+
+
+
+ +
+

Buttons!

+

Who doesn't love a good button? Buttons work in all of their forms too.

+ I'm a button +
+
+
+
+
+ +
+

And button groups...

+

Button groups also work great!

+
+ One + Two + Three +
+
+
+
+
+
+
+

Centered

+
+ +
+

The utility classes like .text-center work great too.

+ Click me +
+
+
+
+``` \ No newline at end of file -- 2.47.2