webawesome/packages/webawesome/docs/index.md

title, description, layout

title	description	layout
Web Awesome	Build better with Web Awesome, the open source library of web components from Font Awesome.	page

<style> .title, .anchor-heading a, #outline-expandable { display: none; } wa-page > main { --content-width: 56rem; --content-padding-inline: 2rem; --content-flow-spacing: 4rem; max-width: 100%; padding: 0 !important; & p, h1, h2, h3, h4, h5, h6 { margin: 0; } } /** this technically relies on insertion order. */ @media screen and (max-width: 768px) { wa-page > main { --content-flow-spacing: 3rem !important; } } .brand-font { font-family: cera-round-pro; } .emphasis { position: relative; &::after { content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--wa-brand-orange); border-radius: var(--wa-border-radius-pill); width: 100%; height: 0.1em; } } .hero-background { background-color: var(--wa-brand-orange); background-image: linear-gradient(color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px); background-size: 2rem 2rem; color: white; padding: calc(var(--content-flow-spacing) * 1.875) 0 var(--content-flow-spacing) 0; } .hero-content { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--content-padding-inline); & > * + * { margin-block-start: 2rem; } & h1 { font-size: clamp(2.5625rem, 13vw, 3.25rem); } & .emphasis::after { background-color: var(--wa-brand-grey); } & .wa-crown svg { width: 4rem; & path { fill: white; } } } .hero-cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; background-color: var(--wa-brand-grey); border-radius: 0.75rem; font-size: 0.875rem; padding: 1.5rem; & > *:first-child { flex: 1 1 67%; } & wa-button { &::part(base) { border-color: black; border-width: 0.125rem; box-shadow: 0 0.25rem 0 0 black; flex: 1 1 auto; height: 2.5rem; } &:active:not([disabled])::part(base) { box-shadow: 0 0 0 0 transparent; transform: translateY(0.25rem); } } } .home-wrapper { max-width: var(--content-width); margin-block: var(--content-flow-spacing); margin-inline: auto; padding-inline: var(--content-padding-inline); } .home-wrapper > * + * { margin-block-start: var(--content-flow-spacing); } .summary { background-color: var(--wa-brand-grey); border-radius: 1.125rem; color: white; padding: var(--content-flow-spacing); & > * + * { margin-block-start: 2rem; } & .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr)); gap: 2rem; & h3 { font-size: 1rem; } & p { font-size: 0.875rem; } } } .split-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr)); column-gap: 4rem; row-gap: 2rem; align-items: center; & > * > * + * { margin-block-start: 1rem; } } .link-panel { background-color: var(--wa-color-neutral-fill-quiet); border-radius: 0.75rem; padding: 1.25rem; & h3 { font-size: 1rem; } & .icon-heading wa-icon { background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud); } & p { font-size: 0.875rem; } } .icon-heading { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; & wa-icon { display: flex; align-items: center; justify-content: center; background-color: var(--wa-brand-orange); color: white; border-radius: 0.25rem; aspect-ratio: 1; padding: 0.5em; } & h3 { font-size: 1rem; } } footer { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; & .wa-crown svg { width: 2rem; } & .tagline { font-size: 1rem; } & .attribution { align-self: flex-start; & .button-list { display: flex; flex-wrap: wrap; flex: 1 1 auto; gap: 0.5rem; } & wa-button::part(base) { height: 1.5rem; font-size: 0.75rem; } } } .beta-notice { display: flex; flex-wrap: wrap; gap: 1rem; & > * { flex-basis: calc(((30ch * 2 + 1rem) - 100%) * 999); } & > * { flex-grow: 2; } & > * + * { flex-grow: 1; } & wa-callout, & wa-button::part(base) { height: 100%; width: 100%; } } wa-button.tile::part(base) { border-color: var(--wa-color-surface-border); border-radius: 0.75rem; color: var(--wa-color-text-normal); height: 100%; line-height: var(--wa-line-height-normal); padding: 1.25rem; text-align: left; white-space: wrap; } wa-button.tile::part(end) { display: none; } wa-button.tile { width: 100%; height: 100%; & h3 { font-size: 1rem; } & .icon-heading + wa-icon { color: var(--wa-color-text-quiet); } & p { font-size: 0.875rem; font-weight: var(--wa-font-weight-normal); } &::part(label) { flex-direction: column; } } wa-callout { --spacing: 1.25rem; height: 100%; & .icon-heading wa-icon { background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal); } & p { font-size: 0.875rem; } } </style>

{% include "logo-simple.njk" %}

Make something awesome with open-source web components

{%- raw -%} {% if currentUser.hasPro %} Thanks for being a Web Awesome Pro subscriber! {% else %} Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good. Pre-order WA Pro {% endif %} {% endraw %}

Rise and shine, backers!

Dig in to your exclusive Web Awesome Beta access. This beta is battle-tested and built to last, but if you see something, say something. Please report bugs or ask for help!

Get started

Check out our installation guide to start building with Web Awesome.

What's Web Awesome?

Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

Entirely native

Built on web standards to last for years to come. No excess tooling. No third-party bloat.

Fully customizable

Show off your own style with components that consistently adapt to your theme.

Accessibility forward

Build a website that everyone can use. Designed to be inclusive and usable by everyone.

Proudly open source

Use Web Awesome Free however you like. Always free, always open source.

You put the awesome in Web Awesome

Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.

Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.

Get in touch

Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at hello@webawesome.com.

Follow us

Keep up with Web Awesome through updates, announcements, and polls. Find us on Bluesky, Twitter (X), and Threads.

{% include "logo-simple.njk" %}

Let's Make Something Awesome

Web Awesome is the design system platform and open source library of web components from your fellow nerds at Font Awesome.

Special thanks

Lit Custom Elements Manifest 11ty Floating UI animate.css Lunr

© Fonticons, Inc.