From 02353e9b9f55a7b9a9ac218eea68a2538fa7387d Mon Sep 17 00:00:00 2001 From: harry Date: Wed, 31 May 2017 22:40:46 +0530 Subject: [PATCH] Add component styling test case! --- test/visual/prototype/component-styling.html | 89 ++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 test/visual/prototype/component-styling.html diff --git a/test/visual/prototype/component-styling.html b/test/visual/prototype/component-styling.html new file mode 100644 index 000000000..9e066dc8d --- /dev/null +++ b/test/visual/prototype/component-styling.html @@ -0,0 +1,89 @@ + + + + + + + Foundation for Sites Testing + + + + +
+

Rounded

+ +

These .radius, .rounded, .bordered & .shadow classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.

+ +
+ Sass Tip: You can use Shadow mixin to create something like shadow-hover-focus. Codepen example +
+ +

Buttons

+ + + + + + +

Cards

+
+ +
+ Styled Card +
+
+

This is a card.

+

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

+
+
+ +

Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table HeaderTable HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
+ +

Images

+ + +
+ + + + + + -- 2.47.3