Page Header

The start of a content page: title and subtitle on the left, actions on the right, wrapping when it gets tight. The counterpart to mw-section-head, which opens a section of a landing page rather than a page of an application.

Meta Info

The line of small facts that sits with a heading - author, date, reading time, status. One wrapping row, with the separators drawn by CSS rather than typed into the markup.

Tables

Rows for data that has columns. On a phone a wide table either scrolls inside its own frame or turns each row into a card - mw-table-responsive for the first, mw-table-cards for the second. The compact variant is for the tables that hold a screenful at a time.

Sortable, Selectable, Sticky

aria-sort on a header draws which way the column runs - the button inside does the sorting. A checked box in the first cell selects the row, and mw-table-bulk around the table shows its bar while any row is checked, with the count filled in by CSS where the bar is left empty. mw-table-sticky-col keeps the first column in place while a wide table scrolls sideways.

Stats & Meters

The numbers a dashboard opens with, and how full something is. A stat sizes its value to the room it gets, not to the window - the same markup in a sidebar and in a wide row. The meter is the native <meter>, so its thresholds are attributes and its tone follows from them.

Chat

The pieces of an assistant or support chat. The bubble takes the framework's silhouette - sharp on the corner the message comes from, mirrored for the person typing. Streaming, scrolling and sending stay the application's job; this is only what it renders into.

INV-2026-0912  1.240,00 EUR  due 2026-10-05
INV-2026-0917    380,50 EUR  due 2026-10-12
INV-2026-0923  2.115,00 EUR  due 2026-10-20

Kanban

A board is a mw-kanban with one mw-kanban-column per status, a ticket a plain mw-card with mw-kanban-card on top. The priority is the regular mw-card-ribbon and brings its colour along on its own. mw-kanban-compact tightens the padding and clamps the description to two lines instead of four - for boards with many lanes or a sidebar next to them.

Calendar

Month, compact and week share every class - a week is seven cells instead of forty-two, mw-calendar-compact drops the dots and a third of the height. The status dots come in as data-calendar-markers='{"2026-08-19": ["success", "warning"]}'.

What a dot means belongs to the caller: the same calendar reads “request pending / booked / time offered” in a scheduling app and something else entirely on a public booking page. So the colour is a property, --mw-calendar-dot, settable per dot or inherited from the cell - mw-calendar-dot-success and friends are named presets for it, not the only way in.

Lunch menu

Nothing below is a lunch-menu component. It is mw-card, mw-price, mw-date-stamp and two grid classes - a weekly menu is a composition, not a widget. One day per row: five columns would squeeze a dish name into a fifth of the page, and a wrapping grid would orphan the fifth card into a row of its own. mw-grid-even gives every row the height of the tallest, so a day with a second line of description does not make its card taller than the rest of the week.

mw-date-stamp answers to the card, not the viewport. On a narrow card it is a muted line above the title; once the card is wide enough that a single column would leave its right half empty - as every card in a stacked list is - the same markup becomes the column on the left. Because the width it switches at is the card's, a stamp behaves the same whichever grid it is dropped into. mw-date-stamp-today fills that column instead of recolouring it: the price is already primary, and two blues compete where one would point.

Two dishes a day

The day is the card, so a second dish is another row inside it rather than a second card. With a price per dish there is nothing left for a price column to hold, so it goes instead where a printed menu puts it - on a mw-leader-row, at the end of the line it prices. The stamp does not change at all: it still centres against whatever the card holds beside it, two rows or ten.

The menu changes every week. No reservation, while the pot lasts.

Contact

The practical block at the end of a site - when we are open, how to reach us. Only the second half is a component: mw-contact is an <address> with its italics undone and a label column that keeps the values under each other. The hours are a <dl> of mw-leader-row, because a day and its times with a line between them is the row that component already is.

Simple Pagination

The same frame as a calendar - an arrow on each side of the title, content below - but the body is yours. Not a page-number list; the paging itself is your job, mw-pagination-loading dims the body while the next page is on its way.

