Init v1

docs/documentation/components/breadcrumb.html

@@ -1,13 +1,14 @@
 ---
 title: Breadcrumb
-layout: documentation
+layout: docs
+theme: library
 doc-tab: components
 doc-subtab: breadcrumb
 breadcrumb:
-- home
-- documentation
-- components
-- components-breadcrumb
+  - home
+  - documentation
+  - components
+  - components-breadcrumb
 meta:
   variables: true
   colors: false
@@ -23,9 +24,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_centered_example %}
+{% endcapture %} {% capture breadcrumb_centered_example %}
 <nav class="breadcrumb is-centered" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -34,9 +33,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_right_example %}
+{% endcapture %} {% capture breadcrumb_right_example %}
 <nav class="breadcrumb is-right" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -45,9 +42,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_icons_example %}
+{% endcapture %} {% capture breadcrumb_icons_example %}
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
     <li>
@@ -84,9 +79,7 @@ meta:
     </li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_small_example %}
+{% endcapture %} {% capture breadcrumb_small_example %}
 <nav class="breadcrumb is-small" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -95,9 +88,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_medium_example %}
+{% endcapture %} {% capture breadcrumb_medium_example %}
 <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -106,9 +97,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_large_example %}
+{% endcapture %} {% capture breadcrumb_large_example %}
 <nav class="breadcrumb is-large" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -117,9 +106,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_arrow_example %}
+{% endcapture %} {% capture breadcrumb_arrow_example %}
 <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -128,9 +115,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_bullet_example %}
+{% endcapture %} {% capture breadcrumb_bullet_example %}
 <nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -139,9 +124,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_dot_example %}
+{% endcapture %} {% capture breadcrumb_dot_example %}
 <nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -150,9 +133,7 @@ meta:
     <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
   </ul>
 </nav>
-{% endcapture %}
-
-{% capture breadcrumb_succeeds_example %}
+{% endcapture %} {% capture breadcrumb_succeeds_example %}
 <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
   <ul>
     <li><a href="#">Bulma</a></li>
@@ -165,56 +146,73 @@ meta:
 
 <div class="content">
   <p>
-    The Bulma <strong>breadcrumb</strong> is a simple navigation component that only requires a <code>breadcrumb</code> container and a <code>ul</code> list. The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.
+    The Bulma <strong>breadcrumb</strong> is a simple navigation component that
+    only requires a <code>breadcrumb</code> container and a
+    <code>ul</code> list. The dividers are automatically created in the content
+    of the <code>::before</code> pseudo-element of <code>li</code> tags.
+  </p>
+  <p>
+    You can inform the current page using the <code>is-active</code> modifier in
+    a <code>li</code> tag. It will disable the navigation of inner links.
   </p>
-  <p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
 </div>
 
-<hr>
-{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %}
+<hr />
 
-{% include elements/anchor.html name="Alignment" %}
+{% include docs/elements/snippet.html content=breadcrumb_example horizontal=true
+clipped=true %}
+
+{% include docs/elements/anchor.html name="Alignment" %}
 
 <div class="content">
-  <p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>breadcrumb</code> container.</p>
+  <p>
+    For alternative alignments, use the <code>is-centered</code> and
+    <code>is-right</code> modifiers on the <code>breadcrumb</code> container.
+  </p>
 </div>
 
-{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
-
-{% include elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
-
-{% include elements/anchor.html name="Icons" %}
+{% include docs/elements/snippet.html content=breadcrumb_centered_example
+horizontal=true clipped=true %} {% include docs/elements/snippet.html
+content=breadcrumb_right_example horizontal=true clipped=true %} {% include
+docs/elements/anchor.html name="Icons" %}
 
 <div class="content">
-  <p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
+  <p>
+    You can use any of the
+    <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>
+    <strong>icons</strong>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
-
-{% include elements/anchor.html name="Alternative separators" %}
+{% include docs/elements/snippet.html content=breadcrumb_icons_example
+horizontal=true clipped=true %} {% include docs/elements/anchor.html
+name="Alternative separators" %}
 
 <div class="content">
-  <p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
+  <p>
+    You can choose between <strong>4 additional separators</strong>:
+    <code>has-arrow-separator</code> <code>has-bullet-separator</code>
+    <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
-
-{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
-
-{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
-
-{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
-
-{% include elements/anchor.html name="Sizes" %}
+{% include docs/elements/snippet.html content=breadcrumb_arrow_example
+horizontal=true clipped=true %} {% include docs/elements/snippet.html
+content=breadcrumb_bullet_example horizontal=true clipped=true %} {% include
+docs/elements/snippet.html content=breadcrumb_dot_example horizontal=true
+clipped=true %} {% include docs/elements/snippet.html
+content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% include
+docs/elements/anchor.html name="Sizes" %}
 
 <div class="content">
-  <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+  <p>
+    You can choose between <strong>3 additional sizes</strong>:
+    <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
-
-{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
-
-{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
-
-{% include components/variables.html type='component' %}
+{% include docs/elements/snippet.html content=breadcrumb_small_example
+horizontal=true clipped=true %} {% include docs/elements/snippet.html
+content=breadcrumb_medium_example horizontal=true clipped=true %} {% include
+docs/elements/snippet.html content=breadcrumb_large_example horizontal=true
+clipped=true %}