-
- 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 templates
-
-### With recommendations grid
diff --git a/docs/docs/patterns/app/action-panel.md b/docs/docs/patterns/app/action-panel.md
new file mode 100644
index 000000000..becd5b04e
--- /dev/null
+++ b/docs/docs/patterns/app/action-panel.md
@@ -0,0 +1,69 @@
+---
+title: Action Panel
+description: 'Help users complete tasks efficiently with quick access to key actions.'
+icon: action-panel
+---
+
+## Simple
+
+```html {.example}
+
+
+
New Dashboard
+
Arrange your data into a single view to monitor trends and track performance.
+
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/app/activity-log.md b/docs/docs/patterns/app/activity-log.md
new file mode 100644
index 000000000..b802dff53
--- /dev/null
+++ b/docs/docs/patterns/app/activity-log.md
@@ -0,0 +1,335 @@
+---
+title: Activity Log
+description: 'Track and organize recent user actions or events.'
+---
+
+## Simple
+
+```html {.example}
+
+
+
+
+
+ Fast food
+
+
+
+ - $5.00
+
+
+
+
+
+
+ Refund
+
+
+
+ + $48.99
+
+
+
+
+
+
+ Groceries
+
+
+
+ - $115.37
+
+
+
+
+
+
+ Clothing
+
+
+
+ - $220.99
+
+
+```
+
+## Timeline with Icons
+
+```html {.example}
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/app/app.json b/docs/docs/patterns/app/app.json
new file mode 100644
index 000000000..ec69525f8
--- /dev/null
+++ b/docs/docs/patterns/app/app.json
@@ -0,0 +1,3 @@
+{
+ "tags": ["app"]
+}
diff --git a/docs/docs/patterns/app/comments.md b/docs/docs/patterns/app/comments.md
new file mode 100644
index 000000000..d0268690e
--- /dev/null
+++ b/docs/docs/patterns/app/comments.md
@@ -0,0 +1,164 @@
+---
+title: Comments
+description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
+---
+
+## Card with Header & Footer
+
+```html {.example}
+
+```
+
+## Card with Thread
+
+```html {.example}
+
+
+
Comments
+
+ Add Comment
+
+
+
+
+
+
+ Robert Fox
+ commented
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+
+
+
+
+
+
+
+ Virginia Woolf
+ commented
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.
+
+
+
+
+
+ Clarissa Vaughan
+ commented
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/app/data-display.md b/docs/docs/patterns/app/data-display.md
new file mode 100644
index 000000000..34cbedf38
--- /dev/null
+++ b/docs/docs/patterns/app/data-display.md
@@ -0,0 +1,173 @@
+---
+title: Data Display
+description: 'Convey insights, metrics, and aggregate data at a glance.'
+---
+
+
+## Simple
+```html {.example}
+
+
+
+
+
+
+ Incomes
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Expenses
+
+
+
+
+
+
+
+
+
+
+
+
+ Investments
+
+
+
+
+
+
+
+
+
+
+
+
+ Mortgages & Loans
+
+
+
+
+
+
+```
+
+## Cards with Avatars
+```html {.example}
+
+
+```
diff --git a/docs/docs/patterns/app/description-list.md b/docs/docs/patterns/app/description-list.md
new file mode 100644
index 000000000..f98b24c62
--- /dev/null
+++ b/docs/docs/patterns/app/description-list.md
@@ -0,0 +1,252 @@
+---
+title: Description List
+description: 'Help users digest detailed information in a structured, easy-to-scan format.'
+---
+
+## Left Aligned
+
+```html {.example}
+
+
Applicant Info
+
Details about the applicant and attachments.
+
+
+
+
Full name
+
Bucky Barnes
+
+
+
Application for
+
Machine Learning Engineer
+
+
+
Email address
+
winter_soldier@example.com
+
+
+
Salary expectation
+
$240,000
+
+
+
About
+
After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
+
+
+
+
Attachments
+
+
+
+
+
+
+
+ bb_resume.pdf
+ 2.4mb
+
+ Download
+
+
+
+
+
+
+
+ bb_cover_letter.pdf
+ 2.4mb
+
+ Download
+
+
+
+
+
+
+
+
+```
+
+## Two Column
+
+```html{.example}
+
+
Applicant Info
+
Details about the applicant and attachments.
+
+
+
+
Full name
+
Bucky Barnes
+
+
+
Application for
+
Machine Learning Engineer
+
+
+
Email address
+
winter_soldier@example.com
+
+
+
Salary expectation
+
$240,000
+
+
+
About
+
After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
+
+
+
+
Attachments
+
+
+
+
+
+
+
+ bb_resume.pdf
+ 2.4mb
+
+ Download
+
+
+
+
+
+
+
+ bb_cover_letter.pdf
+ 2.4mb
+
+ Download
+
+
+
+
+
+
+
+
+```
+
+## Left Aligned with Actions
+
+```html {.example}
+
+
Applicant Info
+
Details about the applicant and attachments.
+
+
+
+
Full name
+
+
Bucky Barnes
+ Edit
+
+
+
+
Application for
+
+
Machine Learning Engineer
+ Edit
+
+
+
+
Email address
+
+
winter_soldier@example.com
+ Edit
+
+
+
+
Salary expectation
+
+
$240,000
+ Edit
+
+
+
+
About
+
+
After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I love, and I'm always striving to atone for those dark days as the Winter Soldier.
This project is awful lonely. Invite some team members to liven up the joint.
+
+ Invite
+
+
+ Team members previously added to projects
+
+
+
+
+
+
+ Earl Upton
+ DevOps
+
+
+
+ Invite
+
+
+
+
+
+
+
+
+
+
+ Steamboat Willie
+ Captain
+
+
+
+ Invite
+
+
+
+
+
+
+
+
+
+
+ Melissa Eckers
+ Cloud Engineer
+
+
+
+ Invite
+
+
+
+
+
+
+
+
+
+ Devin Shears
+ UX Writer
+
+
+
+ Invite
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/app/faq.md b/docs/docs/patterns/app/faq.md
new file mode 100644
index 000000000..7d80d1067
--- /dev/null
+++ b/docs/docs/patterns/app/faq.md
@@ -0,0 +1,118 @@
+---
+title: FAQ
+description: 'Empower users to learn more with a structured list of questions and answers.'
+---
+
+## With Flanked Heading & Description
+
+```html {.example}
+
+
+
Frequently Asked Questions
+
Can’t find an answer? Reach out to your local Operator, or contact the Oracle, and enjoy a cookie. 🍪
+
+
+
+
Is Zion actually real, or just another Matrix?
+
Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?
+
+
+
Why do the Agents always wear suits?
+
Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+
+
+
Can I go back into the Matrix once I’m out?
+
Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.
+
+
+
+```
+
+## With Expandable Answers
+
+```html {.example}
+
+
Frequently Asked Questions
+
+
Is Zion actually real, or just another Matrix?
+ Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?
+
+
+
+
Why do the Agents always wear suits?
+ Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+
+
+
+
Can I go back into the Matrix once I’m out?
+ Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.
+
+
+```
+
+## Two Column
+
+```html {.example}
+
+
Frequently Asked Questions
+
+
+
Is Zion actually real, or just another Matrix?
+
Ah, the question that keeps redpills up at night. Sure, we escaped the first Matrix, but who’s to say Zion isn’t just another layer of the simulation?
+
+
+
+
Why do the Agents always wear suits?
+
Because nothing says "unstoppable digital enforcer" like a generic business professional aesthetic. Also, intimidation. You ever try fighting someone in sunglasses and a tie? It’s terrifying.
+
+
+
+
Can I go back into the Matrix once I’m out?
+
Technically, yes—via hacking in. Emotionally? That depends on how well you handle the knowledge that nothing around you is real.
+
+
+
+```
+
+## Multiple Columns
+```html{.example}
+
+
+
Frequently Asked Questions
+
+
+
+
+
How often do you update your courses?
+
A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our workshop list to see if a new version of a given course is on the schedule. You may also write to us as support@frontendmasters.com with suggestions for updates.
+
+
+
+
Do you offer certificates of completion?
+
You can download certificates of completion from the Completed Courses list in your Learning Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public Profiles are available to members with an active Frontend Masters subscription who have watched ten or more hours of content. Visit the Public Profile section in My Account to get started.
+
+
+
+
Do you offer a free trial?
+
+
We offer a free trial to first-time subscribers. You can find more about the trial here.
+
We also have the following opportunities to learn for free:
+
+
The online bootcamp is a free, two-week curriculum to get you started with web development.
+
You can create a free account to gain access to five full courses for free.
+
+
+
+
+
+
Do you have discounts for students?
+
We are part of the GitHub Student Developer Pack, allowing students six months of free access to the entire platform.
+
+
+
+
How do I cancel my plan?
+
You can cancel your Frontend Masters subscription by visiting the Subscription tab in your My Account area.
+
+
+
+```
diff --git a/docs/docs/patterns/app/grid-list.md b/docs/docs/patterns/app/grid-list.md
new file mode 100644
index 000000000..c50441786
--- /dev/null
+++ b/docs/docs/patterns/app/grid-list.md
@@ -0,0 +1,525 @@
+---
+title: Grid List
+description: 'Improve browsing and selection by organizing data in a structured grid layout.'
+---
+
+## Cards with Footer Actions
+
+```html {.example}
+
+
+
+
+
+
Barklia Woofington
+ Admin
+
+ Canine Executive Officer
+
+
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
+
Maggie Pawsworth
+ Admin
+
+ Canine Fetch Officer
+
+
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
Rex Tailwag
+ Head of Security
+
+
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
Luna Sniffington
+ Hound Relations
+
+
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
Charlie Drooler
+ Head of Sales
+
+
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
Daisy Zoomley
+ IT Support
+
+
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+```
+
+## Cards with Footer Actions & Large Image
+
+```html {.example}
+
+
+
+
+
+
+
Scott Summers
+
DevOps
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
+
+
Kaitlin Moore
+
Systems Engineer
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
+
+
Nessa Riley
+
Cloud Engineer
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+
+
+
+
+
Veronica Staley
+
Machine Learning Engineer
+
+
+
+
+ Email
+
+
+
+ Phone
+
+
+
+
+```
+## with Images
+```html {.example}
+
+
+
+
+
+
+ Jeff Hanks
+ Product Designer
+
+
+
+
+
+
+
+
+
+
+
+ Allen Bryant
+ Staff Engineer
+
+
+
+
+
+
+
+
+
+
+
+ Mariah Greene
+ DevOps
+
+
+
+
+
+
+
+
+
+
+
+ Beverly Winslow
+ Design Systems Lead
+
+
+
+
+
+
+
+
+
+
+
+ Eric Masterson
+ Copy Writer
+
+
+
+
+
+
+
+
+
+
+
+ Stephen Coffee
+ Visual Designer
+
+
+
+
+
+
+
+```
+## Linked Cards with Options Menu
+
+```html{.example}
+
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/app/pagination.md b/docs/docs/patterns/app/pagination.md
new file mode 100644
index 000000000..4959485df
--- /dev/null
+++ b/docs/docs/patterns/app/pagination.md
@@ -0,0 +1,51 @@
+---
+title: Pagination
+description: 'Improve navigation and performance by breaking long lists or content into manageable pages.'
+---
+
+## Simple
+
+```html {.example}
+
+
+
+
+ Showing 1 to 10 of 50 Results
+
+
+
+ Prev
+
+
+
+ Next
+
+
+
+
+```
+
+## With Button Group
+
+```html {.example}
+
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/app/permissions.md b/docs/docs/patterns/app/permissions.md
new file mode 100644
index 000000000..7e348d396
--- /dev/null
+++ b/docs/docs/patterns/app/permissions.md
@@ -0,0 +1,228 @@
+---
+title: Permissions
+description: 'Permission patterns provide or restrict access to users.'
+---
+
+## With Form Inputs
+```html{.example}
+
+
+
Invite Team Members
+
+
+
+
+
+ Send Invite
+
+
+
+ Project Members
+
+
+
+
+
+ Jessica Jones
+ jessica.jones@example.com
+
+
+ Owner
+ Admin
+ Can Edit
+ View Only
+
+
+
+
+
+
+
+ Foggy Nelson
+ foggy.nelson@example.com
+
+
+ Owner
+ Admin
+ Can Edit
+ View Only
+
+
+
+
+
+
+
+ Karen Page
+ karen.page@example.com
+
+
+ Owner
+ Admin
+ Can Edit
+ View Only
+
+
+
+
+
+
+
+ Matt Murdock
+ matt.murdock@example.com
+
+
+ Owner
+ Admin
+ Can Edit
+ View Only
+
+
+
+
+
+
+
+
+
+
+ Copy Link
+
+
+
+
+```
+
+## Link Settings
+```html {.example}
+
+
-
-```
-## 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
deleted file mode 100644
index 3cbef3640..000000000
--- a/docs/docs/patterns/ecommerce-product-review.md
+++ /dev/null
@@ -1,465 +0,0 @@
----
-title: Product Reviews
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With images grid
-```html{.example}
-
-
- Clothing
- Men's
- Shirts & Tops
-
-
-
-
-
-
-
-
-
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.
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.
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.
-
-
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.
- In stock and ready to ship
-
-
-
-
-
-
-
-
- Option 1
- Option 2
- Option 3
-
-
-
-
-```
-## With tabs
-
-```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.
- Brand
-
-Success
-
-
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
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.
-
-
- This is the custom tab panel.
- This is the advanced tab panel.
- This is a disabled tab panel.
-
-
-
*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.
-
-
-
-
-Open Dialog
-
-
-
-
-```
-
-## Mega Menu
-
-```html{.example}
-
- Shop
-
-
- Shop by Department
- Mens
- Womens
- Kids
-
- Infants
-
- Newborns
- 6 Months
- 12 Months
-
-
- Big & Tall
-
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.
-
- Black
-
- White
- Gray
-
-
- 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.
-
-
Explore brand new furniture to accentuate your home aesthetic — just for you.
+
+
+
+
+
+
+ View Indoor Furniture
+
+
+
+
+
+ View Outdoor Furniture
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/checkout-form.md b/docs/docs/patterns/ecommerce/checkout-form.md
new file mode 100644
index 000000000..4e9e736f2
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/checkout-form.md
@@ -0,0 +1,244 @@
+---
+title: Checkout Form
+description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
+---
+
+
+## Full Form with Order Summary Card
+
+```html {.example}
+
+
+
Contact
+
+
+
Shipping
+
+ Canada
+ Mexico
+ United States
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Standard
+ Express
+
+
+
Payment
+
+ Credit Card
+ Paypal
+
+
+
+
+
+
+
+
+
+
Order Summary
+
+
+
+
+
+
+
+
+ Dolce Runners
+
+
+ Cream/Seafoam
+ 12.5
+
+ $135.00
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+
+
+
+
+ Dunk High
+
+
+ Sand/Amber/Black
+ 12.5
+
+ $180.00
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+
+
+
+
+ NB Runner
+
+
+ Forrest Green
+ 12.5
+
+ $48.99
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+ Subtotal
+ $363.99
+
+
+ Shipping
+ FREE
+
+
+ Total
+ $363.99
+
+
+
+ Confirm Order
+
+
+
+
+```
+
+## Short Form with Order Summary
+
+```html {.example}
+
+
+
Payment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Canada
+ United States
+ Mexico
+
+
+
+
+
+ Sign me up for more offers from this store
+ Pay Now
+
+
+
Order Summary
+
+
+
+
+
+ Morpheus
+
+
+
+ $120.00
+
+
+
+
+
+
+
+
+ Seraph
+ Tinted
+
+
+
+
+ $180.00
+
+
+
+
+
+
+
+
+ Keymaker
+ Glossy
+
+
+
+
+ $50.00
+
+
+
+
+ Apply
+
+
+
+ Subtotal
+ $530.00
+
+
+ Shipping
+ $8.00
+
+
+ Total
+ $538.00
+
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/ecommerce.json b/docs/docs/patterns/ecommerce/ecommerce.json
new file mode 100644
index 000000000..be5dbdf49
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/ecommerce.json
@@ -0,0 +1,3 @@
+{
+ "tags": ["ecommerce"]
+}
diff --git a/docs/docs/patterns/ecommerce/incentives.md b/docs/docs/patterns/ecommerce/incentives.md
new file mode 100644
index 000000000..18b603358
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/incentives.md
@@ -0,0 +1,123 @@
+---
+title: Incentives
+description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
+---
+
+## 3 Column
+
+```html{.example}
+
+
+
+ Unlock your Superpower
+
Web development is like a superpower—you can turn your ideas into actual products online, and learning it from home means you don’t need a fancy degree or expensive tuition to start building your future.
+
+
+
+
+
+
+
+
+
+ Career Opportunities
+
Mastering web development can lead to high-paying jobs, freelancing gigs, or even launching your own business or app.
+
+
+
+ Flexibility of Online Learning
+
Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes
+
+
+
+ Creative & Practical Skillset
+
You can build real, functional things like personal portfolios, blogs, or web apps—and immediately see your progress.
+
+
+
+```
+## 2 Column with Cards
+
+```html{.example}
+
+
+
+
+
+
+
+ Hands-on training
+
Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.
+
+
+
+
+
+
+
+
+
+ Certification prep
+
Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way
+
+
+
+
+
+
+
+
+
+
+ Insights and analytics
+ Pro Plan
+
+
Fast-track goals with advanced insights plus a dedicated customer success team to help drive effective learning.
+
+
+
+
+
+
+
+
+
+
+ Customizable content
+ Pro Plan
+
+
Create tailored learning paths for team and organization goals and even host your own content and resources.
+
+
+
+
+```
+
+## 4 Column
+
+```html{.example}
+
+
+
+
+ In-Demand Skills
+
Learn skills that lead to well-paying jobs, freelance work, or remote opportunities.
+
+
+
+ Learn Anytime, Anywhere
+
Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.
+
+
+
+ Build and Launch Your Own Projects
+
You’re not just learning theory—you’re creating real, functional websites and apps.
+
+
+
+ Low-Cost Entry
+
You don’t need a tech degree or expensive tools to get started
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/index.njk b/docs/docs/patterns/ecommerce/index.njk
new file mode 100644
index 000000000..1e93a34e3
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/index.njk
@@ -0,0 +1,7 @@
+---
+title: Ecommerce
+description: Pre-built product overviews, shopping carts, and more to help you build high-converting storefronts.
+parent: patterns
+layout: overview
+override:tags: []
+---
diff --git a/docs/docs/patterns/ecommerce/order-history.md b/docs/docs/patterns/ecommerce/order-history.md
new file mode 100644
index 000000000..1a5055fb9
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/order-history.md
@@ -0,0 +1,250 @@
+---
+title: Order History
+description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+---
+
+## List
+
+```html {.example}
+
+
Order History
+
Check the status of recent orders, manage returns, and download invoices.
+
+
+
Order number
+
WU88191111
+
+
+
Date placed
+
January 22, 2021
+
+
+
Total amount
+
$590.00
+
+
+ View Order
+ View Invoice
+
+
+
+
+
+
+
+
+
+ Dome Light Fixtures
+ $215.00
+
+
Illuminate your space with elegance and style with stunning Dome Light Fixtures. The shape of these lights complements both modern and traditional interiors.
+
+ Delivered
+
+ View Product
+ Buy Again
+
+
+
+
+
+
+
+
+
+
+
+ Reading Chair
+ $115.00
+
+
Add a pop of color and a touch of elegance to any room with our Reading Chair featuring vibrant yellow fabric upholstery.
+
+ Out for delivery
+
+ View Product
+ Buy Again
+
+
+
+
+
+
+
+
+
+
+
+ Custom Sofa
+ $260.00
+
+
Experience luxury and comfort like never before with our Custom Sofa, designed to elevate any living space. This sofa features exquisite velvet upholstery for an air of sophistication.
+```
\ No newline at end of file
diff --git a/docs/docs/patterns/ecommerce/order-summary.md b/docs/docs/patterns/ecommerce/order-summary.md
new file mode 100644
index 000000000..566e1ca31
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/order-summary.md
@@ -0,0 +1,294 @@
+---
+title: Order Summary
+description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
+---
+
+## Simple
+```html {.example}
+
+
+ Payment Successful
+
+
+
+
+
Thank you for ordering from us!
+
We're processing your order now. A confirmation email will be sent to you momentarily!
+
+
Order #
+
49548790-24545
+
+
+
+
+
+
+
+
+
+
+ Spotted Flower Pot
+ $75.00
+
+
+
+
+
+
+
+
+ Decorative Vase
+ $51.00
+
+
+
+
+
+
+
Subtotal
+
$126.00
+
+
+
Shipping
+
$8.00
+
+
+
Taxes
+
$6.40
+
+
+
Total
+
$140.40
+
+
+
+
+
+
Shipping Address
+
+
+ Donna Noble
+ 56 Front Street
+ Las Cruces, NM 56929
+
+
+
Payment Information
+
+
+ Ending with 9065
+
+
+
+
+
+
+
+
+ Continue Shopping
+
+
+```
+
+## With Details
+
+```html {.example}
+
+
Order Details
+
+
+ Order placed
+
+ Order # 45646456-4656-4542
+
+ View Invoice
+
+
+
+
+
Shipping Address
+
+ Johnny Blaze
+ 200 Park Avenue
+ Manhattan, NY 45789-3412
+ United States
+
+ Change
+
+```
diff --git a/docs/docs/patterns/ecommerce/product-overview.md b/docs/docs/patterns/ecommerce/product-overview.md
new file mode 100644
index 000000000..8d803da92
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/product-overview.md
@@ -0,0 +1,429 @@
+---
+title: Product Overview
+description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
+---
+
+## Split with Image
+
+```html {.example}
+
+
+
San Ignacio Pache
+
A smooth, balanced Arabica varietal, grown and roasted on the Guerrero family's farm. Rich caramel and malt flavors blend with bright citrus for a complex brew suitable for drip, pour over, espresso, or however you take your coffee.
Made with a breathable, stretchy fabric blend for unparalleled comfort and flattering style. Pairs perfectly with your favorite high-waisted jeans for lazy summer weekends or lively nights out.
+
+
Good to Know
+
95% cotton, 5% elastane. Our tops are pre-shrunk to ensure a consistent fit with no surprises. Machine wash cold. Tumble dry low.
+
+
+
+
+
+
+ Black
+
+
+
+ Gray
+
+
+
+ Indigo
+
+
+
+ Olive
+
+
+
+ XS
+ S
+ M
+ L
+ XL
+
+
+
+ Add to Cart
+
+
+
+
+```
+
+## With Tiered Images
+
+```html {.example}
+
+
+
+
+ Vintage Black
+
+
+
+ Faded Gray
+
+
+
+ XS
+ S
+ M
+ L
+ XL
+
+
+
+ Add to Bag
+
+
+
Description
+
Stay cool, slay cool. Train hard and recover in style with this ultra-breathable cutoff tee. Made from 100% organic, quick-drying cotton to keep the air flowing whether you're lifting, sprinting, or crushing HIIT sessions.
+
+
Highlights
+
+
+
+
+
People and Planet First
+
Ethical production, fair wages, and sustainable materials empower every part of our supply chain.
+
+
+
+
+
+
International Shipping
+
Wherever you are, your order will meet you there.
+
+
+
+
+
+
90-day Returns
+
Not happy? Return your item and get a full refund.
+
+
+
+
+
+
+```
+
+## With Carousel and Collapsible Details
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Pullover Sweater
+ $140
+
+
+
Wrap yourself in warmth and effortless style with this wool knit Pullover Sweater. Designed for unparalleled comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.
+
+
+
+ Sand
+
+
+
+ Shale
+
+
+
+ Slate
+
+
+
+ XS
+ S
+ M
+ L
+ XL
+
+ Add to Cart
+
+
+
+
+
True to size with a relaxed fit
+
Fits all shoulder shapes, broad to narrow
+
No pinching in the arms or irritating seams
+
Ribbed cuffs and hem
+
+
+
+
+
Durable Merino and Yak wool blend
+
Machine wash cold on delicate cycle
+
Lay flat to dry
+
Made with in Bentonville, USA
+
+
+
+
+
Flat $9 shipping free for orders under $200.
+
Free shipping on orders over $200, anywhere in the world.
+
+
+
+
+
+```
+
+
+## With Tabs
+
+```html {.example}
+
+
+
+
+ License
+ FAQ
+
+
Your purchase includes a perpetual Font Awesome Pro License to use Classic Light icons on unlimited projects. Read the full license terms.
+
+
+
+
Do I need to renew my subscription to receive fixes?
+
We split up Font Awesome releases into regular updates and bug-fix updates. With a Font Awesome Pro plan that has a perpetual license, you'll always be entitled to bug-fix updates for your last version, even after your subscription has expired.
+
Can I use Font Awesome Pro in themes, plug-ins, or open source projects?
+
For themes and open source projects, right now it's best to just use Font Awesome Free. We are working a better solution, so feel free to get in touch if you have thoughts.
+
Do you offer enterprise licenses for Font Awesome Pro?
+
We don't currently offer Enterprise-level licenses, but we may do so in the future. Get in touch if interested.
+
+
+
+
+
+ Sale
+
Icon Pack: Classic Light
+
Easy, readable icons with a lighter touch.
+
+ $60
+ $49
+
+
+
+ Get Icons
+
+
+
What's in the Pack
+
+
+
+ 3,323 icons
+
+
+
+ Pre-bundled Font Awesome kit
+
+
+
+ Ligature-based desktop font files
+
+
+
+ Individual SVGs + SVG sprites
+
+
+
+ Web fonts + SVG framework
+
+
+
+ SCSS/LESS CSS preprocessor files
+
+
+
+ Perpetual Pro license
+
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/product-preview.md b/docs/docs/patterns/ecommerce/product-preview.md
new file mode 100644
index 000000000..55e62233e
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/product-preview.md
@@ -0,0 +1,160 @@
+---
+title: Product Preview
+description: 'Give shoppers a quick look at your products as they browse with modal previews.'
+icon: preview
+---
+
+## With Product Options
+
+```html {.example}
+
+
The Champion® Crossbody Bag is crafted for the trendsetter. Its sleek silhouette, paired with a tonal branded adjustable sling strap, ensures you look effortlessly cool no matter where you go.
+
+
+
+
Details
+
+
+
Care Instructions
+
Hand Wash Only
+
+
+
Origin
+
Imported
+
+
+
Country of Origin
+
China
+
+
+
+
+
+
+ Add to Cart
+
+
+ View Full Details
+
+
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/review.md b/docs/docs/patterns/ecommerce/review.md
new file mode 100644
index 000000000..bb4c1e03e
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/review.md
@@ -0,0 +1,211 @@
+---
+title: Product Reviews
+description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
+---
+## Multi column
+
+```html{.example}
+
+ Recent Reviews
+
+
+
+ Viktor Vaughn
+
+
+
+
+
+ Solid treadmill for home workouts!
+
Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!
+
+
+
+
+
+
+ Ben Grimm
+
+
+
+
+
+ Good value, a few minor flaws
+
Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.
+
+
+
+
+
+
+ Johnny Storm
+
+
+
+
+
+ Decent, but could use upgrades
+
This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.
+
+
+
+
+
+
+ Sue Storm
+
+
+
+
+
+ Perfect for small spaces
+
I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!
+
+
+
+
+```
+## With Ratings Distribution
+
+```html {.example}
+
I bought this grow light for my herbs and succulents, and wow—what a difference. After just a week, my basil perked up, and new leaves started popping up. Super easy to set up and doesn’t get too hot. Highly recommend for anyone growing indoors!
+
+
+
+
+
+
+ Doug Michaels
+
+
+
+
This light really helps my plants grow during the winter months. The brightness is strong, and I love the adjustable height. The only downside is the timer—it resets if you unplug it. Otherwise, great value for the price!
+
+
+
+
+
+
+ Stephanie Hurst
+
+
+
+
I don’t get much natural light in my apartment, so this grow light has been a game-changer. I’m using it for my small tomato plants and some lettuce, and they’re growing faster than expected. Plus, the light isn’t too harsh on the eyes
+
+
+
+
+
+
+ Miles Rogers
+
+
+
+
I’ve tried a few grow lights, and this one is my favorite. It stays cool, uses less power, and my peace lilies and spider plants are growing beautifully. I just wish it came in more color options for the stand, but performance-wise, it’s excellent.
+
+
+
+
+```
+
+## Two Column
+
+```html{.example}
+
+
+
+
+
Ripley
+
+
+
+
+
+
+
+
I recently purchased the Modern Sofa Couch, and I couldn't be happier with my decision! The process from ordering to delivery was smooth and hassle-free
+
+
+
+
+
+
+
+
Kane
+
+
+
+
+
+
+
+
The cushions are soft yet supportive, and the sectional layout gives plenty of space to stretch out. It’s perfect for movie nights or just lounging with a good book.
+
+
+
+
+
+
+
+
Parker
+
+
+
+
+
+
+
+
The leather is high quality, but it’s a little firmer than I thought. That said, after sitting on it for a while, it does soften up and feels more comfortable. It’s perfect if you’re looking for a more structured seating experience.
+
+
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/shopping-cart.md b/docs/docs/patterns/ecommerce/shopping-cart.md
new file mode 100644
index 000000000..61ccfb182
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/shopping-cart.md
@@ -0,0 +1,277 @@
+---
+title: Shopping Cart
+description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.'
+---
+
+## Two Columns with Summary Card
+
+```html {.example}
+
+
Shopping Cart
+
+
+
+
+
+
+
+
+
Classic Tee
+ Sage Green
+ Large
+ $20.00
+
+
+ Remove
+
+
+
+
+
+
+
+
+
RVCA Graphic
+ White
+ Large
+ $25.00
+
+
+ Remove
+
+
+
+
+
+
+
+
+
Stay Wild Graphic
+ Black
+ Large
+ $18.00
+
+
+ Remove
+
+
+
+
+
+
Order Summary
+
+
+
+ Subtotal
+ $63.00
+
+
+
+ Shipping
+ $5.00
+
+
+
+ Tax
+ $5.50
+
+
+
+ Total
+ $73.50
+
+ Checkout
+
+
+
+
+
+```
+
+## Single Column
+
+```html {.example}
+
+
Your Cart
+
+
+
+
+
+
+
+
+
Convertible
+ $32.00
+
+ Cherry Red
+
+
+ In Stock
+
+
+ Remove
+
+
+
+
+
+
+
+
+
+
+
+
+
Racers (3 Pack)
+ $80.00
+
+ Assorted Colors
+
+
+ In Stock
+
+
+ Remove
+
+
+
+
+
+
+
+
+
+
+
+
+
Volkswagen T2
+ $60.00
+
+ Red/White
+
+
+ Low Stock
+
+
+ Remove
+
+
+
+
+
+
+
+
Subtotal
+ $172.00
+
+ Shipping and taxes calculated at checkout
+ Checkout
+
+ Shipping and taxes calculated at checkout.
+ Checkout
+
+ Continue Shopping
+
+
+
+
+```
diff --git a/docs/docs/patterns/ecommerce/store-navigation.md b/docs/docs/patterns/ecommerce/store-navigation.md
new file mode 100644
index 000000000..4a9c32503
--- /dev/null
+++ b/docs/docs/patterns/ecommerce/store-navigation.md
@@ -0,0 +1,84 @@
+---
+title: Store Navigation
+description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
+unlisted: true
+---
+
+## Popup Menu
+
+```html{.example}
+
+ Shop
+
+
+ Shop by Department
+ Mens
+ Womens
+ Kids
+
+ Infants
+
+ Newborns
+ 6 Months
+ 12 Months
+
+
+ Big & Tall
+
+
+
+
+
+
+
+
+
+```
diff --git a/docs/docs/patterns/education.md b/docs/docs/patterns/education.md
index 6880e58c9..405d0e4f2 100644
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -1,6 +1,7 @@
---
title: Business
description: TODO
+unlisted: true
---
TODO Page Description
diff --git a/docs/docs/patterns/entertainement.md b/docs/docs/patterns/entertainement.md
index a7e2c23af..0c501426f 100644
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -1,6 +1,7 @@
---
title: Entertainment
description: TODO
+unlisted: true
---
TODO Page Description
diff --git a/docs/docs/patterns/index.njk b/docs/docs/patterns/index.njk
index e51a1f6ce..ec87fb460 100644
--- a/docs/docs/patterns/index.njk
+++ b/docs/docs/patterns/index.njk
@@ -1,6 +1,27 @@
---
title: Patterns
-description: Patterns are reusable solutions to common design problems.
+description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
layout: overview
override:tags: []
---
+
+
+{% markdown %}
+
+## What's a Pattern?
+
+A pattern is a code snippet composed of components, style utilities, and native HTML that you can copy and paste into any project that uses Web Awesome.
+It's a chunk of a user interface, rather than a single component, that allows you to implement UI solutions without designing something from scratch.
+
+Patterns are designed according to proven usability practices so they're responsive, accessible, and cohesive out-of-the-box. Importantly, patterns don't handle business logic or functionality like form submissions, data processing, encryption, etc. It's up to you to implement the logic you need for your project.
+
+Patterns are written as standard HTML, so you can use them just as you would any ol' HTML and customize them to fit your specific needs.
+
+## Using Patterns
+
+To use a pattern in your project, refer to each pattern's docs for a copyable code snippet. Paste the snippet wherever you'd like the pattern to appear in your project.
+
+Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/installation) to set up all of these features in your project.
+
+{% endmarkdown %}
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
-
- 
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+