mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
update patterns to isPro
This commit is contained in:
Konnor Rogers
@@ -2,6 +2,7 @@
|
||||
title: Action Panel
|
||||
description: 'Help users complete tasks efficiently with quick access to key actions.'
|
||||
icon: action-panel
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Simple
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Activity Log
|
||||
description: 'Track and organize recent user actions or events.'
|
||||
|
||||
---
|
||||
|
||||
## Simple
|
||||
@@ -260,7 +261,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Comments
|
||||
description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Card with Header & Footer
|
||||
@@ -91,7 +92,7 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
<wa-icon-button name="face-smile" label="Add Sticker" id="sticker-button"></wa-icon-button>
|
||||
<wa-tooltip for="sticker-button">Add Sticker</wa-tooltip>
|
||||
</div>
|
||||
<wa-button variant="brand">Comment</wa-button>
|
||||
<wa-button variant="brand">Comment</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,9 +108,9 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank" style="--flank-size: 3rem">
|
||||
<div class="wa-frame:portrait wa-border-radius-s">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="the cover image for the film"
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="the cover image for the film"
|
||||
/>
|
||||
</div>
|
||||
<span class="wa-heading-l">Heretic</span>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
title: Data Display
|
||||
description: 'Convey insights, metrics, and aggregate data at a glance.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
|
||||
## Simple
|
||||
## Simple
|
||||
```html {.example}
|
||||
<wa-card>
|
||||
<div class="wa-grid wa-gap-3xl" style="--min-column-size: 24ch;">
|
||||
@@ -170,4 +171,4 @@ description: 'Convey insights, metrics, and aggregate data at a glance.'
|
||||
</article>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Description List
|
||||
description: 'Help users digest detailed information in a structured, easy-to-scan format.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Left Aligned
|
||||
@@ -249,4 +250,4 @@ description: 'Help users digest detailed information in a structured, easy-to-sc
|
||||
</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Empty State
|
||||
description: 'Guide users with helpful prompts and visuals when no content is available.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Simple
|
||||
@@ -125,7 +126,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## Add people
|
||||
## Add people
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 60ch; margin: 0 auto;">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
@@ -146,7 +147,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
<span class="wa-caption-m">DevOps</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -162,7 +163,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
<span class="wa-caption-m">Captain</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -178,7 +179,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
<span class="wa-caption-m">Cloud Engineer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -193,7 +194,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
<span class="wa-caption-m">UX Writer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: FAQ
|
||||
description: 'Empower users to learn more with a structured list of questions and answers.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## With Flanked Heading & Description
|
||||
@@ -86,7 +87,7 @@ description: 'Empower users to learn more with a structured list of questions an
|
||||
<dt class="wa-heading-m">How often do you update your courses?</dt>
|
||||
<dd>A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">Do you offer certificates of completion?</dt>
|
||||
<dd>You can download certificates of completion from the <a href="#">Completed Courses</a> 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 <a href="#">Public Profile</a> section in My Account to get started.</dd>
|
||||
@@ -103,16 +104,16 @@ description: 'Empower users to learn more with a structured list of questions an
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">Do you have discounts for students?</dt>
|
||||
<dd>We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to the entire platform.</dd>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do I cancel my plan?</dt>
|
||||
<dd>You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My Account area.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Grid List
|
||||
description: 'Improve browsing and selection by organizing data in a structured grid layout.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Cards with Footer Actions
|
||||
@@ -397,8 +398,8 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-s"><span>Draft</span> <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<wa-card>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -426,12 +427,12 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
Add Task
|
||||
</wa-button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-s"><span>In Progress</span> <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge></div>
|
||||
|
||||
|
||||
<wa-card>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -481,7 +482,7 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
Add Task
|
||||
</wa-button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wa-stack">
|
||||
@@ -508,18 +509,17 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
|
||||
|
||||
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
Add Task
|
||||
</wa-button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -5,4 +5,5 @@ parent: patterns
|
||||
layout: overview
|
||||
override:tags: []
|
||||
listChildren: true
|
||||
isPro: false
|
||||
---
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Leaderboard
|
||||
description: 'Engage and motivate users by highlighting top performers, scores, and achievements.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Simple
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Pagination
|
||||
description: 'Improve navigation and performance by breaking long lists or content into manageable pages.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Simple
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Permissions
|
||||
description: 'Permission patterns provide or restrict access to users.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## With Form Inputs
|
||||
@@ -118,7 +119,7 @@ description: 'Permission patterns provide or restrict access to users.'
|
||||
<wa-button size="small" variant="brand" pill>Generate</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
@@ -170,7 +171,7 @@ description: 'Permission patterns provide or restrict access to users.'
|
||||
<wa-option value="moderator">Moderator</wa-option>
|
||||
<wa-option value="contributor">Contributor</wa-option>
|
||||
<wa-option value="reader">Reader</wa-option>
|
||||
</wa-select>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -222,7 +223,7 @@ description: 'Permission patterns provide or restrict access to users.'
|
||||
</tbody>
|
||||
</table>
|
||||
</wa-tab-panel>
|
||||
|
||||
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Pricing
|
||||
description: 'Help users make informed purchasing decisions with clear, structured pricing.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Three Tiers
|
||||
@@ -164,4 +165,4 @@ description: 'Help users make informed purchasing decisions with clear, structur
|
||||
</wa-callout>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
```
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Blog
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -367,4 +368,4 @@ TODO Page Description
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
```
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Business
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Category Filter
|
||||
description: 'Helps the user find the right products with filters to refine search results by specific attributes.'
|
||||
icon: checkbox
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Sidebar with Checkboxes & Expandable Filters
|
||||
@@ -80,4 +81,4 @@ icon: checkbox
|
||||
</div>
|
||||
<div class="wa-placeholder"></div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Category Preview
|
||||
description: 'Help shoppers discover your product offerings with showcases of product categories.'
|
||||
icon: preview
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Split with Image Grid
|
||||
@@ -159,4 +160,4 @@ icon: preview
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Checkout Form
|
||||
description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
|
||||
@@ -241,4 +242,4 @@ description: 'Let shoppers checkout with ease with streamlined forms to capture
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Incentives
|
||||
description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## 3 Column
|
||||
@@ -120,4 +121,4 @@ description: 'Encourage shoppers to buy your products with value propositions, d
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -4,4 +4,5 @@ description: Pre-built product overviews, shopping carts, and more to help you b
|
||||
parent: patterns
|
||||
layout: overview
|
||||
override:tags: []
|
||||
isPro: false
|
||||
---
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Order History
|
||||
description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## List
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Order Summary
|
||||
description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Simple
|
||||
@@ -291,4 +292,4 @@ description: 'Give shoppers confidence in their purchases with summaries of ever
|
||||
</div>
|
||||
</wa-callout>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Product Lists
|
||||
description: 'Let shoppers browse and compare products with detailed lists of the products in your store.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Simple Grid with Ratings
|
||||
@@ -179,4 +180,4 @@ description: 'Let shoppers browse and compare products with detailed lists of th
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Product Overview
|
||||
description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Split with Image
|
||||
@@ -426,4 +427,4 @@ description: 'Showcase your products with overviews including images, ratings, f
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Product Preview
|
||||
description: 'Give shoppers a quick look at your products as they browse with modal previews.'
|
||||
icon: preview
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## With Product Options
|
||||
@@ -157,4 +158,4 @@ icon: preview
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Product Reviews
|
||||
description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
|
||||
isPro: true
|
||||
---
|
||||
## Multi column
|
||||
|
||||
@@ -208,4 +209,4 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Shopping Cart
|
||||
description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.'
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Two Columns with Summary Card
|
||||
@@ -274,4 +275,4 @@ description: 'Give shoppers an overview of selected items with shopping carts th
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-drawer>
|
||||
```
|
||||
```
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Store Navigation
|
||||
description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
## Popup Menu
|
||||
@@ -81,4 +82,4 @@ unlisted: true
|
||||
|
||||
|
||||
</style>
|
||||
```
|
||||
```
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Business
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Entertainment
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -3,6 +3,7 @@ title: Patterns
|
||||
description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
isPro: false
|
||||
---
|
||||
|
||||
<div class="max-line-length">
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Membership
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -2,6 +2,7 @@
|
||||
title: News
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -157,4 +158,4 @@ TODO Page Description
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Non-profit
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -2,5 +2,6 @@
|
||||
"layout": "patterns.njk",
|
||||
"tags": ["patterns"],
|
||||
"wide": true,
|
||||
"noAlpha": true
|
||||
"noAlpha": true,
|
||||
"isPro": true
|
||||
}
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Portfolio
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -2,8 +2,9 @@
|
||||
title: Product Landing
|
||||
description: TODO
|
||||
unlisted: true
|
||||
isPro: true
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -10,7 +10,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@floating-ui/dom": "^1.6.12",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@shoelace-style/animations": "^1.2.0",
|
||||
"@shoelace-style/localize": "^3.2.1",
|
||||
"composed-offset-position": "^0.0.6",
|
||||
|
||||
Reference in New Issue
Block a user