Numbered Pages

mw-pagination-pages for a list or a table. aria-current="page" marks where you are, aria-disabled="true" an arrow that leads nowhere. On a phone the numbers give way to mw-pagination-status between the arrows.

Timelines

Big Timeline

You can use every card within the timeline content wrapper.

Simple Timeline

Here you can also use every card within the timeline content wrapper.

Compact Timeline

An activity feed or an audit log: a dot and a time per line, as many lines as there are, no entrance to wait for. The dot takes a tone from mw-timeline-compact-success and its siblings.

Image Gallery

A slider for photos: swipe, arrows, dots and a caption read off the slide itself. The dots are real buttons, so the fourth picture is reachable without a mouse.

❮

❯

Beautiful Mountain

Portrait Gallery

Upright photos in a strip the browser scrolls itself: a swipe on a phone, arrows under a mouse, and the next photo always peeks in at the edge. One slide on a phone, two and a half on a tablet, three on a desktop. A photo in the other orientation - the lake below - is not cropped to a sliver but shown whole, over a blurred copy of itself. mw-portrait-gallery-gap-sm and mw-portrait-gallery-gap-lg change the gaps.

Story shape

mw-portrait-gallery-tall turns the slides into 9:16, the shape of a phone screen - for stories, reels and screenshots. A video works like a photo; the square balloon gets the same blurred frame the lake did.

Mosaic

Photos of any shape in one grid. The script reads each photo's proportions from its width and height and gives it a tile to match - wide for landscape, tall for portrait, square for the rest - and the smaller tiles fill the holes. The tile crops, the lightbox does not: a tap opens the photo whole with its caption, and a swipe moves on to the next one. mw-mosaic-gap-sm and mw-mosaic-gap-lg change the gaps.

Photo Feed

Photos in the grid everyone knows from their phone, in a framed box that shows three rows and scrolls - mw-feed-rows-2 shows two, mw-feed-plain drops the frame. A strip of the next row stays in view, so the box reads as scrollable. A tap opens the photo as a card, with its text if the figcaption has any. No script: the tile is a button with popovertarget, the card a popover - in Angular that is [attr.popovertarget] and a matching [id]. mw-feed-square switches to square tiles.

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

𝗫

Story Archive

Stories that stay. A circle opens its story full screen on a phone and phone-shaped on a desktop; every frame shows for five seconds and a bar at the top counts them off - that part is CSS alone. A few lines of script add the rest: a tap on the right moves on, on the left goes back (arrows under a mouse), a video starts when its frame comes up, the story closes at its end. Holding a finger on it or the pause button stops it; Escape, the cross or a click beside it close it. With reduced motion set in the system nothing plays by itself - the frames become a strip to swipe through instead.

Coast

Coast 𝗫

Nights

Nights 𝗫

North

North 𝗫

Hikes

Hikes 𝗫

Up high

Up high 𝗫

Content Slider

Image Slider

Base View Lake Forest Field Trees

Testimonials

A quote card with its source - a figure, because quote and attribution belong together. One voice may stand above the grid as mw-testimonial-featured; the rest flow in mw-columns-3, the masonry layout for cards of unequal height. The cards below also carry mw-reveal - scroll them into view to see the entrance. Three of them are dated: mw-testimonial-date is a time element on the right edge of the source line, month and year. It is optional on purpose - a dated quote ages, so only show it where the voices are kept fresh.

Prose

Long-form running text - a legal page, terms, a plain article. One class on the container, bare h2/h3/p/ul inside: exactly what a CMS or a JSON-driven page produces. Headings stay deliberately small - in a document they structure the reading, they do not compete with the page title.

Media

Self-hosted audio and video. The framework ships no player - the native controls are the player, and accent-color already brands them. The wrapper makes the element a full-width block; a video also gets the surface silhouette and a resting shadow, same markup with a <video> element inside.