From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- demo/components/tiles-generic.html | 106 +++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 demo/components/tiles-generic.html (limited to 'demo/components/tiles-generic.html') diff --git a/demo/components/tiles-generic.html b/demo/components/tiles-generic.html new file mode 100644 index 0000000..3d03909 --- /dev/null +++ b/demo/components/tiles-generic.html @@ -0,0 +1,106 @@ +
Tiles Generic
+

+ Tile do not have size, you can define the size in the wrapping container, or adding them + to css in your project. +
Note: specific tiles like sdc-tile-catalog has specifc width & height. +
Tiles content has overflow auto, so if the content overflow a scroll will appear. +

+ +

Basic tile

+

Tile without width or height

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, lorem at vulputate sollicitudin, neque magna hendrerit diam, nec sagittis eros libero ut dolor. Donec tincidunt, elit nec vestibulum tristique, nulla tellus aliquam eros, at rutrum massa purus quis ipsum. In aliquet non augue quis condimentum. Praesent efficitur tellus quis mauris auctor, vel semper erat vulputate. Mauris rhoncus nunc et ante dapibus, id luctus urna sodales. Proin eu augue efficitur ligula tincidunt placerat. Suspendisse potenti. +
+
+ +

Tile with header & footer

+

+ Note: The background-color is just for showing header, content & footer sections. + This is done using inline styles which should not be included in the final component. +
The content will resize automaticly his height. +

+
+
top
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, lorem at vulputate sollicitudin, neque magna hendrerit diam, nec sagittis eros libero ut dolor. Donec tincidunt, elit nec vestibulum tristique, nulla tellus aliquam eros, at rutrum massa purus quis ipsum. In aliquet non augue quis condimentum. Praesent efficitur tellus quis mauris auctor, vel semper erat vulputate. Mauris rhoncus nunc et ante dapibus, id luctus urna sodales. Proin eu augue efficitur ligula tincidunt placerat. Suspendisse potenti. +
+
footer
+
+ +

Catalog tile (VSP)

+

+ Specific tile of SDC. +
Note: The differences betweeb the tiles is the color (diffrent class) and the icons. + The div with class='sdc-tile-content-info-vendor-name' is not needed in the second tile. +

+ +
+ +
+
+
+ vsp +
+
+
+
+ + + +
+
+
vlm
+
lilach vsp
+
+
V 0.1
+
+
+
+
+
+ Footer text +
+
+ + + +
+
+
+ +
+
+
+ vlm +
+
+
+
+ + + +
+
+
vlm
+
+
V 0.1
+
+
+
+
+
+ Footer text +
+
+ + + +
+
+
+ +
+ +
+ -- cgit 1.2.3-korg