Component links

docs/_data/links.json

@@ -43,9 +43,54 @@
     "button": {
       "name": "Button",
       "path": "/documentation/elements/button"
+    },
+    "components": {
+      "name": "Components",
+      "path": "/documentation/components"
+    },
+    "components-breadcrumb": {
+      "name": "Breadcrumb",
+      "path": "/documentation/components/breadcrumb"
+    },
+    "components-card": {
+      "name": "Card",
+      "path": "/documentation/components/card"
+    },
+    "components-dropdown": {
+      "name": "Dropdown",
+      "path": "/documentation/components/dropdown"
+    },
+    "components-menu": {
+      "name": "Menu",
+      "path": "/documentation/components/menu"
+    },
+    "components-message": {
+      "name": "Message",
+      "path": "/documentation/components/message"
+    },
+    "components-modal": {
+      "name": "Modal",
+      "path": "/documentation/components/modal"
+    },
+    "components-navbar": {
+      "name": "Navbar",
+      "path": "/documentation/components/navbar"
+    },
+    "components-pagination": {
+      "name": "Pagination",
+      "path": "/documentation/components/pagination"
+    },
+    "components-panel": {
+      "name": "Panel",
+      "path": "/documentation/components/panel"
+    },
+    "components-tabs": {
+      "name": "Tabs",
+      "path": "/documentation/components/tabs"
     }
   },
   "order": {
-    "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"]
+    "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+    "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
   }
 }

docs/documentation/components/breadcrumb.html

@@ -1,12 +1,21 @@
 ---
 title: Breadcrumb
+subtitle: "A simple <strong>breadcrumb</strong> component to improve your navigation experience"
 layout: documentation
 doc-tab: components
 doc-subtab: breadcrumb
+breadcrumb:
+- home
+- documentation
+- components
+- components-breadcrumb
+meta:
+- since: "0.4.3"
+- variables: true
+- colors: false
+- sizes: true
 ---
 
-{% include subnav/subnav-components.html %}
-
 {% capture breadcrumb_example %}
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
@@ -156,23 +165,6 @@ doc-subtab: breadcrumb
 </nav>
 {% endcapture %}
 
