Browse Patterns
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, CSS utilities, and a theme installed in addition to Web Awesome components. Refer to the Installation page to set up all of these features in your project.
Browse Patterns
App
Help users complete tasks efficiently with quick access to key actions.
Track and organize recent user actions or events.
Enable users to engage in discussions, provide feedback, or record their thoughts.
Convey insights, metrics, and aggregate data at a glance.
Help users digest detailed information in a structured, easy-to-scan format.
Guide users with helpful prompts and visuals when no content is available.
Empower users to learn more with a structured list of questions and answers.
Improve browsing and selection by organizing data in a structured grid layout.
Engage and motivate users by highlighting top performers, scores, and achievements.
Improve navigation and performance by breaking long lists or content into manageable pages.
Enhance user trust and streamline account recovery across devices
Permission patterns provide or restrict access to users.
Help users make informed purchasing decisions with clear, structured pricing.
Blog & News
Surface key messages like announcements, promotions, alerts, or calls to action.
Solicits a user to take action.
Organize your site and allow readers to find the information they want.
Provide visitors with a clear way to get in touch.
Highlight important, timely, or high-impact content.
Provide useful information at the bottom of a webpage.
Arrange groups of content such as features, articles, products, or case studies within a responsive, visually balanced grid.
Establish visual hierarchy and introduce the content that follows.
Convert site visitors into engaged subscribers or customers.
Monetize value and encourage commitment from readers, viewers, or users.
Helps reduce bounce rate and keep users in your content loop.
Post headers deliver visual impact and emotional engagement right at the start of the reader’s journey.
Organize and showcase content in a way that helps users discover, browse, and engage with articles.
Verify the identity of a user and ensures that only authorized individuals can access specific content, features, or account data.
Allow users to easily share content with social networks and platform.
Visually communicate key metrics, achievements, or impact indicators.
Highlights the people behind the product, service, or organization.
Showcase authentic feedback and endorsements from clients, collaborators, or users.
Ecommerce
Helps the user find the right products with filters to refine search results by specific attributes.
Help shoppers discover your product offerings with showcases of product categories.
Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.
Encourage shoppers to buy your products with value propositions, discounts, and promotions.
Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.
Give shoppers confidence in their purchases with summaries of everything included in their order.
Let shoppers browse and compare products with detailed lists of the products in your store.
Showcase your products with overviews including images, ratings, features, options, and more.
Give shoppers a quick look at your products as they browse with modal previews.
Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.
Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.
Help shoppers explore categories and find products with all of the links they need to navigate your store.
Layouts
Offer shoppers a seamless checkout experience in your marketplace or storefront.
Present key metrics in your app with a full-page dashboard, including a variety of metric cards and charts.
Create everything from editorial articles to tutorials, changelogs, and think pieces.
Allow users to customize their personal details in your app, including sections for user information, passkeys, sessions, and SSO.
Show off the good! Present a product in your marketplace or storefront with pre-built patterns.
Present all of the settings a user can customize in your app, including user info, security, notifications, and preferences.
Show off your products with pre-built, customizable patterns to build your storefront.
Organize and manage transactions in your app, including filters, tables, and transaction details.
