Init v1

docs/documentation/components/card.html

@@ -1,31 +1,37 @@
 ---
 title: Card
-layout: documentation
+layout: docs
+theme: library
 doc-tab: components
 doc-subtab: card
 breadcrumb:
-- home
-- documentation
-- components
-- components-card
+  - home
+  - documentation
+  - components
+  - components-card
 meta:
   variables: true
   colors: false
   sizes: false
 ---
-
 {% capture card_example %}
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
+      <img
+        src="{{site.url}}/assets/images/placeholders/1280x960.png"
+        alt="Placeholder image"
+      />
     </figure>
   </div>
   <div class="card-content">
     <div class="media">
       <div class="media-left">
         <figure class="image is-48x48">
-          <img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
+          <img
+            src="{{site.url}}/assets/images/placeholders/96x96.png"
+            alt="Placeholder image"
+          />
         </figure>
       </div>
       <div class="media-content">
@@ -35,22 +41,19 @@ meta:
     </div>
 
     <div class="content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
-      <a href="#">#css</a> <a href="#">#responsive</a>
-      <br>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+      iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
+      <a href="#">#responsive</a>
+      <br />
       <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
     </div>
   </div>
 </div>
 {% endcapture %}
-
 {% capture card_header_example %}
 <div class="card">
   <header class="card-header">
-    <p class="card-header-title">
-      Component
-    </p>
+    <p class="card-header-title">Component</p>
     <button class="card-header-icon" aria-label="more options">
       <span class="icon">
         <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -59,9 +62,10 @@ meta:
   </header>
   <div class="card-content">
     <div class="content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+      iaculis mauris.
       <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
-      <br>
+      <br />
       <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
     </div>
   </div>
@@ -72,27 +76,26 @@ meta:
   </footer>
 </div>
 {% endcapture %}
-
 {% capture card_title_example %}
 <div class="card">
   <div class="card-content">
     <p class="title">
-      “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
-    </p>
-    <p class="subtitle">
-      Jeff Atwood
+      “There are two hard things in computer science: cache invalidation, naming
+      things, and off-by-one errors.”
     </p>
+    <p class="subtitle">Jeff Atwood</p>
   </div>
   <footer class="card-footer">
     <p class="card-footer-item">
       <span>
-        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
+        View on
+        <a href="https://twitter.com/codinghorror/status/506010907021828096"
+          >Twitter</a
+        >
       </span>
     </p>
     <p class="card-footer-item">
-      <span>
-        Share on <a href="#">Facebook</a>
-      </span>
+      <span> Share on <a href="#">Facebook</a> </span>
     </p>
   </footer>
 </div>
@@ -107,26 +110,16 @@ meta:
         <li>
           <code>card-header</code>: a horizontal bar with a shadow
           <ul>
-            <li>
-              <code>card-header-title</code>: a left-aligned bold text
-            </li>
-            <li>
-              <code>card-header-icon</code>: a placeholder for an icon
-            </li>
+            <li><code>card-header-title</code>: a left-aligned bold text</li>
+            <li><code>card-header-icon</code>: a placeholder for an icon</li>
           </ul>
         </li>
-        <li>
-          <code>card-image</code>: a fullwidth container for a responsive image
-        </li>
-        <li>
-          <code>card-content</code>: a multi-purpose container for <em>any</em> other element
-        </li>
+        <li><code>card-image</code>: a fullwidth container for a responsive image</li>
+        <li><code>card-content</code>: a multi-purpose container for <em>any</em> other element</li>
         <li>
           <code>card-footer</code>: a horizontal list of controls
           <ul>
-            <li>
-              <code>card-footer-item</code>: a repeatable list item
-            </li>
+            <li><code>card-footer-item</code>: a repeatable list item</li>
           </ul>
         </li>
       </ul>
@@ -135,15 +128,13 @@ meta:
 </div>
 
 <div class="content">
-  <p>
-    You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
-  </p>
+  <p>You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.</p>
 </div>
 
-{% include elements/snippet.html content=card_example size="1-2" %}
+{% include docs/elements/snippet.html content=card_example size="1-2" %}
 
 <!--  -->
-{% include elements/anchor.html name="Card parts" %}
+{% include docs/elements/anchor.html name="Card parts" %}
 
 <div class="content">
   <p>The <code>card-header</code> can have a <strong>title</strong> and a Bulma <code>icon</code>:</p>
@@ -152,9 +143,7 @@ meta:
 {% capture card_image %}
 <div class="card">
   <header class="card-header">
-    <p class="card-header-title">
-      Card header
-    </p>
+    <p class="card-header-title">Card header</p>
     <button class="card-header-icon" aria-label="more options">
       <span class="icon">
         <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -163,8 +152,10 @@ meta:
   </header>
 </div>
 {% endcapture %}
-
-{% include elements/snippet.html content=card_image size="1-2" %}
+{%
+  include docs/elements/snippet.html content=card_image
+  size="1-2"
+%}
 
 <div class="content">
   <p>The <code>card-image</code> is a container for a Bulma <code>image</code> element:</p>
@@ -174,13 +165,18 @@ meta:
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
+      <img
+        src="{{site.url}}/assets/images/placeholders/1280x960.png"
+        alt="Placeholder image"
+      />
     </figure>
   </div>
 </div>
 {% endcapture %}
-
-{% include elements/snippet.html content=card_image size="1-2" %}
+{%
+  include docs/elements/snippet.html content=card_image
+  size="1-2"
+%}
 
 <div class="content">
   <p>The <code>card-content</code> is the main part, ideal for <strong>text content</strong>, thanks to its padding:</p>
@@ -190,13 +186,18 @@ meta:
 <div class="card">
   <div class="card-content">
     <div class="content">
-      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
+      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec
+      id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus
+      et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
+      consectetur purus sit amet fermentum.
     </div>
   </div>
 </div>
 {% endcapture %}
-
-{% include elements/snippet.html content=card_image size="1-2" %}
+{%
+  include docs/elements/snippet.html content=card_image
+  size="1-2"
+%}
 
 <div class="content">
   <p>The <code>card-footer</code> acts as a list of for several <code>card-footer-item</code> elements:</p>
@@ -211,12 +212,11 @@ meta:
   </footer>
 </div>
 {% endcapture %}
+{%
+  include docs/elements/snippet.html content=card_footer
+  size="1-2"
+%}
+{% include docs/elements/anchor.html name="Examples" %}
+{% include docs/elements/snippet.html content=card_header_example size="1-2" %}
+{% include docs/elements/snippet.html content=card_title_example size="1-2" %}
 
-{% include elements/snippet.html content=card_footer size="1-2" %}
-
-{% include elements/anchor.html name="Examples" %}
-
-{% include elements/snippet.html content=card_header_example size="1-2" %}
-{% include elements/snippet.html content=card_title_example size="1-2" %}
-
-{% include components/variables.html type='component' %}