-<section class="section">
-  <div class="container">
-
-    <h1 class="title">Breadcrumb</h1>
-    <h2 class="subtitle">
-      A simple <strong>breadcrumb</strong> component to improve your navigation experience
-    </h2>
-    {%
-      include meta.html
-      since="0.4.3"
-      variables=true
-      colors=false
-      sizes=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
   <p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
@@ -227,6 +219,3 @@ doc-subtab: breadcrumb
 {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/card.html

@@ -1,8 +1,18 @@
 ---
 title: Card
+subtile: "An all-around flexible and composable component"
 layout: documentation
 doc-tab: components
 doc-subtab: card
+breadcrumb:
+- home
+- documentation
+- components
+- components-card
+meta:
+- variables: true
+- colors: false
+- sizes: false
 ---
 
 {% capture card_example %}
@@ -89,21 +99,6 @@ doc-subtab: card
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Card</h1>
-    <h2 class="subtitle">An all-around flexible and composable component</h2>
-    {%
-      include meta.html
-      variables=true
-      colors=false
-      sizes=false
-    %}
-
-    <hr>
-
 <div class="content">
   <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
   <ul>
@@ -185,6 +180,3 @@ doc-subtab: card
 </div>
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/dropdown.html

@@ -1,8 +1,18 @@
 ---
 title: Dropdown
+subtitle: "An interactive <strong>dropdown menu</strong> for discoverable content"
 layout: documentation
 doc-tab: components
 doc-subtab: dropdown
+breadcrumb:
+- home
+- documentation
+- components
+- components-dropdown
+meta:
+- colors: false
+- sizes: false
+- variables: true
 ---
 
 {% capture dropdown_example %}
@@ -188,26 +198,6 @@ doc-subtab: dropdown
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-
-    <h1 class="title">Dropdown</h1>
-    <h2 class="subtitle">
-      An interactive <strong>dropdown menu</strong> for discoverable content
-    </h2>
-    {%
-      include meta.html
-      new=true
-      since="0.4.4"
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>
     The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
@@ -343,6 +333,3 @@ doc-subtab: dropdown
 </div>
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/menu.html

@@ -1,8 +1,18 @@
 ---
 title: Menu
+subtitle: "A simple <strong>menu</strong>, for any type of vertical navigation"
 layout: documentation
 doc-tab: components
 doc-subtab: menu
+breadcrumb:
+- home
+- documentation
+- components
+- components-menu
+meta:
+- colors: false
+- sizes: false
+- variables: true
 ---
 
 {% capture menu_example %}
@@ -42,24 +52,6 @@ doc-subtab: menu
 </aside>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Menu</h1>
-    <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 {% include snippet.html content=menu_example size="one-third" %}
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/message.html

@@ -1,8 +1,18 @@
 ---
 title: Message
+subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your page"
 layout: documentation
 doc-tab: components
 doc-subtab: message
+meta:
+- colors: true
+- sizes: true
+- variables: true
+breadcrumb:
+- home
+- documentation
+- components
+- components-message
 ---
 
 {% capture message_example %}
@@ -108,23 +118,6 @@ doc-subtab: message
 {% endfor %}
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Messages</h1>
-    <h2 class="subtitle">
-      Colored <strong>message</strong> blocks, to emphasize part of your page
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 {% include snippet.html content=message_example %}
 
 {% include anchor.html name="Colors" %}
@@ -150,6 +143,3 @@ doc-subtab: message
 {% include snippet.html content=message_large %}
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/modal.html

@@ -1,8 +1,18 @@
 ---
 title: Modal
+subtitle: "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want"
 layout: documentation
 doc-tab: components
 doc-subtab: modal
+meta:
+- colors: false
+- sizes: false
+- variables: true
+breadcrumb:
+- home
+- documentation
+- components
+- components-modal
 ---
 
 {% capture modal %}
@@ -46,21 +56,6 @@ doc-subtab: modal
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Modal</h1>
-    <h2 class="subtitle">A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want</h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>The modal structure is very simple:</p>
   <ul>
@@ -129,9 +124,6 @@ doc-subtab: modal
 
 {% include variables.html type='component' %}
 
-  </div>
-</section>
-
 <div id="modal" class="modal">
   <div class="modal-background"></div>
   <div class="modal-content">

docs/documentation/components/navbar.html

@@ -1,12 +1,20 @@
 ---
 title: Navbar
+subtitle: "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns"
 layout: documentation
 doc-tab: components
 doc-subtab: navbar
+breadcrumb:
+- home
+- documentation
+- components
+- components-navbar
+meta:
+- colors: true
+- sizes: false
+- variables: true
 ---
 
-{% include subnav/subnav-components.html %}
-
 {% capture navbar_example %}
 {% include examples/navbar.html id="Default" %}
 {% endcapture %}
@@ -523,24 +531,6 @@ document.addEventListener('DOMContentLoaded', function () {
 </nav>
 {% endcapture %}
 
-<section class="section">
-  <div class="container">
-
-    <h1 class="title">Navbar</h1>
-    <h2 class="subtitle">
-      A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns
-    </h2>
-    {%
-      include meta.html
-      new=true
-      since="0.4.3"
-      colors=true
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="message is-success">
   <div class="message-body">
     <p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
@@ -1128,5 +1118,3 @@ document.addEventListener('DOMContentLoaded', function () {
 
 {% include variables.html type='component' %}
 
-  </div>
-</section>

docs/documentation/components/pagination.html

@@ -1,8 +1,18 @@
 ---
 title: Pagination
+subtitle: "A responsive, usable, and flexible <strong>pagination</strong>"
 layout: documentation
 doc-tab: components
 doc-subtab: pagination
+breadcrumb:
+- home
+- documentation
+- components
+- components-pagination
+meta:
+- colors: false
+- sizes: true
+- variables: true
 ---
 
 {% capture pagination_example %}
@@ -149,21 +159,6 @@ doc-subtab: pagination
 </nav>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Pagination</h1>
-    <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>
     The pagination component consists of several elements:
@@ -233,6 +228,3 @@ doc-subtab: pagination
 {% include snippet.html content=pagination_large_example horizontal=true more=true %}
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/panel.html

@@ -1,8 +1,18 @@
 ---
 title: Panel
+subtitle: "A composable <strong>panel</strong>, for compact controls"
 layout: documentation
 doc-tab: components
 doc-subtab: panel
+breadcrumb:
+- home
+- documentation
+- components
+- components-panel
+meta:
+- colors: false
+- sizes: false
+- variables: true
 ---
 
 {% capture panel_example %}
@@ -73,21 +83,6 @@ doc-subtab: panel
 </nav>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Panel</h1>
-    <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>
     The <code>panel</code> is container for several types:
@@ -117,6 +112,3 @@ doc-subtab: panel
 {% include snippet.html content=panel_example size="one-third" %}
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>

docs/documentation/components/tabs.html

@@ -1,8 +1,18 @@
 ---
 title: Tabs
+subtitle: "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles"
 layout: documentation
 doc-tab: components
 doc-subtab: tabs
+breadcrumb:
+- home
+- documentation
+- components
+- components-tabs
+meta:
+- colors: false
+- sizes: true
+- variables: true
 ---
 
 {% capture tabs_example %}
@@ -344,22 +354,6 @@ doc-subtab: tabs
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Tabs</h1>
-    <h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
-    {%
-      include meta.html
-      since="0.4.4"
-      colors=false
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
     The <strong>default</strong> tabs style has a single border at the bottom.</p>
@@ -445,6 +439,3 @@ doc-subtab: tabs
 {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
 
 {% include variables.html type='component' %}
-
-  </div>
-</section>