This project is based on waw framework, build by waw template and can be easily hosted on github pages or waw back-end.
You will need to install Node.js and waw globally
npm i -g wawTo start coding, you can simply run command
wawIf you wanna use github domain, you simply have to replace prefix into github repo name. If you will configure a custom domain, you will need to add "base": "/" in config.json file.
Core building blocks of public websites focused on textual and informational presentation.
A large section usually at the top of a page with a headline, subheadline, and call-to-action button.
Showcases key product or service features in a structured layout, often with icons or short descriptions.
Simple text section with a heading and paragraph. Used for articles or explanatory content.
Splits content into two text columns, ideal for comparing or organizing information side-by-side.
Combines an image or video with supporting text, usually aligned side-by-side.
Expandable/collapsible panels often used for FAQs or grouped information.
Highlights an important message or quote with styled emphasis.
Customer quote or endorsement, often paired with name and avatar.
Visual layout of steps, events, or milestones in chronological order.
Showcase key metrics using bold numbers with labels (e.g., "1M+ users").
Formatted section for displaying code snippets, used mostly in docs.
Renders markdown content inside any component or section.
Visual content sections for displaying imagery, videos, or interactive visuals.
Single responsive image with optional caption.
Grid of multiple images, optionally with lightbox on click.
Carousel with images, text, or mixed content, swipeable or auto-playing.
Click-to-expand image viewer with overlay.
Embed a video from YouTube, Vimeo, or custom source.
Mini player to stream audio (e.g., podcast, track).
Image paired with a styled caption underneath or on hover.
Section with animated visual (e.g., GIF, WebP, Lottie animation).
Sections designed to drive user interaction or conversions.
Multiple call-to-action buttons (primary, secondary, etc.).
Promotional strip with text and CTA, often placed mid-page or at bottom.
Marketing-focused layout highlighting a specific deal or feature.
Urgency-inducing timer for limited offers or launches.
Persistent CTA or promo visible at the bottom of the screen.
Modal popup triggered on page exit or scroll, used for offers or signup prompts.
Interactive elements that help users browse content or jump to sections.
Top navigation bar with links, logo, and optional dropdowns.
Expanded dropdown menu used for complex navigation structures.
Clickable trail showing the current page's hierarchy.
Vertical nav for docs or multi-page layouts.
Auto-generated list of headings/anchors on a page, usually for docs.
Navigation for multi-page content (e.g., blog index, product pages).
In-page links that scroll to a section smoothly.
Floating button to return to top of page.
Essential sections for showcasing products and allowing transactions.
Small card with product image, title, price, and actions.
Full page or large component with in-depth product info.
Displays price, discount, and currency info in various formats.
Dropdowns or swatches for selecting product variants (size, color, etc.).
Button or block for adding an item to the cart.
Visual representation of product reviews.
Displays user-submitted reviews or ratings.
Grid layout of multiple products.
Visual cue showing whether a product is in stock, low stock, or out.
Badge highlighting sale or promo (e.g., “-20%”).
Logos of accepted payment methods (Visa, PayPal, etc.).
Utility sections that define structure, spacing, and display behavior.
Multi-column grid layout used for content alignment.
Responsive wrapper with max-width and padding.
Blank space element for controlling vertical spacing.
Horizontal line or visual separator.
Wrapper with image, color, or gradient background.
A section or element that remains fixed on scroll.
Switchable content panes under labeled tabs.
Expandable content (like a mini accordion).
Scrollable container with styled overflow behavior.
Utility to show/hide sections on specific screen sizes.
Showcase user experiences or build social proof.
Multiple testimonials in a structured layout.
Scrollable reviews with text, stars, and author.
Styled quote with optional avatar or name.
Logos of publications or media that featured the brand.
Security or quality trust markers (SSL, "Verified", etc.).
Components specifically for documentation or knowledge base sites.
Docs-specific nav, highlighting current page/section.
Doc-friendly layout with title, content, TOC, and nav.
Stylized, copyable code blocks with optional language highlight.
Special layout for endpoint documentation with parameters and responses.
Toggle between different versions of the same doc.
“Edit on GitHub” link to encourage contributions.
Docs-specific site search component.
Definition block for technical or domain terms.
Blocks used for course pages, lessons, and study programs.
Course content list or module breakdown.
Profile card with avatar, name, and bio.
Structured course overview or curriculum.
Progress bar or percentage tracker.
Question block with answer interaction (optional logic).
Visual badge for completed courses.
Educational steps or modules arranged in sequence.
Feature comparison of courses or study options.
Professional sections to describe a company, its mission, and team.
Overview of who you are and what you do.
Statement or vision block.
Cards for each team member with photo and role.
Job listings or recruitment blocks.
Grid of logos for partners, sponsors, or integrations.
Timeline of key events or achievements.
Company contact info including phone, email, and form.
Embedded map showing business location.
Recognition badges or honors.
Interactive form components to capture data or messages.
Basic form with name, email, message.
Email-only form for subscriptions.
Multiple-choice or open-ended feedback form.
Detailed form for applying to something (job, course, etc.).
Event confirmation form with date/time.
Form broken into multiple steps or pages.
Form with file attachment support.
Sections used to display articles or content feeds.
Preview of a single blog post.
Grid or list of blog posts.
List or tags to filter posts.
Author bio with avatar and links.
Suggestions based on current post.
Public commenting system.
Post metadata (date, read time, tags).
Widgets to enhance discoverability and structured data for crawlers.
Generic JSON-LD schema block.
Specific schema for blog or news articles.
Structured data for FAQ accordion.
Schema for e-commerce product pages.
Breadcrumb trail as structured data.
Shows OG tags for link preview debugging.
Simulates how your page will appear in search or social.
Helpers and floating tools for better UX and accessibility.
Toggle between multiple languages.
Legal consent notice for cookies.
Buttons to share content on social media.
Embedded Instagram, X (Twitter), or TikTok feed.
Timer for events or promos.
Reading progress or loading bar.
Banner or toast message for announcements.
Informational, warning, or success message.
Embed HTML, iframe, or third-party widget.