New Docs category pages

1 files changed, 183 insertions, 1 deletions

diff --git a/docs/src/components.pug b/docs/src/components.pug
index 539bbc2..fa7d1cd 100644
--- a/docs/src/components.pug
+++ b/docs/src/components.pug
@@ -3,9 +3,191 @@ extends _layout/_docs-layout.pug
 block variables
   - var slug = 'components'
   - var parent = 'components'
-  - var title = 'Components - Spectre.css CSS Framework'
+  - var title = 'components - Spectre.css CSS Framework'
   - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
 
 block docs-content
+  +docs-heading('components', 'Components')
+    include _layout/_ad-g.pug
+
+    p 
+      strong Spectre.css 
+      | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+    p 
+      | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+
+    .docs-demo.columns
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Accordions
+          .card-body
+            | Used to toggle sections of content
+          .card-footer
+            a.btn.btn-primary(href="components/accordions.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Avatars
+          .card-body
+            | User profile pictures
+          .card-footer
+            a.btn.btn-primary(href="components/avatars.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Badges
+          .card-body
+            | Used as unread number indicators
+          .card-footer
+            a.btn.btn-primary(href="components/badges.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Bars
+          .card-body
+            | Progress of a task or the value within the known range
+          .card-footer
+            a.btn.btn-primary(href="components/bars.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Breadcrumbs
+          .card-body
+            | Navigational hierarchies to indicate current location
+          .card-footer
+            a.btn.btn-primary(href="components/breadcrumbs.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Cards
+          .card-body
+            | Flexible content containers
+          .card-footer
+            a.btn.btn-primary(href="components/cards.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Chips
+          .card-body
+            | Complex entities in small blocks
+          .card-footer
+            a.btn.btn-primary(href="components/chips.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Empty states
+          .card-body
+            | Navigational hierarchies to indicate current location
+          .card-footer
+            a.btn.btn-primary(href="components/empty.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Menu
+          .card-body
+            | Vertical list of links or buttons for actions and navigation
+          .card-footer
+            a.btn.btn-primary(href="components/menu.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Modals
+          .card-body
+            | Flexible dialog prompts
+          .card-footer
+            a.btn.btn-primary(href="components/modals.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Nav
+          .card-body
+            | Vertical list of links
+          .card-footer
+            a.btn.btn-primary(href="components/nav.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Pagination
+          .card-body
+            | Vertical list of links or buttons for actions and navigation
+          .card-footer
+            a.btn.btn-primary(href="components/pagination.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Panels
+          .card-body
+            | Flexible view container with auto-expand content section
+          .card-footer
+            a.btn.btn-primary(href="components/panels.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Popovers
+          .card-body
+            | Small overlay content containers
+          .card-footer
+            a.btn.btn-primary(href="components/popovers.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Steps
+          .card-body
+            | Progress indicators of a sequence of task steps
+          .card-footer
+            a.btn.btn-primary(href="components/steps.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tabs
+          .card-body
+            | Switch between different views
+          .card-footer
+            a.btn.btn-primary(href="components/tabs.html") View
+
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tiles
+          .card-body
+            | Repeatable or embeddable information blocks
+          .card-footer
+            a.btn.btn-primary(href="components/tiles.html") View
+              
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Toasts
+          .card-body
+            | Progress indicators of a sequence of task steps
+          .card-footer
+            a.btn.btn-primary(href="components/toasts.html") View
+        
+      .column.col-6.col-xs-12
+        .card
+          .card-header
+            .card-title.h5 Tooltips
+          .card-body
+            | Context information labels that appear on hover and focus
+          .card-footer
+            a.btn.btn-primary(href="components/tooltips.html") View
+              
+    include _layout/_ad-c.pug
 
   include _layout/_footer.pug
\ No newline at end of file