Patterns
+ +-
+
- + Pattern Overview + +
- Web App +
- E-commerce + + +
- Blog +
- News +
Manage subscription
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.
+
+
+
+
+```
+
+### Grid
+
+```html {.example}
+
+
+
+
+
+ Kicked ass and chewed bubblegum
+ Oct. 31st +
+
+
+
+
+ Kicked ass and chewed bubblegum
+ Oct. 31st +
+
+
+
+
+ Kicked ass and chewed bubblegum
+ Oct. 31st +
+
+
+
+
+
+ Kicked ass and chewed bubblegum
+ Oct. 31st +
+
+
+```
+
+## Pagination
+
+### Simple Pagination
+
+```html {.example}
+ -
+
-
+
+ ++++ John Carpenter ++Admin +Master of Horror
++++ ++++++ Email + +++ + Phone +
+ -
+
+ ++++ Tobe Hooper ++Admin +Master of Horror
++++ +++Email +Phone
+ -
+
+ ++++ George A. Romero ++Admin +Master of Horror
+++ +++Email +Phone
+ -
+
+ +++ ++ Alfred Hitchcock ++Admin +Master of Horror
++++ +++Email +Phone
+ -
+
+ ++++ Sam Raimi ++Admin +Master of Horror
++++ +++Email +Phone
+ -
+
+ ++++ Wes Craven ++Admin +Master of Horror
++++ +++Email +Phone
+
+
+
+```
+
+## FAQ/Details (WIP)
+
+```html{.example}
+
+
+ Client Information
+Personal details
+-
+
- Beast of Bodmin +
- A large feline inhabiting Bodmin Moor. +
- Beast of Bodmin +
- A large feline inhabiting Bodmin Moor. +
- Beast of Bodmin +
- A large feline inhabiting Bodmin Moor. +
- Beast of Bodmin +
- A large feline inhabiting Bodmin Moor. +
+
+
+
+
+
+
+
+
+
+```
+
+## Pricing Tiers (WIP)
+
+```html{.example}
+```
+
+## Empty States
+
+### Simple
+
+```html{.example}
+ -
+
- Beast of Bodmin +
- A large feline inhabiting Bodmin Moor. +
+
+
+
+
+
+
+```
+
+### With dashed border
+
+```html{.example}
+
+ No Project
+Get started by one.
+
+
+
+
+```
+### With starting points
+
+```html{.example}
+No DBs
+Get started by creating a database.
+ +
+
+ Projects
+You haven’t created a project yet. Get started by selecting a template or start from an empty project.
+-
+
-
+ ++ + Create a List+
+ + Another to-do system you’ll try but eventually give up on.
+
+ -
+ ++ Create a Gallery+
+ Another to-do system you’ll try but eventually give up on.
+
+ -
+ ++ Create a Spreadsheet+
+ Another to-do system you’ll try but eventually give up on.
+
+ -
+ ++ Create a Timeline+
+ Another to-do system you’ll try but eventually give up on.
+
+ -
+ ++ Create a Calendar+
+ Another to-do system you’ll try but eventually give up on.
+
+
+
+
+```
+
+### With shared borders
+```html{.example}
+Last Week
+ + +-
+
- Total Subscribers +
-
+ + 71,897 + from 70,946 ++++
+ +12% +
+ - Total Subscribers +
-
+ + 71,897 + from 70,946 ++++
+ +12% +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Pricing
+```html{.example}
+Collective Activity for Yesterday
+ +482,813
+ 97,303
+ 97,303
+
+
+
+
+
+ Study Leaders
+ items mastered last 7 days + +-
+
-
+ + ++
Title
+ 4,500 + +
+ -
+ + + ++
Title
+ 4,500 + +
+ -
+ + ++
Title
+ 4,500 + +
+ -
+ + ++
Title
+ 4,500 + +
+
+
+
+
+
+
+
+
+
+```
+```html{.example}
+
+ Get Started
+ Talk to sales
+
+ Basic Plan
+
+ $10
+
+ per user
+per month
+ + +Basic features for up to 10 users.
+
+ Features
+
+ Everything in our free plans plus...
+-
+
-
+
+ Access to basic features +
+ -
+
+ Basic Reporting and analytics +
+ -
+
+ Up to 10 individual users +
+ -
+
+ 20GB Individual data each user +
+ -
+
+ Basic chat and email support +
+
+ Get Started
+ Talk to sales
+
+ Business Plan Most Popular
+
+ $20
+
+ per user
+per month
+ + +Growing teams up to 20 users.
+
+ Features
+
+ Everything in Basic plus...
+-
+
-
+
+ 200+ integrations +
+ -
+
+ Basic Reporting and analytics +
+ -
+
+ Up to 10 individual users +
+ -
+
+ 20GB Individual data each user +
+ -
+
+ Basic chat and email support +
+
+ Get Started
+ Talk to sales
+
+ Basic Plan
+
+ $40
+
+ per user
+per month
+ + +Basic features for up to 10 users.
+
+ Features
+
+ Everything in our free plans plus...
+-
+
-
+
+ Access to basic features +
+ -
+
+ Basic Reporting and analytics +
+ -
+
+ Up to 10 individual users +
+ -
+
+ 20GB Individual data each user +
+ -
+
+ Basic chat and email support +
+
+
+
+
+```
+### With templates
+
+### With recommendations grid
diff --git a/docs/docs/patterns/blog.md b/docs/docs/patterns/blog.md
index 736ac9fee..9b9334c32 100644
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -1,4 +1,370 @@
---
title: Blog
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
+
+### Hero
+```html{.example}
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+
+
+
+
+ 
+
+
+ Do you see any Teletubbies in here?
+ +
+
+
+
+ 
+
+
+ The path of the righteous man is beset on all sides
+ +
+
+
+
+ 
+
+
+ Article Title
+ +
+
+
+
+ 
+
+
+ Article Title
+ +
+
+
+
+ 
+
+
+ Article Title
+ +Subscribe to our Newsletter
+To get the latest and most quality design resources
+
+ Recent Articles
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ Health
+ That's clear. Your cells react to bacteria
+ Mr. Glass
+
+
+
+
+
+
+
+ 
+
+
+
+ Lifestyle
+ Your bones don't break
+ Jules
+
+
+
+
+
+
+ Lifestyle
+ Your bones don't break
+ Jules
+
+ 
+
+ Color Advancements+ Lot of new and exciting features in web colors
+ 2d ago + +
+ Read More
+
+
+
+ Share this Article
+
+
+
+
+
+
+
+
+
+
+```
+
+## with large selector
+```html{.example}
+
+ Graphic Tank
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+## Card with full details
+```html{.example}
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+## With color swatches (WIP)
+```html{.example}
+
+```
+
diff --git a/docs/docs/patterns/ecommerce-product-review.md b/docs/docs/patterns/ecommerce-product-review.md
new file mode 100644
index 000000000..4297fd0b0
--- /dev/null
+++ b/docs/docs/patterns/ecommerce-product-review.md
@@ -0,0 +1,464 @@
+---
+title: E-commerce - Product Reviews
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## With images grid
+```html{.example}
+
+
+
+
+
+
+
+
+
+
+ Clothing
+ Men's
+ Shirts & Tops
+
+
+
+```
+
+## With Tiered Images
+
+```html{.example}
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+ Option 1
+ Option 2
+ Option 3
+
+ Add to Cart
+
+Tank top
+The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.
+Highlights
+-
+
- Hand cut and sewn locally +
Highlights
+The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.
+ + $192 +
+
+
+
+ Clothing
+ Men's
+ Shirts & Tops
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+ Option 1
+ Option 2
+ Option 3
+
+ Add to Cart
+
+
+
+```
+## with images and expandable details
+
+```html {.example}
+
+
+
+
+
+ Basic Tee
+ $35 +
+
+
+
+
+
+
+
+ Description
+The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.
+Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.
++
Highlights
+-
+
- Hand cut and sewn locally +
+
+
+
+
+
+International delivery
+Get your order in 2 years
+International delivery
+Get your order in 2 years
+ +
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Split with image
+
+```html {.example}
+Pullover Sweater
+ $140 +The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.
+
+ Add to cart
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+
+
+```
+## With tabs
+
+```html{.example}
+
+
+ Clothing
+ Men's
+ Shirts & Tops
+
+
+ Everyday Ruck Snack
+ + $220 | +Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.
+
+
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+ 
+ Brand
+
+Success
+
+
+
+
+ General
+ Custom
+ Advanced
+ Disabled
+
+
+
+
+ This is the custom tab panel.
+ This is the advanced tab panel.
+ This is a disabled tab panel.
+
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce-shopping-cart.md b/docs/docs/patterns/ecommerce-shopping-cart.md
new file mode 100644
index 000000000..73725143b
--- /dev/null
+++ b/docs/docs/patterns/ecommerce-shopping-cart.md
@@ -0,0 +1,9 @@
+---
+title: E-commerce - Shopping Cart
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md
index 29d5298f0..a68056e64 100644
--- a/docs/docs/patterns/ecommerce.md
+++ b/docs/docs/patterns/ecommerce.md
@@ -8,16 +8,133 @@ TODO Page Description
## Examples
+## Coupon
+
+```html{.example}
+Application UI Icon Pack
+
+ The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.
++
Highlights
+-
+
- 200+ SVG icons in 3 unique styles +
- Compatible with Figma, Sketch, and Adobe XD +
- Drawn on 24 x 24 pixel grid +
+
License
+For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. Read full license
++
Share
+ + +
+
+ Hector Gibbons
+July 12, 2021
+Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.
+
+ 
+
+
+
+ help us start you off on the right foot.
+
+
+ Email me discount
+
+ Get 15% Off...*
+...your first online order when you signup for emails.
+What would you link like people to call you?
+ *The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.
+
+ Shop by Department
+ Mens
+ Womens
+ Kids
+
+ Infants
+
+ Newborns
+ 6 Months
+ 12 Months
+
+
+ Big & Tall
+
+
+ Shop by Category
+ Shirts
+ Pants
+ Shoes
+
+
+
+ Just Arrived
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Signup now
+
+
+ footer with something cool in it
+
Shopping Cart
+ 
AJ1
@@ -31,7 +148,7 @@ TODO Page Description
+ 
The Trails
@@ -45,7 +162,7 @@ TODO Page Description
+ 
Outcast
@@ -120,7 +237,7 @@ TODO Page Description
- 
+
- 
+ 
- 
+ 
+
Shopping Cart
+
@@ -144,7 +261,7 @@ TODO Page Description
+
@@ -168,7 +285,7 @@ TODO Page Description
+
@@ -194,7 +311,7 @@ TODO Page Description
-
Order Summary
@@ -224,6 +341,9 @@ TODO Page Description
```
-### Product Quickview
+
+
+### With Carousel
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Black
+
+ White
+ Gray
+
+
+
+
+
+
+
```
### Product Review
@@ -423,21 +731,21 @@ TODO Page Description
Pullover Sweater
+ $140 +The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.
+
+ Add to cart
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
-
+
I initially had my doubts, but once I got the widgets and played around with them, I became a believer.
+
+
+
```
### Order History
@@ -475,7 +798,7 @@ TODO Page Description
I'd definitely but these again.
+
- 
+ 
+
Kitchen Stool
@@ -490,7 +813,7 @@ TODO Page Description
- 
+ 
+
Succulent
@@ -505,7 +828,7 @@ TODO Page Description
- 
+ 
@@ -586,7 +912,7 @@ TODO Page Description
+
French Roast
@@ -522,6 +845,9 @@ TODO Page Description
Order Summary
- 
+ 
+
Dolce Runners
@@ -607,7 +933,7 @@ TODO Page Description
- 
+ 
+
Dunk High
@@ -628,7 +954,7 @@ TODO Page Description
- 
+ 
+
NB Runner
@@ -671,6 +997,7 @@ TODO Page Description
img {
grid-column: 1/4;
+ width: 100%;
}
.summary-item-info {
diff --git a/docs/docs/patterns/education.md b/docs/docs/patterns/education.md
new file mode 100644
index 000000000..d8448f00f
--- /dev/null
+++ b/docs/docs/patterns/education.md
@@ -0,0 +1,9 @@
+---
+title: Business
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/entertainement.md b/docs/docs/patterns/entertainement.md
index 801d85ad5..12a4789e6 100644
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -1,4 +1,9 @@
---
title: Entertainment
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/index.md b/docs/docs/patterns/index.md
new file mode 100644
index 000000000..abf73e782
--- /dev/null
+++ b/docs/docs/patterns/index.md
@@ -0,0 +1,5 @@
+---
+title: Patterns
+description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: page-outline
+---
\ No newline at end of file
diff --git a/docs/docs/patterns/membership.md b/docs/docs/patterns/membership.md
index 7e3e13642..ce4362f33 100644
--- a/docs/docs/patterns/membership.md
+++ b/docs/docs/patterns/membership.md
@@ -1,4 +1,9 @@
---
title: Membership
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/news.md b/docs/docs/patterns/news.md
index f5a30fcdf..b4cb07f9d 100644
--- a/docs/docs/patterns/news.md
+++ b/docs/docs/patterns/news.md
@@ -1,4 +1,160 @@
---
title: News
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
+### Paywall
+
+```html{.example}
+
+
+ Register
+ Already a subscriber? Login
+
+
+Open Paywall
+
+
+
+
+```
+## Related articles
+```html{.example}
+
+
+
+
+```
+
+## Footer
+```html{.example}
+
+
+
+ 
+
+
+ Title
+Well, the way they make shows is, they make one show. That show's called a pilot.
+ + sub-title +
+
+
+
+
+
+
+
+ Normally, both your asses would be dead as fucking fried chicken.
+ + sub-title +
+
+
+
+
+
+ Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.
+ + sub-title +
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/non-profit.md b/docs/docs/patterns/non-profit.md
index bce00817d..499c9af15 100644
--- a/docs/docs/patterns/non-profit.md
+++ b/docs/docs/patterns/non-profit.md
@@ -1,4 +1,9 @@
---
title: Non-profit
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/portfilio.md b/docs/docs/patterns/portfilio.md
new file mode 100644
index 000000000..d8448f00f
--- /dev/null
+++ b/docs/docs/patterns/portfilio.md
@@ -0,0 +1,9 @@
+---
+title: Business
+description: TODO
+layout: page.njk
+---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/portfolio.md b/docs/docs/patterns/portfolio.md
index e5275586c..fd366aff2 100644
--- a/docs/docs/patterns/portfolio.md
+++ b/docs/docs/patterns/portfolio.md
@@ -1,4 +1,9 @@
---
title: Portfolio
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/docs/patterns/product-landing.md b/docs/docs/patterns/product-landing.md
index a75be52fa..07e24f70c 100644
--- a/docs/docs/patterns/product-landing.md
+++ b/docs/docs/patterns/product-landing.md
@@ -1,4 +1,9 @@
---
title: Product Landing
description: TODO
+layout: page.njk
---
+
+TODO Page Description
+
+## Examples
\ No newline at end of file
diff --git a/docs/src/env.d.ts b/docs/src/env.d.ts
new file mode 100644
index 000000000..9c03f0a2c
--- /dev/null
+++ b/docs/src/env.d.ts
@@ -0,0 +1,2 @@
+///
+
+
+
+
+
+ 
+ 
+
+
+
+ © 2024 All rights reserved.
+