From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/tiles.html | 314 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 314 insertions(+) create mode 100644 docs/components/tiles.html (limited to 'docs/components/tiles.html') diff --git a/docs/components/tiles.html b/docs/components/tiles.html new file mode 100644 index 0000000..aeb0c5d --- /dev/null +++ b/docs/components/tiles.html @@ -0,0 +1,314 @@ + + + + Tiles - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Tiles

+
+
+ + + +
+
+ + +
+
+

Tiles are repeatable or embeddable information blocks.

+
+
+
+
+
Avatar
+
+
+

The Avengers

+

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

+
+
+ + +
+
+
+
+
+
+
Avatar
+
+
+

The S.H.I.E.L.D.

+

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

+

+ + +

+
+
+
+
+

Add a container with the tile class. + And add child elements with the tile-icon, tile-content or/and tile-action classes. + The tile-icon and tile-action are optional. +

+

There are tile-title and tile-subtitle classes for title and subtitle text styles.

+ 
<div class="tile">
+  <div class="tile-icon">
+    <div class="example-tile-icon">
+      <i class="icon icon-file centered"></i>
+    </div>
+  </div>
+  <div class="tile-content">
+    <p class="tile-title">The Avengers</p>
+    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+  </div>
+  <div class="tile-action">
+    <button class="btn btn-primary">Join</button>
+  </div>
+</div>
+
+

Compact tiles

+

There is compact version of Tiles component, which is often used as contact and file info blocks.

+

Add the tile-centered class to the container tile. + The tile-icon, tile-content and tile-action will be vertically centered. +

+
+
+
+
+
+
+
+
spectre-docs.pdf
+
14MB · Public · 1 Jan, 2017
+
+
+ +
+
+
+
+ 
<div class="tile tile-centered">
+  <div class="tile-icon">
+    <div class="example-tile-icon">
+      <i class="icon icon-file centered"></i>
+    </div>
+  </div>
+  <div class="tile-content">
+    <div class="tile-title">spectre-docs.pdf</div>
+    <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
+  </div>
+  <div class="tile-action">
+    <button class="btn btn-link">
+      <i class="icon icon-more-vert"></i>
+    </button>
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-25-gf783