mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
add more app patterns
This commit is contained in:
Kelsey Jackson
@@ -2,9 +2,8 @@
|
||||
title: Comments
|
||||
description: 'For feedback forms and message boxes'
|
||||
---
|
||||
## Examples
|
||||
|
||||
### In card with footer
|
||||
## In card with footer
|
||||
```html{.example}
|
||||
<form class="comment-box" style="max-width: 960px; margin: 0 auto;">
|
||||
<wa-card with-footer>
|
||||
@@ -20,7 +19,7 @@ description: 'For feedback forms and message boxes'
|
||||
</form>
|
||||
```
|
||||
|
||||
### with avatar and icon buttons
|
||||
## 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">
|
||||
@@ -39,7 +38,7 @@ description: 'For feedback forms and message boxes'
|
||||
</div>
|
||||
```
|
||||
|
||||
### With multiple actions
|
||||
## With multiple actions
|
||||
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer style="max-width: 640px; margin: 0 auto;">
|
||||
@@ -71,3 +70,29 @@ description: 'For feedback forms and message boxes'
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## with preview
|
||||
```html{.example}
|
||||
<div style="max-width: 60ch; margin: 0 auto;">
|
||||
<wa-card class="wa-border-radius-square" with-footer>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="write">Write</wa-tab>
|
||||
<wa-tab panel="preview">Preview</wa-tab>
|
||||
<wa-tab-panel name="write">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-xs" style="justify-content: flex-end;">
|
||||
<wa-icon-button name="link" label="add link"></wa-icon-button>
|
||||
<wa-icon-button name="at" label="mention collaborator"></wa-icon-button>
|
||||
<wa-icon-button name="hashtag" label="change heading"></wa-icon-button>
|
||||
</div>
|
||||
<wa-textarea></wa-textarea>
|
||||
</div>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="preview">Your content will be will render here.</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
<div slot="footer" class="wa-cluster" style="justify-content: flex-end;">
|
||||
<wa-button size="small">Post</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
</div>
|
||||
```
|
||||
@@ -2,9 +2,43 @@
|
||||
title: Data Display
|
||||
description: TODO
|
||||
---
|
||||
## Examples
|
||||
|
||||
### With icon
|
||||
## Simple
|
||||
```html{.example}
|
||||
<wa-card>
|
||||
<div class="wa-grid wa-gap-3xl">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## With icon
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid" style="max-width: 960px; margin: 0 auto">
|
||||
@@ -53,7 +87,7 @@ description: TODO
|
||||
</div>
|
||||
```
|
||||
|
||||
### Multi column
|
||||
## Multi column
|
||||
|
||||
```html{.example}
|
||||
<div style="max-width: 480px; margin: 0 auto">
|
||||
@@ -108,7 +142,7 @@ description: TODO
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card with condensed information
|
||||
## Card with condensed information
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 480px; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
title: Empty State
|
||||
description: TODO
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
## Simple
|
||||
```html{.example}
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<wa-icon name="folder" style="font-size: 60px;"></wa-icon>
|
||||
@@ -17,7 +15,7 @@ description: TODO
|
||||
</div>
|
||||
```
|
||||
|
||||
### With border
|
||||
## 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;">
|
||||
@@ -28,7 +26,7 @@ description: TODO
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
### With starting points
|
||||
## With starting points
|
||||
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer style="max-width: 720px; margin: 0 auto;">
|
||||
@@ -109,3 +107,83 @@ description: TODO
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## Add people
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 60ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<wa-icon></wa-icon>
|
||||
<h1>Add team members</h1>
|
||||
<p>You haven’t added any team members to your project yet. As the owner of this project, you can manage team member permissions.</p>
|
||||
<div class="wa-flank:end">
|
||||
<wa-input></wa-input><wa-button>Invite</wa-button>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Team members previously added to projects</span>
|
||||
<wa-divider></wa-divider>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section><section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -2,9 +2,8 @@
|
||||
title: FAQ
|
||||
description: 'The user has questions concerning a site and its related services'
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Offset
|
||||
## Offset
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<div>
|
||||
@@ -42,7 +41,7 @@ description: 'The user has questions concerning a site and its related services'
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
### With detail component
|
||||
## With detail component
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto;">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
@@ -79,7 +78,7 @@ description: 'The user has questions concerning a site and its related services'
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
### 2 Column
|
||||
## 2 Column
|
||||
```html{.example}
|
||||
<div>
|
||||
|
||||
@@ -121,3 +120,46 @@ description: 'The user has questions concerning a site and its related services'
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 3 Column
|
||||
```html{.example}
|
||||
<div>
|
||||
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
|
||||
|
||||
<dl class="wa-grid wa-gap-m" style="--min-column-size: 30ch;">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">Do you offer a free trial?</dt>
|
||||
<dd>
|
||||
<p>We offer a free trial to first-time subscribers. You can find more about the trial here.</p>
|
||||
<p>We also have the following opportunities to learn for free:</p>
|
||||
<ul>
|
||||
<li>The online bootcamp is a free, two-week curriculum to get you started with web development.</li>
|
||||
<li>You can create a free account to gain access to five full courses for free.</li>
|
||||
</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>
|
||||
```
|
||||
|
||||
@@ -154,4 +154,110 @@ description: TODO
|
||||
</wa-details>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Card Separated
|
||||
```html{.example}
|
||||
<div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Charlotte Parker</span>
|
||||
<span class="wa-caption-s">4h</span>
|
||||
</div>
|
||||
<p>Who's on first?</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon name="reply"></wa-icon>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<ul class="wa-stack" style="list-style-type: none; margin-inline-start: 2.5em;">
|
||||
<li>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Charlotte Parker</span>
|
||||
<span class="wa-caption-s">1h</span>
|
||||
</div>
|
||||
<p>What's on second?</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon name="reply"></wa-icon>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</li>
|
||||
<li>
|
||||
<wa-card>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Charlotte Parker</span>
|
||||
</div>
|
||||
<wa-textarea size="small"></wa-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Charlotte Parker</span>
|
||||
<span>4h</span>
|
||||
</div>
|
||||
<p>dfjsfjskfjska</p>
|
||||
<a href="#">Reply</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<ul class="wa-stack" style="list-style-type: none; margin-inline-start: 2.5em;">
|
||||
<li><wa-card></wa-card></li>
|
||||
<li><wa-card></wa-card></li>
|
||||
<li><wa-card></wa-card></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
## Divider Separated
|
||||
```html{.example}
|
||||
<wa-card with-header style="max-width: 54ch; margin: 0 auto;">
|
||||
<div slot="header" class="wa-split">
|
||||
<div>
|
||||
<span>Notifications</span>
|
||||
<wa-badge>2</wa-badge>
|
||||
</div>
|
||||
<wa-icon name="close"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
|
||||
</div>
|
||||
<wa-callout>dfjsdljfdsl</wa-callout>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
Reference in New Issue
Block a user