mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
10 Commits
kj/e-comme
...
kj/app-pat
| Author | SHA1 | Date | |
|---|---|---|---|
|
c3de5a8915 | ||
|
|
c18aa23d76 | ||
|
|
54e14a20c0 | ||
|
|
55a362b741 | ||
|
|
81bf6865ec | ||
|
|
27237441a1 | ||
|
|
b0291653f8 | ||
|
|
7f29f1b4ea | ||
|
|
9ad7f4a6be | ||
|
|
a7457630aa |
File diff suppressed because it is too large
Load Diff
43
docs/docs/patterns/app/action-panel.md
Normal file
43
docs/docs/patterns/app/action-panel.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Action Panel
|
||||
description: 'These patterns help add user actions to dashboards'
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 480px; margin: 0 auto;">
|
||||
<div class="wa-align-items-start wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">New Dashboard</h3>
|
||||
<p>Arrange your data into a single view.</p>
|
||||
<wa-button variant="brand">Build Dashboard</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
### with right flank
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Query with the SQL Runner</h3>
|
||||
<p>Access your database to run ad-hoc queries.</p>
|
||||
</div>
|
||||
<wa-button appearance="outlined">New Query</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
### with switch
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Auto-renew</h3>
|
||||
<p>We'll send you a reminder 30 days before we draft your account.</p>
|
||||
</div>
|
||||
<wa-switch size="large"></wa-switch>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
75
docs/docs/patterns/app/comments.md
Normal file
75
docs/docs/patterns/app/comments.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Comments
|
||||
description: 'For feedback forms and message boxes'
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### In card with footer
|
||||
```html{.example}
|
||||
<form class="comment-box" style="max-width: 960px; margin: 0 auto;">
|
||||
<wa-card with-footer>
|
||||
<wa-textarea resize="horizontal"></wa-textarea>
|
||||
<div slot="footer" class="wa-cluster" style="justify-content: flex-end;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
|
||||
Attach a file
|
||||
</wa-button>
|
||||
<wa-button variant="success">Comment</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
</form>
|
||||
```
|
||||
|
||||
### with avatar and icon buttons
|
||||
```html{.example}
|
||||
<div class="wa-callout wa-neutral wa-outlined" style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-align-items-start wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="User avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<wa-textarea placeholder="Add to the conversation..." size="medium"></wa-textarea>
|
||||
<div class="wa-split">
|
||||
<div>
|
||||
<wa-icon-button name="link" variant="solid" label="Bold"></wa-icon-button>
|
||||
<wa-icon-button name="face-smile" variant="solid" label="Italic"></wa-icon-button>
|
||||
</div>
|
||||
</wa-button><wa-button>Comment</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With multiple actions
|
||||
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer style="max-width: 640px; margin: 0 auto;">
|
||||
<div slot="header">
|
||||
<h2 class="wa-heading-s">I watched...</h2>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<div>
|
||||
<img src="https://a.ltrbxd.com/resized/film-poster/1/0/2/5/3/3/1/1025331-heretic-2024-0-1000-0-1500-crop.jpg?v=c79c5c8121" width="40"/>
|
||||
</div>
|
||||
<span class="wa-heading-l">Heretic</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Date</span><span class="wa-caption-m">Thursday, March 13, 2025</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<wa-rating label="Rating"></wa-rating>
|
||||
<wa-checkbox>Loved it!</wa-checkbox>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-textarea placeholder="Add review..."></wa-textarea>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid">
|
||||
<wa-button appearance="outlined">Cancel</wa-button>
|
||||
<wa-button variant="brand">Save</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
161
docs/docs/patterns/app/data-display.md
Normal file
161
docs/docs/patterns/app/data-display.md
Normal file
@@ -0,0 +1,161 @@
|
||||
---
|
||||
title: Data Display
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### With icon
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid" style="max-width: 960px; margin: 0 auto">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="square" label="Square avatar" class="wa-callout wa-neutral">
|
||||
<wa-icon slot="icon" name="user-plus" variant="solid"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-xs">Total Subscribers</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-heading-l">71,897</span>
|
||||
<wa-tag size="small" variant="success" appearance="filled outlined" pill><wa-icon fixed-width name="arrow-up"></wa-icon> 122</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="square" label="Square avatar" class="wa-callout wa-neutral">
|
||||
<wa-icon slot="icon" name="user-plus" variant="solid"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-xs">Total Subscribers</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-heading-l">71,897</span>
|
||||
<wa-tag size="small" variant="success" appearance="filled outlined" pill><wa-icon fixed-width name="arrow-up"></wa-icon> 122</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="square" label="Square avatar" class="wa-callout wa-neutral">
|
||||
<wa-icon slot="icon" name="user-plus" variant="solid"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-xs">Total Subscribers</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-heading-l">71,897</span>
|
||||
<wa-tag size="small" variant="success" appearance="filled outlined" pill><wa-icon fixed-width name="arrow-up"></wa-icon> 122</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Multi column
|
||||
|
||||
```html{.example}
|
||||
<div style="max-width: 480px; margin: 0 auto">
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card with condensed information
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 480px; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<section class="wa-split">
|
||||
<a href="#" class="wa-cluster wa-gap-xs wa-align-items-center">
|
||||
<span class="wa-caption-m">query</span>
|
||||
<span class="wa-heading-m">getUser</span>
|
||||
<wa-icon fixed-width name="arrow-right"></wa-icon>
|
||||
</a>
|
||||
<wa-icon-button fixed-width name="ellipsis" label="actions"></wa-icon-button>
|
||||
</section>
|
||||
<section class="wa-cluster">
|
||||
<span class="wa-caption-l">7.15M request • 9% • 734msP95</span>
|
||||
</section>
|
||||
<section class="wa-split">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span class="wa-caption-l">Cache Hit Rate</span>
|
||||
<span class="wa-heading-2xl">12.3%</span>
|
||||
<wa-badge appearance="filled outlined" variant="danger"><wa-icon name="arrow-down"></wa-icon> down from 19.6%</wa-badge>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span class="wa-caption-l">Max CHR</span>
|
||||
<span class="wa-heading-2xl">72.6%</span>
|
||||
<wa-badge appearance="filled outlined" variant="success"><wa-icon name="arrow-up"></wa-icon> CHR Impact +5.4%</wa-badge>
|
||||
</div>
|
||||
</section>
|
||||
<wa-divider></wa-divider>
|
||||
<section class="wa-stack">
|
||||
<span class="wa-heading-m">90.5 GB (69.8%)</span>
|
||||
<div class="wa-split">
|
||||
<span>Cacheable Bandwidth</span>
|
||||
<span class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon fixed-width name="dollar-sign"></wa-icon>
|
||||
<span>$9.50</span>
|
||||
<wa-icon fixed-width name="circle-question"></wa-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<wa-progress-bar value="9.8" label="Upload progress"></wa-progress-bar>
|
||||
<span class="wa-caption-m">Cached 12.8GB (9.8%)</span>
|
||||
<span class="wa-caption-m">Non-Cacheable 26.3GB (91.2)</span>
|
||||
<span class="wa-heading-s">Total 129.6GB</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
244
docs/docs/patterns/app/description-list.md
Normal file
244
docs/docs/patterns/app/description-list.md
Normal file
@@ -0,0 +1,244 @@
|
||||
---
|
||||
title: Description List
|
||||
description: 'Shows the user information with labels and values in an easy to read format.'
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h3 class="wa-heading-m">Applicant Info</h3>
|
||||
<p class="wa-caption-m">Personal details.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<dl class="wa-stack wa-gap-2xl">
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Full name</dt>
|
||||
<dd class="wa-caption-m">Bucky Barnes</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Application for</dt>
|
||||
<dd class="wa-caption-m">Machine Learning Engineer</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Email address</dt>
|
||||
<dd class="wa-caption-m">winter_soldier@example.com</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Salary expectation</dt>
|
||||
<dd class="wa-caption-m">
|
||||
$240,00
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">About</dt>
|
||||
<dd class="wa-caption-m">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 loves, and I'm always striving to atone for those dark days as the Winter Soldier.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Attachments</dt>
|
||||
<dd>
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_resume.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_cover_letter.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Two Column
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h2 class="wa-heading-m">Applicant Information</h2>
|
||||
<p class="wa-caption-m">Personal details and application.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<dl class="wa-grid wa-gap-2xl" style="--min-column-size: 40ch;">
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Full name</dt>
|
||||
<dd class="wa-caption-m">Bucky Barnes</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Application for</dt>
|
||||
<dd class="wa-caption-m">Machine Learning Engineer</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Email address</dt>
|
||||
<dd class="wa-caption-m">winter_soldier@example.com</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Salary expectation</dt>
|
||||
<dd class="wa-caption-m">
|
||||
$240,00
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank wa-span-grid" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">About</dt>
|
||||
<dd class="wa-caption-m">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 loves, and I'm always striving to atone for those dark days as the Winter Soldier.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank wa-span-grid" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Attachments</dt>
|
||||
<dd>
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_resume.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_cover_letter.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
### Multi Column
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h2 class="wa-heading-m">Applicant Information</h2>
|
||||
<p class="wa-caption-m">Personal details and application.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<dl class="wa-stack wa-gap-2xl">
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Full name</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>Bucky Barnes</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Application for</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>Machine Learning Engineer</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Email address</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>winter_soldier@example.com</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Salary expectation</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>$240,00</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">About</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<p style="max-width: 70ch;">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 loves, and I'm always striving to atone for those dark days as the Winter Soldier.</p>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Attachments</dt>
|
||||
<dd>
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_resume.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_cover_letter.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
### Narrow with Invoice Details
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer class="wa-callout wa-neutral" style="max-width: 480px; margin: 0 auto;">
|
||||
<div slot="header" class="wa-split">
|
||||
<dl class="wa-stack wa-gap-2xs">
|
||||
<dt class="wa-heading-s">Amount</dt>
|
||||
<dd class="wa-heading-l">$10,560.00</dd>
|
||||
</dl>
|
||||
<wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
|
||||
</div>
|
||||
<div>
|
||||
<dl class="wa-stack" style="margin: 0;">
|
||||
<div class="wa-flank wa-align-items-stretch">
|
||||
<dt><wa-icon name="user"></wa-icon></dt>
|
||||
<dd class="wa-heading-s">Sam Wilson</dd>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-stretch">
|
||||
<dt><wa-icon name="calendar-days"></wa-icon></dt>
|
||||
<dd class="wa-heading-s">June 8, 2015</dd>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-stretch">
|
||||
<dt><wa-icon family="brands" name="cc-visa"></wa-icon></dt>
|
||||
<dd class="wa-heading-s">Paid with Visa</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#" class="wa-flank wa-align-items-center wa-gap-2xs">
|
||||
<span>Download Receipt</span>
|
||||
<wa-icon name="arrow-right"></wa-icon>
|
||||
</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
113
docs/docs/patterns/app/empty-state.md
Normal file
113
docs/docs/patterns/app/empty-state.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Empty State
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
```html{.example}
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<wa-icon name="folder" style="font-size: 60px;"></wa-icon>
|
||||
<span class="wa-heading-s">No Projects</span>
|
||||
<p class="wa-caption-m">Get started by creating a new project.</p>
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="plus"></wa-icon>
|
||||
New Project
|
||||
</wa-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With border
|
||||
|
||||
```html{.example}
|
||||
<a href="#" class="wa-align-items-center wa-callout wa-neutral wa-outlined wa-stack" style="max-width: 480px; margin: 0 auto; text-decoration: none;">
|
||||
<wa-icon name="database" style="font-size: 64px;"></wa-icon>
|
||||
<div class="wa-stack wa-align-items-center wa-gap-2xs">
|
||||
<p class="wa-heading-m">No DBs</p>
|
||||
<p>Get started by creating a database.</p>
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
### With starting points
|
||||
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer style="max-width: 720px; margin: 0 auto;">
|
||||
<div slot="header" class="wa-stack wa-gap-xs">
|
||||
<h2 class="wa-heading-m">Projects</h2>
|
||||
<p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start from an empty project.</p>
|
||||
</div>
|
||||
<div class="wa-grid" style="--min-column-size: 30ch;">
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="bars" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a List <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Another to-do system you’ll try but eventually give up on.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="image" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Gallery <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Great for mood boards and inspiration.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#"class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="table-cells" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Spreadsheet <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Helps keep up with the numbers.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="calendar" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Calendar <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Stay on top of your deadlines, or don’t — it’s up to you.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="table-columns" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Board <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Track tasks in different stages of your project.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="clock" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Timeline <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Get a birds-eye-view of your procrastination.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#">Or start from an empty project →</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
92
docs/docs/patterns/app/faq.md
Normal file
92
docs/docs/patterns/app/faq.md
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: FAQ
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<div>
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<p>Can’t find the answer you’re looking for? Reach out to our <a href="#">customer support</a> team.</p>
|
||||
</div>
|
||||
<dl class="wa-stack wa-gap-m">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto;">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<div>
|
||||
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
|
||||
|
||||
<dl class="wa-stack wa-gap-m">
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
86
docs/docs/patterns/app/feed.md
Normal file
86
docs/docs/patterns/app/feed.md
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Feed
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<div class="activity-feed">
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="user-circle" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="thumbs-up" style="color: blue" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="crown" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="turtle" style="color: green" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
.activity-feed {
|
||||
wa-icon {
|
||||
margin-right: 1rem;
|
||||
font-size: 32px;
|
||||
}
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
}
|
||||
.activity {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.activity-group:not(:first-child) {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.activity-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.connector {
|
||||
position: absolute;
|
||||
background-color: var(--border-color);
|
||||
height: 25%;
|
||||
width: 0.125rem;
|
||||
margin-left: -1px;
|
||||
top: 2.5rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.activity-group:last-of-type .connector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
166
docs/docs/patterns/app/grid.md
Normal file
166
docs/docs/patterns/app/grid.md
Normal file
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Grid
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 30ch;">
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-neutral">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-success">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-danger">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-warning">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
7
docs/docs/patterns/app/index.njk
Normal file
7
docs/docs/patterns/app/index.njk
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: App
|
||||
description: TODO
|
||||
layout: overview
|
||||
categories: ["app"]
|
||||
listChildren: true
|
||||
---
|
||||
369
docs/docs/patterns/app/leaderboard.md
Normal file
369
docs/docs/patterns/app/leaderboard.md
Normal file
@@ -0,0 +1,369 @@
|
||||
---
|
||||
title: Leaderboard
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-stack wa-gap-xs" style="max-width: 960px; margin: 0 auto">
|
||||
<h2>Collective Activity for Yesterday</h2>
|
||||
<div class="wa-grid">
|
||||
<wa-callout>
|
||||
<wa-icon slot="icon" name="book"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-heading-xs">Items Studied</div>
|
||||
<div class="wa-heading-2xl">482,813</div>
|
||||
</div>
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="medal"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-heading-xs">Items Mastered</div>
|
||||
<div class="wa-heading-2xl">67,106</div>
|
||||
</div>
|
||||
</wa-callout>
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-heading-xs">Items Created</div>
|
||||
<div class="wa-heading-2xl">2,080</div>
|
||||
</div>
|
||||
</wa-callout>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="wa-grid">
|
||||
<wa-card with-header>
|
||||
<div slot="header" class="wa-flank">
|
||||
<wa-icon name="trophy"></wa-icon>
|
||||
<span class="wa-gap-0 wa-stack">
|
||||
<h4>Study Leaders</h4>
|
||||
<p>items mastered last 7 days</p>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</wa-card>
|
||||
<!-- -->
|
||||
<wa-card with-header>
|
||||
<div slot="header" class="wa-flank">
|
||||
<wa-icon name="trophy"></wa-icon>
|
||||
<span class="wa-gap-0 wa-stack">
|
||||
<h4>Creation Leaders</h4>
|
||||
<p>items created last 7 days</p>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Item 1</p>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<p>Item 1</p>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<p>Item 1</p>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
### Two Column
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h2>WTA Rankings</h2>
|
||||
<div class="wa-grid wa-gap-3xl">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<div class="wa-border-radius-l wa-frame">
|
||||
<img src="https://uploads.webawesome.com/serena-2.jpg" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<span class="wa-heading-m">Serena Williams</span>
|
||||
<span class="wa-caption-l">United States</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-heading-l">SINGLES</span>
|
||||
<ol class="wa-stack wa-gap-2xs">
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Williams, Serena</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Williams, Serena</span>
|
||||
<span>6960</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Li, Na</span>
|
||||
<span>6785</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Halep, Simona</span>
|
||||
<span>6070</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Radwanska, Agnieszka</span>
|
||||
<span>5130</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Sharapova, Maria</span>
|
||||
<span>4661</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Bouchard, Eugenie</span>
|
||||
<span>4460</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Kerber, Angelique</span>
|
||||
<span>4365</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Jankovic, Jelena</span>
|
||||
<span>3900</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Azarenka, Victoria</span>
|
||||
<span>3812</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster">
|
||||
<div class="wa-border-radius-l wa-frame">
|
||||
<img src="https://uploads.webawesome.com/roberta.jpg" />
|
||||
</div>
|
||||
<div class="wa-border-radius-l wa-frame">
|
||||
<img src="https://uploads.webawesome.com/sara.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-heading-l">DOUBLES</span>
|
||||
<ol class="wa-stack wa-gap-2xs">
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Errani, Vinci</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Roberts, Paxson</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Smith, Wexler</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Elena, Hisieh</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Pen, Sania</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Makarova, Cara</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Washington, Roosevelt</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>King, Little</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Grier, Brown</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Burkhart, Silverton</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
44
docs/docs/patterns/app/pagination.md
Normal file
44
docs/docs/patterns/app/pagination.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Pagination
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
## Simple Pagination
|
||||
|
||||
```html{.example}
|
||||
<div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-l">Showing 1 to 10 of 50 Results</span>
|
||||
<span>
|
||||
<wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
|
||||
<wa-button><wa-icon slot="suffix" name="gear" variant="solid"></wa-icon>Next </wa-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Multi Page
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack" style="opacity: 25%;">
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div>
|
||||
Some stuff
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div slot="footer" class="wa-split">
|
||||
<wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
|
||||
<wa-button><wa-icon slot="suffix" name="gear" variant="solid"></wa-icon>Next </wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
137
docs/docs/patterns/app/pricing.md
Normal file
137
docs/docs/patterns/app/pricing.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
title: Pricing
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
<span class="wa-split">
|
||||
<span class="wa-heading-s">Plan</span>
|
||||
<wa-badge appearance="filled outlined" variant="success" pill>Most Popular</wa-badge>
|
||||
</span>
|
||||
<span class="wa-flank wa-gap-2xs">
|
||||
<span class="wa-heading-2xl">$10</span>
|
||||
<span class="wa-caption-l">per user/per month</span>
|
||||
</span>
|
||||
<p class="wa-caption-l">Basic Features</p>
|
||||
<span class="wa-grid">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="outlined">Talk to sales</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<p class="wa-heading-s">Features</p>
|
||||
<p class="wa-caption-m">Everything in out free plan plus</p>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Access to basic features</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Basic Reporting and Analytics</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">10 Individual users</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">20GB of data for user</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Basic Chat and email</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
<span class="wa-split">
|
||||
<span class="wa-heading-s">Plan</span>
|
||||
<wa-badge appearance="filled outlined" variant="success" pill>Most Popular</wa-badge>
|
||||
</span>
|
||||
<span class="wa-flank wa-gap-2xs">
|
||||
<span class="wa-heading-2xl">$10</span>
|
||||
<span class="wa-caption-l">per user/per month</span>
|
||||
</span>
|
||||
<p class="wa-caption-l">Basic Features</p>
|
||||
<span class="wa-grid">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="outlined">Talk to sales</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-heading-s">Features</p>
|
||||
<p class="wa-caption-m">Everything in out free plan plus</p>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Access to basic features</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
<span class="wa-split">
|
||||
<span class="wa-heading-s">Plan</span>
|
||||
<wa-badge appearance="filled outlined" variant="success" pill>Most Popular</wa-badge>
|
||||
</span>
|
||||
<span class="wa-flank wa-gap-2xs">
|
||||
<span class="wa-heading-2xl">$10</span>
|
||||
<span class="wa-caption-l">per user/per month</span>
|
||||
</span>
|
||||
<p class="wa-caption-l">Basic Features</p>
|
||||
<span class="wa-grid">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="outlined">Talk to sales</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-heading-s">Features</p>
|
||||
<p class="wa-caption-m">Everything in out free plan plus</p>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Access to basic features</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
```html{.example}
|
||||
<div class="wa-callout wa-neutral wa-outlined wa-grid">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-l">Lifetime membership</h2>
|
||||
<p>Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<h3 class="wa-heading-s">What's included</h3>
|
||||
<div class="wa-grid">
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Private forum access</p></span>
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Entry to annual conference</p></span>
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Member resources</p></span>
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Official member t-shirt</p></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-callout wa-neutral wa-stack wa-align-items-center">
|
||||
<h3 class="wa-heading-s">Pay once, own it forever</h3>
|
||||
<div>
|
||||
<span class="wa-heading-3xl">$349</span>
|
||||
<span>USD</span>
|
||||
</div>
|
||||
<wa-button variant="success">Get Access</wa-button>
|
||||
<p class="wa-caption-s">Invoices and receipts available for easy company reimbursement</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With templates
|
||||
|
||||
### With recommendations grid
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Patterns
|
||||
description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
|
||||
layout: overview
|
||||
categories: ["e-commerce"]
|
||||
categories: ["app", "e-commerce"]
|
||||
listChildren: true
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user