# PageSugar components

> Every published component, 111 in total.
> Each Markdown twin below carries the component’s full exported source.

Page: https://pagesugar.com/components

## Components

### Modal dialog

A modal dialog for a focused task: title, optional description, a body that scrolls on its own and a raised footer band of actions, with focus held inside and returned to the opener.

- ID: `cmp_modal_dialog_01`
- Markdown (source included): https://pagesugar.com/components/modal-dialog-01.md
- Disclosure, overlays, and contextual interaction · Svelte · v1.0.2 · has runtime dependencies

### Page container

One element that centres content at a named width (prose, narrow, default, wide or full) and keeps a 16, 24 or 32 px gutter from the screen edge. No vertical space, no background.

- ID: `cmp_page_container_01`
- Markdown (source included): https://pagesugar.com/components/page-container-01.md
- Layout and page composition · Svelte · v1.0.2

### Site header

A responsive site header with a brand link, primary links with one level of dropdowns, a call to action, optional actions and a small-screen drawer.

- ID: `cmp_site_header_01`
- Markdown (source included): https://pagesugar.com/components/site-header-01.md
- Headers and website navigation · Svelte · v1.0.3

### Site shell

The outer frame of every page: a skip link, optional announcement bar, header, main landmark and footer, with the footer held at the bottom of short pages and anchors kept clear of a sticky header.

- ID: `cmp_site_shell_01`
- Markdown (source included): https://pagesugar.com/components/site-shell-01.md
- Layout and page composition · Svelte · v1.0.2

### Split layout

Two content regions side by side on proportional columns, stacking to one column in a chosen order below a breakpoint measured on the component's own width. The DOM order is always primary then secondary.

- ID: `cmp_split_layout_01`
- Markdown (source included): https://pagesugar.com/components/split-layout-01.md
- Layout and page composition · Svelte · v1.0.1

### Announcement bar

A thin band above the site header with one short message, an optional badge and link, an optional dismiss button remembered per message id, and an expiry the server can decide.

- ID: `cmp_announcement_bar_01`
- Markdown (source included): https://pagesugar.com/components/announcement-bar-01.md
- Headers and website navigation · Svelte · v1.0.1

### Content-and-sidebar layout

A fluid main column beside a fixed-width sidebar landmark, parted by one full-height hairline. The sidebar can stick below a page header and scroll on its own, and stacks before or after the content in a narrow column.

- ID: `cmp_sidebar_layout_01`
- Markdown (source included): https://pagesugar.com/components/sidebar-layout-01.md
- Layout and page composition · Svelte · v1.0.1

### Mobile navigation drawer

A Menu button that opens a native modal drawer: large primary links, smaller secondary links and one call to action pinned to the foot, with focus handling, scroll lock and close on link.

- ID: `cmp_mobile_nav_drawer_01`
- Markdown (source included): https://pagesugar.com/components/mobile-nav-drawer-01.md
- Headers and website navigation · Svelte · v1.0.2

### Price display

One price, formatted from a number with Intl.NumberFormat for an explicit locale and currency, with an optional From prefix, billing unit and tax qualifier on the amount's baseline, and one full phrase for screen readers.

- ID: `cmp_price_display_01`
- Markdown (source included): https://pagesugar.com/components/price-display-01.md
- Pricing and plan presentation · Svelte · v1.0.2

### Primary navigation

A horizontal row of a website's main destinations with a current-page bar or pill, and a More disclosure that collects the trailing items that do not fit.

- ID: `cmp_primary_nav_01`
- Markdown (source included): https://pagesugar.com/components/primary-nav-01.md
- Headers and website navigation · Svelte · v1.0.2

### Sticky region

Keeps one block in view while its parent scrolls: a contents rail or order summary held below a sticky header, or a bottom action bar with safe-area padding. Pure CSS, from a chosen breakpoint.

- ID: `cmp_sticky_region_01`
- Markdown (source included): https://pagesugar.com/components/sticky-region-01.md
- Layout and page composition · Svelte · v1.0.1

### Dropdown navigation

A row of top-level links where some items are buttons that open a compact panel of related links, with optional one-line descriptions, an overview link for the section's own page and a footer shelf.

- ID: `cmp_dropdown_nav_01`
- Markdown (source included): https://pagesugar.com/components/dropdown-nav-01.md
- Headers and website navigation · Svelte · v1.0.1

### Split-media hero

An opening section with the headline, copy and actions beside an image or a muted looping video. The media reserves its aspect ratio, stacks under the copy on phones and swaps sides with one prop.

- ID: `cmp_hero_split_media_01`
- Markdown (source included): https://pagesugar.com/components/hero-split-media-01.md
- Heroes and page introductions · Svelte · v1.0.2

### Product-screenshot hero

An opening section with the headline and actions above a large product screenshot in a browser frame, a phone frame or none. The frame reserves the image's shape and can run into the section's bottom edge.

- ID: `cmp_hero_product_screenshot_01`
- Markdown (source included): https://pagesugar.com/components/hero-product-screenshot-01.md
- Heroes and page introductions · Svelte · v1.0.2

### Simple pricing grid

Compare up to three plans a row and lift the recommended one. Prices, feature lists and buttons line up across cards; each button links to your signup, checkout or contact page.

- ID: `cmp_pricing_grid_001`
- Markdown (source included): https://pagesugar.com/components/pricing-grid-01.md
- Pricing and plan presentation · Svelte · v1.1.2

### Billing period switcher

A monthly, quarterly or annual switch for a pricing section: native radios styled as one pill track, a saving note per option, and the chosen period's payment commitment beneath. It changes displayed prices only.

- ID: `cmp_pricing_billing_toggle_01`
- Markdown (source included): https://pagesugar.com/components/pricing-billing-toggle-01.md
- Pricing and plan presentation · Svelte · v1.0.2

### Pricing comparison table

A feature matrix comparing two to five plans across grouped rows. Every cell is included, not included, limited with a note, or a written value, and the highlighted plan runs as one band from header to last row.

- ID: `cmp_pricing_comparison_table_01`
- Markdown (source included): https://pagesugar.com/components/pricing-comparison-table-01.md
- Pricing and plan presentation · Svelte · v1.1.0

### Feature grid

A feature section: eyebrow, heading and intro over a 2, 3 or 4 column grid of features, set as cells of one hairline-ruled panel, a filled panel or ruled cards, with rows aligned by subgrid.

- ID: `cmp_feature_grid_01`
- Markdown (source included): https://pagesugar.com/components/feature-grid-01.md
- Features, services, benefits, and process · Svelte · v1.0.2

### Alternating feature sections

A product tour as a run of text-and-media rows: a compact text column beside a larger framed image, the image swapping sides row by row from lg and stacking under the copy on phones.

- ID: `cmp_alternating_features_01`
- Markdown (source included): https://pagesugar.com/components/alternating-features-01.md
- Features, services, benefits, and process · Svelte · v1.0.2

### Feature spotlight

One capability given a full section: eyebrow, heading, detailed copy, check-marked points and up to two actions beside a large screenshot or video set in a quiet frame. Media swaps sides at lg; copy stays first.

- ID: `cmp_feature_spotlight_01`
- Markdown (source included): https://pagesugar.com/components/feature-spotlight-01.md
- Features, services, benefits, and process · Svelte · v1.0.2

### Minimal footer

A single-band site footer: the brand and a short row of links on one line, with the copyright and policy links beneath a hairline on the same two edges. Inline or centred.

- ID: `cmp_footer_minimal_01`
- Markdown (source included): https://pagesugar.com/components/footer-minimal-01.md
- Footers and public policy presentation · Svelte · v1.0.1

### Customer logo strip

One row of customer or partner logos under a short label, each sized by its proportions so wordmarks and square marks carry equal weight. Static wrap or a slow, pausable marquee.

- ID: `cmp_customer_logo_strip_01`
- Markdown (source included): https://pagesugar.com/components/customer-logo-strip-01.md
- Trust, testimonials, and social proof · Svelte · v1.0.2

### Feature tabs

A tabbed feature section: an introduction, an underline tab row, and a panel with the feature copy beside a framed screenshot or product surface, or a points list when there is no media.

- ID: `cmp_feature_tabs_001`
- Markdown (source included): https://pagesugar.com/components/feature-tabs-01.md
- Features, services, benefits, and process · Svelte · v1.1.3 · has runtime dependencies

### Multi-column footer

A site footer with a brand block, contact details and two to five headed link columns, each hung from one shared rule, over a small-print row with copyright and legal links.

- ID: `cmp_footer_multi_column_01`
- Markdown (source included): https://pagesugar.com/components/footer-multi-column-01.md
- Footers and public policy presentation · Svelte · v1.0.2

### Section heading

A section introduction: optional eyebrow, a heading whose level is set apart from its size, a description held to about 70 characters a line and an optional action that sits on the text's last line.

- ID: `cmp_section_heading_01`
- Markdown (source included): https://pagesugar.com/components/section-heading-01.md
- Layout and page composition · Svelte · v1.0.2

### Testimonial grid

A section of customer quotes shown all at once, in equal rows or packed masonry columns, with one quote optionally set large across two columns. Attributions line up across each row.

- ID: `cmp_testimonial_grid_01`
- Markdown (source included): https://pagesugar.com/components/testimonial-grid-01.md
- Trust, testimonials, and social proof · Svelte · v1.0.2

### Text-first hero

A homepage opener built only from type: an optional eyebrow, a large headline, a supporting paragraph, a filled primary link, an optional secondary link and an optional note. No media, and no client JavaScript required.

- ID: `cmp_hero_text_first_01`
- Markdown (source included): https://pagesugar.com/components/hero-text-first-01.md
- Heroes and page introductions · Svelte · v1.0.2

### Feature card

One capability on a card: an optional icon or framed image, a title with an optional badge, a short description and a detail link pinned to the bottom, so cards in a row line up.

- ID: `cmp_feature_card_01`
- Markdown (source included): https://pagesugar.com/components/feature-card-01.md
- Features, services, benefits, and process · Svelte · v1.0.2

### Legal links row

A compact row of policy links (privacy, terms, cookies, accessibility) for a footer's small print or a checkout page, with optional copyright and a Cookie settings button, divided by CSS dots or bars.

- ID: `cmp_footer_legal_links_01`
- Markdown (source included): https://pagesugar.com/components/footer-legal-links-01.md
- Footers and public policy presentation · Svelte · v1.0.1

### Newsletter footer

A site footer led by a newsletter signup, one field-and-button row under a short title, with link columns beside or below it and a copyright bar. Connect your own email service.

- ID: `cmp_footer_newsletter_01`
- Markdown (source included): https://pagesugar.com/components/footer-newsletter-01.md
- Footers and public policy presentation · Svelte · v1.0.1 · external service required

### Social links group

A compact list of links to an organisation's own social profiles: optically balanced monochrome marks on even square targets, with optional names, handles and a heading. Ships no URLs of its own.

- ID: `cmp_footer_social_links_01`
- Markdown (source included): https://pagesugar.com/components/footer-social-links-01.md
- Footers and public policy presentation · Svelte · v1.0.1

### Content tabs

Tabs that switch between related panels: an underline row or a segmented pill track, horizontal or as a vertical rail, with optional icons and count badges, overflow scrolling and manual activation.

- ID: `cmp_content_tabs_01`
- Markdown (source included): https://pagesugar.com/components/content-tabs-01.md
- Disclosure, overlays, and contextual interaction · Svelte · v1.0.2 · has runtime dependencies

### Process steps

Numbered steps of a linear process for a "How it works" section: a row with a rule running between the markers from 1024 px, a vertical rail below it, and an optional closing action.

- ID: `cmp_process_steps_01`
- Markdown (source included): https://pagesugar.com/components/process-steps-01.md
- Features, services, benefits, and process · Svelte · v1.0.2

### FAQ accordion

Questions and plain-text answers in a hairline-divided accordion, with the section heading in a left rail on wide screens. Visitors open the answers they need with disclosure buttons.

- ID: `cmp_faq_accordion_001`
- Markdown (source included): https://pagesugar.com/components/faq-accordion-01.md
- FAQs, documentation, and public help · Svelte · v1.1.3

### Grouped FAQ

FAQ questions split into named topics, each with a heading and native disclosures, and a topic index that jumps to each group, above the groups or in a sticky side column.

- ID: `cmp_grouped_faq_01`
- Markdown (source included): https://pagesugar.com/components/grouped-faq-01.md
- FAQs, documentation, and public help · Svelte · v1.0.2

### Accordion

A group of headed panels that open one at a time or several at once, set as one hairline panel of rows or as separate cards. Each row can carry its current value, so closed rows still read as a summary.

- ID: `cmp_accordion_group_01`
- Markdown (source included): https://pagesugar.com/components/accordion-group-01.md
- Disclosure, overlays, and contextual interaction · Svelte · v1.0.2

### Newsletter signup

A dark newsletter band that splits the offer from a single control row holding the field and its button. Connect your own email service to accept subscriptions.

- ID: `cmp_newsletter_signup_001`
- Markdown (source included): https://pagesugar.com/components/newsletter-signup-01.md
- Calls to action, lead capture, and promotion · Svelte · v2.1.2 · external service required

### Call-to-action section

A closing call-to-action section: a dark band with a display-size headline, one filled action and an optional text-link secondary. Centred or start-aligned, with optional media, or plain on the page.

- ID: `cmp_cta_section_01`
- Markdown (source included): https://pagesugar.com/components/cta-section-01.md
- Calls to action, lead capture, and promotion · Svelte · v1.0.2

### Testimonial card

One customer quote with name, role, company, portrait or initials, optional logo and source link. A card for grids and rows, or a large featured quote set in display type mid-page.

- ID: `cmp_testimonial_card_01`
- Markdown (source included): https://pagesugar.com/components/testimonial-card-01.md
- Trust, testimonials, and social proof · Svelte · v1.0.2

### Action button

A labelled action button in primary, secondary, ghost and destructive priorities and three sizes, with optional icons and a pending state that holds its width and focus. Renders a \<button\>, or an \<a\> when given href.

- ID: `cmp_action_button_01`
- Markdown (source included): https://pagesugar.com/components/action-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.2

### Choice cards

Radio or checkbox choices set as cards in a fieldset: title, description, a price at the foot, optional media and badge. Native inputs, so it submits without JavaScript; rows share their lines through subgrid.

- ID: `cmp_choice_cards_01`
- Markdown (source included): https://pagesugar.com/components/choice-cards-01.md
- Selection and specialised pickers · Svelte · v1.0.0

### Form field

One form field in the GOV.UK order: label, hint, error, control, optional character count. It wires the ids so the control gets aria-describedby and aria-invalid, and hangs an error rule beside the field.

- ID: `cmp_form_field_01`
- Markdown (source included): https://pagesugar.com/components/form-field-01.md
- Form structure, validation, and submission · Svelte · v1.0.2

### Results statistics

A band of headline figures, each paired with what it measures and when, with numbered methodology notes linked both ways. Row, two-by-two or split beside the heading; plain, panel or dark.

- ID: `cmp_results_statistics_01`
- Markdown (source included): https://pagesugar.com/components/results-statistics-01.md
- Trust, testimonials, and social proof · Svelte · v1.0.1

### Text reveal

A heading that reveals its words, lines or characters once, within a capped duration, while the full text stays readable to screen readers, search engines and visitors without JavaScript.

- ID: `cmp_text_reveal_01`
- Markdown (source included): https://pagesugar.com/components/text-reveal-01.md
- Optional visual and motion enhancements · Svelte · v1.0.2

### Button group

A labelled group of related buttons, spaced (wrapping, placed by align) or attached as one strip with single hairline seams and outer-only corners, in a row or a column. Your buttons go in as children.

- ID: `cmp_button_group_01`
- Markdown (source included): https://pagesugar.com/components/button-group-01.md
- Buttons, links, and action controls · Svelte · v1.0.1

### Icon button

A square or round icon-only button in primary, secondary and ghost priorities and three sizes, with a required accessible name that doubles as a hover and focus hint, and an optional pressed state for toggles.

- ID: `cmp_icon_button_01`
- Markdown (source included): https://pagesugar.com/components/icon-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.1

### Load more button

A load-more control for the foot of a list: the closing rule fills as a progress track, with a count, one button, and pending, retry and end-of-list states. You supply the paging.

- ID: `cmp_load_more_button_01`
- Markdown (source included): https://pagesugar.com/components/load-more-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.0 · external service required

### Text field

A single-line text field with an always-visible label, Required or Optional marker, hint, consumer-set error, and prefix or suffix adornments inside one border. A native input that submits before hydration.

- ID: `cmp_text_field_01`
- Markdown (source included): https://pagesugar.com/components/text-field-01.md
- Text and numeric inputs · Svelte · v1.0.2

### Text link

A native text link for prose, footers, navigation and card actions: a drawn underline that thickens on hover, a focus ring on every wrapped line, current-page and visited states, arrows, external links and stretched rows.

- ID: `cmp_text_link_01`
- Markdown (source included): https://pagesugar.com/components/text-link-01.md
- Buttons, links, and action controls · Svelte · v1.0.1

### Masked field

A text field for one fixed format, such as a sort code, a US phone number or a product key. Adds separators as you type, keeps the caret in place, re-masks pasted text and submits the raw value.

- ID: `cmp_masked_field_01`
- Markdown (source included): https://pagesugar.com/components/masked-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Search query field

A search box in a role=search GET form: magnifier, query, a clear button once there is text, an optional / shortcut hint and an inset submit, all one shape. Submits ?q= without JS; optional debounced live filtering.

- ID: `cmp_search_query_field_01`
- Markdown (source included): https://pagesugar.com/components/search-query-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Slug field

A slug field that follows a title until edited, shows the finished URL inside the same border, and reports an optional debounced, advisory availability check with a one-click suggestion.

- ID: `cmp_slug_field_01`
- Markdown (source included): https://pagesugar.com/components/slug-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Split button

A default action joined to a chevron that opens a menu of related alternatives, such as Save beside Save as draft and Save and share. Two tab stops in one group; the menu stays inside the viewport.

- ID: `cmp_split_button_01`
- Markdown (source included): https://pagesugar.com/components/split-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.0 · has runtime dependencies

### Autosizing textarea

A labelled textarea that grows a line at a time from minRows to maxRows, then scrolls, with an optional footer for a count or actions inside the same frame. CSS field-sizing first, a measured fallback elsewhere.

- ID: `cmp_autosize_textarea_01`
- Markdown (source included): https://pagesugar.com/components/autosize-textarea-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Character counter

A soft-limit counter for a field's footer: a ring that fills toward the limit beside '92 characters remaining', a warning near it and an error mark past it. Counts graphemes or words and never truncates.

- ID: `cmp_character_counter_01`
- Markdown (source included): https://pagesugar.com/components/character-counter-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Copy button

Copies a supplied string and confirms it inline, as a standalone or icon-only button or joined to a read-only mono field showing the value, with a check that keeps the button's width and a manual-copy note on failure.

- ID: `cmp_copy_button_01`
- Markdown (source included): https://pagesugar.com/components/copy-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.0

### Currency amount field

A money amount field that stores integer minor units plus an ISO 4217 code, shows the currency's mark on the side the locale writes it, formats on blur, and can attach a currency select that never converts.

- ID: `cmp_currency_amount_field_01`
- Markdown (source included): https://pagesugar.com/components/currency-amount-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Custom select

A styled select whose options carry an icon, a label and a line of detail, such as a workspace or a delivery method. Keyboard and typeahead per the APG select-only combobox; posts through a form input.

- ID: `cmp_custom_select_01`
- Markdown (source included): https://pagesugar.com/components/custom-select-01.md
- Selection and specialised pickers · Svelte · v1.0.0 · has runtime dependencies

### Download link

A native download link that shows the file's name, format and size before the click, as a list row, a card with a description or a filled button. A document tile carries the format; rows divide themselves inside a list.

- ID: `cmp_download_link_01`
- Markdown (source included): https://pagesugar.com/components/download-link-01.md
- Buttons, links, and action controls · Svelte · v1.0.0

### Email field

An email field with type=email, autocomplete and the email keyboard, an optional 'Did you mean …?' line for mistyped common domains that applies only when pressed, multiple addresses, hint and consumer-set error.

- ID: `cmp_email_field_01`
- Markdown (source included): https://pagesugar.com/components/email-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Inline editable text

Shows a saved value as text with an Edit button; editing swaps in an input or textarea in the same box with explicit Save and Cancel. An async onSave that can fail keeps the draft, and blur never saves.

- ID: `cmp_inline_edit_text_01`
- Markdown (source included): https://pagesugar.com/components/inline-edit-text-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Measurement field

A number joined to its unit in one shape: a fixed unit segment or a native unit select. Stores amount and unit together, parses the locale's decimal comma, and converts only when you pass convert.

- ID: `cmp_measurement_field_01`
- Markdown (source included): https://pagesugar.com/components/measurement-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Native select

A styled native select with a visible label, Required or Optional marker, hint, placeholder, option groups and a consumer-set error. The browser's own picker opens it, and it submits before any script runs.

- ID: `cmp_native_select_01`
- Markdown (source included): https://pagesugar.com/components/native-select-01.md
- Selection and specialised pickers · Svelte · v1.0.0

### Number field

A labelled number input sized to its bounds: parses the locale's separators and digits, states min and max in the hint, steps with arrow keys, keeps invalid text visible and submits a canonical value.

- ID: `cmp_number_field_01`
- Markdown (source included): https://pagesugar.com/components/number-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Password field

A password field with the right autocomplete for sign-in or a new password, a Show/Hide button and Caps Lock notice inside one border, an optional Forgot password? slot, hint and error. Plain password input before hydration.

- ID: `cmp_password_field_01`
- Markdown (source included): https://pagesugar.com/components/password-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Password requirements

A checklist under a new-password field that marks each of your declared rules as the password meets it, with an optional meter that counts rules met (never an entropy guess) and a debounced spoken summary.

- ID: `cmp_password_requirements_01`
- Markdown (source included): https://pagesugar.com/components/password-requirements-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Percentage field

A percentage input that stores a ratio, a whole percent or basis points while people type the percent they see. Sized to its bounds, with the % sign, the allowed range and float-free conversion.

- ID: `cmp_percentage_field_01`
- Markdown (source included): https://pagesugar.com/components/percentage-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Print button

A print action for pages the site has already prepared for paper. Awaits an optional beforePrint, opens the browser's print dialog, runs afterPrint on afterprint, and never appears in print output.

- ID: `cmp_print_button_01`
- Markdown (source included): https://pagesugar.com/components/print-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.0

### Quantity stepper

A whole-number stepper: decrease and increase buttons joined to an editable value in one shape, following the APG spinbutton, with a bound message that explains a reached limit.

- ID: `cmp_quantity_stepper_01`
- Markdown (source included): https://pagesugar.com/components/quantity-stepper-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Radio group

A fieldset of native radios for exactly one choice, with a legend, help text, per-option descriptions and price or date notes, vertical or wrapping horizontal layout, and a group error. Works in a form before hydration.

- ID: `cmp_radio_group_01`
- Markdown (source included): https://pagesugar.com/components/radio-group-01.md
- Selection and specialised pickers · Svelte · v1.0.0

### Share button

A share button that opens the device's share sheet when it can, and otherwise a small panel with the link, a Copy button that confirms in place and optional plain share links you build.

- ID: `cmp_share_button_01`
- Markdown (source included): https://pagesugar.com/components/share-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.0 · has runtime dependencies

### Tag field

Short text tokens collected as removable chips inside one bordered field. Enter or a comma adds a tag, pasted lists split, duplicates are refused with a message, and each tag submits as its own hidden input.

- ID: `cmp_tag_field_01`
- Markdown (source included): https://pagesugar.com/components/tag-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Textarea field

A labelled multi-line plain-text field: Required or Optional marker, hint that states any maxlength, rows, vertical resize, and a footer row with the error at the start and a counter at the end.

- ID: `cmp_textarea_field_01`
- Markdown (source included): https://pagesugar.com/components/textarea-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Toggle button

A button that holds an on or off state with aria-pressed and a label that never changes. Off is a quiet outlined surface; on fills with the accent and its leading mark fills and ticks, so the state reads in shape as well as colour.

- ID: `cmp_toggle_button_01`
- Markdown (source included): https://pagesugar.com/components/toggle-button-01.md
- Buttons, links, and action controls · Svelte · v1.0.0

### Toggle group

A labelled set of toggle buttons with single or multiple selection: one hairline track with accent plates for the pressed items, or spaced buttons that wrap. Arrow-key roving focus, icon-only hints, no dependencies.

- ID: `cmp_toggle_group_01`
- Markdown (source included): https://pagesugar.com/components/toggle-group-01.md
- Buttons, links, and action controls · Svelte · v1.0.0

### URL field

A web address field that adds https:// on blur and says so, or shows a fixed https:// prefix, with scheme and host rules. javascript: and data: are always refused. A native type=url input before hydration.

- ID: `cmp_url_field_01`
- Markdown (source included): https://pagesugar.com/components/url-field-01.md
- Text and numeric inputs · Svelte · v1.0.0

### Combobox

A select-only combobox: type to filter a popup list by label or alternate names, choose with the arrow keys and Enter, and post the value. Local filtering by default, or a debounced, abortable onSearch.

- ID: `cmp_combobox_01`
- Markdown (source included): https://pagesugar.com/components/combobox-01.md
- Selection and specialised pickers · Svelte · v1.0.0 · has runtime dependencies

### Switch

An on-or-off setting that takes effect at once, as a role="switch" button with a fixed label and optional description. Off is an outlined track with a cross; on fills with a check. Async saves show pending and move back on failure.

- ID: `cmp_switch_01`
- Markdown (source included): https://pagesugar.com/components/switch-01.md
- Selection and specialised pickers · Svelte · v1.0.0

### Floating action

One action held in a bottom corner of the viewport, such as Talk to sales or Back to top. It can wait for a scroll threshold, closes to its icon on phones, and respects safe-area insets.

- ID: `cmp_floating_action_01`
- Markdown (source included): https://pagesugar.com/components/floating-action-01.md
- Buttons, links, and action controls · Svelte · v1.0.0

### Card shell

A card container with optional media, header, body and footer. Outline, elevated or muted surface, three padding presets, and an optional whole-card link that stays one tab stop. Footers line up across a row.

- ID: `cmp_card_shell_01`
- Markdown (source included): https://pagesugar.com/components/card-shell-01.md
- Layout and page composition · Svelte · v1.0.2

### Heading

An h1 to h6 whose visual size is chosen separately from its outline level, on an eight-step scale where leading and tracking tighten as the type grows. Optional eyebrow; inherits the page's font and colour.

- ID: `cmp_heading_01`
- Markdown (source included): https://pagesugar.com/components/heading-01.md
- Typography, identity, and information primitives · Svelte · v1.0.2

### Section wrapper

A page section with four tones, four spacing presets and four container widths. Same-tone neighbours merge into one band, anchor jumps clear a sticky header, and a heading id makes it a named region.

- ID: `cmp_section_wrapper_01`
- Markdown (source included): https://pagesugar.com/components/section-wrapper-01.md
- Layout and page composition · Svelte · v1.0.2

### Aspect-ratio frame

A frame that reserves space at a fixed ratio (16:9, 4:3, 3:2, 1:1, 9:16, 21:9) for an image, video or iframe, so nothing shifts as it loads. Cover or contain, a crop-marked placeholder, an optional caption.

- ID: `cmp_aspect_ratio_frame_01`
- Markdown (source included): https://pagesugar.com/components/aspect-ratio-frame-01.md
- Layout and page composition · Svelte · v1.0.1

### Badge

A short static label that classifies an item, such as Beta or a category name. Six tones, soft, solid and outline fills, two fixed heights, an optional icon or dot; one line, truncated when too long.

- ID: `cmp_badge_01`
- Markdown (source included): https://pagesugar.com/components/badge-01.md
- Typography, identity, and information primitives · Svelte · v1.0.1

### Body text

Body type for one run of ordinary text: three size steps with their own leading and tracking, three tones mixed from the page colour, an em measure, and a p, span or div of your choosing.

- ID: `cmp_body_text_01`
- Markdown (source included): https://pagesugar.com/components/body-text-01.md
- Typography, identity, and information primitives · Svelte · v1.0.1

### Brand lockup

A logo mark and brand name set as one unit, side by side or stacked, at three sizes, with an optional tagline and an optional link home. The mark keeps its ratio; the name is read once.

- ID: `cmp_brand_lockup_01`
- Markdown (source included): https://pagesugar.com/components/brand-lockup-01.md
- Typography, identity, and information primitives · Svelte · v1.0.1

### Formatted number

Formats one supplied number as locale text through Intl.NumberFormat, with the locale always explicit: decimals, percentages, currency, units and compact notation, inside a \<data\> element that keeps the raw value.

- ID: `cmp_formatted_number_01`
- Markdown (source included): https://pagesugar.com/components/formatted-number-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Full-bleed section

A band whose colour, image or video runs to both edges of the viewport while its content keeps the page's edge. Four overlays for text contrast, minimum heights that never clip, and a breakout mode for article columns.

- ID: `cmp_full_bleed_section_01`
- Markdown (source included): https://pagesugar.com/components/full-bleed-section-01.md
- Layout and page composition · Svelte · v1.0.1

### Icon

One inline SVG, from path data or child shapes, with a required label that makes the accessibility choice explicit: null hides it, a string names it. 1em by default, five fixed steps, fill or stroke, currentColor.

- ID: `cmp_icon_01`
- Markdown (source included): https://pagesugar.com/components/icon-01.md
- Typography, identity, and information primitives · Svelte · v1.0.1

### Inset panel

A tinted panel that sets a note, warning, tip or key figure apart inside a page. Five tones, an optional icon hung level with the first line above a thin rail, an optional title, and three padding presets.

- ID: `cmp_inset_panel_01`
- Markdown (source included): https://pagesugar.com/components/inset-panel-01.md
- Layout and page composition · Svelte · v1.0.1

### Lead paragraph

The introductory paragraph under a page title or hero headline: one p set a step above body copy, on a measure set in em so it holds about sixty characters at either size. Inherits font and colour.

- ID: `cmp_lead_paragraph_01`
- Markdown (source included): https://pagesugar.com/components/lead-paragraph-01.md
- Typography, identity, and information primitives · Svelte · v1.0.1

### Section divider

A divider between content areas: a hairline rule, a rule split by a visible label such as 'or' or 'Week 2', or a wave or slant that carries one section tone into the next without a seam.

- ID: `cmp_section_divider_01`
- Markdown (source included): https://pagesugar.com/components/section-divider-01.md
- Layout and page composition · Svelte · v1.0.1

### Rating display

A supplied rating as stars or a bar, the score with its scale in words, and an optional label, review count link and source. Floors partial fills, clamps to the scale, and shows text when there are no reviews.

- ID: `cmp_rating_display_01`
- Markdown (source included): https://pagesugar.com/components/rating-display-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Status badge

Renders a supplied status key as a label, a tone and a shape, so state never rests on colour alone. Each tone has its own icon or compact mark; unknown keys fall back to a neutral label.

- ID: `cmp_status_badge_01`
- Markdown (source included): https://pagesugar.com/components/status-badge-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Avatar

One person or organisation as a fixed-size circle or rounded square: a photo, falling back to initials on a stable colour, then a generic icon. Five sizes, an optional presence dot and a decorative mode for use beside a visible name.

- ID: `cmp_avatar_01`
- Markdown (source included): https://pagesugar.com/components/avatar-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Avatar group

A row of avatars for the people on a board, an event or a course: overlapping or spaced, up to a limit, then a +N bubble counted from the real total, with optional caption text. Initials stand in for missing photos.

- ID: `cmp_avatar_group_01`
- Markdown (source included): https://pagesugar.com/components/avatar-group-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Bounded meter

A measurement within a known range, such as storage used or a password score: label, value text and a bar on role="meter", toned by the HTML meter regions, with the track cut at its thresholds.

- ID: `cmp_bounded_meter_01`
- Markdown (source included): https://pagesugar.com/components/bounded-meter-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Copyable value

One value such as an order number, API key or wallet address with a Copy button attached, a polite confirmation, middle truncation that never changes what is copied, and an optional mask with a Show toggle.

- ID: `cmp_copyable_value_01`
- Markdown (source included): https://pagesugar.com/components/copyable-value-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Key-value display

Label and value pairs in a native description list, for order details, specs and account facts. Inline, stacked or grid layouts, optional hairline dividers, and an announced marker for missing values.

- ID: `cmp_key_value_display_01`
- Markdown (source included): https://pagesugar.com/components/key-value-display-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Keyboard shortcut hint

A keyboard combination or sequence as nested kbd keycaps: Ctrl + K, ⌘K or G then I. One prop maps Mod to ⌘ or Ctrl, symbol keys carry spoken names, and it never listens for keys.

- ID: `cmp_keyboard_shortcut_hint_01`
- Markdown (source included): https://pagesugar.com/components/keyboard-shortcut-hint-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Metric display

One headline number with its label, an optional unit, a signed comparison such as Up 12% vs last month, and a source footnote. Formats with an explicit locale; says direction in words, tones by whether it is good news.

- ID: `cmp_metric_display_01`
- Markdown (source included): https://pagesugar.com/components/metric-display-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### QR code display

Encodes a URL or text as an inline SVG QR code during render, on a white tile with a four-module quiet zone, and shows the destination beside it as a link or text, with an optional copy button.

- ID: `cmp_qr_code_display_01`
- Markdown (source included): https://pagesugar.com/components/qr-code-display-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0 · has runtime dependencies

### Rich-text display

Renders a structured content tree (paragraphs, headings, lists, quotes, images, code and rules) through a fixed set of Svelte parts, with a bounded reading column, per-node snippet overrides and no HTML strings.

- ID: `cmp_rich_text_display_01`
- Markdown (source included): https://pagesugar.com/components/rich-text-display-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Tag chip

A compact pill for a category, keyword or filter: static, linked, toggle or removable. The remove button is a sibling with its own name, and a toggle's plus turns into a check in place, so selecting never moves the row.

- ID: `cmp_tag_chip_01`
- Markdown (source included): https://pagesugar.com/components/tag-chip-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Timestamp

Shows a supplied instant as an absolute date or a relative phrase such as 3 hours ago, inside a time element with an ISO datetime and the full date for screen readers. Server renders absolute; relative follows after mount.

- ID: `cmp_timestamp_01`
- Markdown (source included): https://pagesugar.com/components/timestamp-01.md
- Typography, identity, and information primitives · Svelte · v1.0.0

### Bento grid

An asymmetric grid of feature cards with authored spans (1x1, 2x1, 1x2, 2x2) in three or four columns, media at the foot of each card, optional whole-card links and a one-column phone layout with its own order.

- ID: `cmp_bento_grid_01`
- Markdown (source included): https://pagesugar.com/components/bento-grid-01.md
- Layout and page composition · Svelte · v1.0.1

### Responsive grid

A CSS grid that fits as many columns as a minimum item width allows, or takes explicit counts per breakpoint. Works in sidebars through container queries and lines card parts up with subgrid.

- ID: `cmp_responsive_grid_01`
- Markdown (source included): https://pagesugar.com/components/responsive-grid-01.md
- Layout and page composition · Svelte · v1.0.1

### Vertical stack

A flex column that spaces its children from a six-step gap scale and aligns them on the cross axis. Replaces margins between siblings in card bodies, forms and lists, with list semantics kept on ul and ol.

- ID: `cmp_stack_layout_01`
- Markdown (source included): https://pagesugar.com/components/stack-layout-01.md
- Layout and page composition · Svelte · v1.0.1

### Inline cluster

A wrapping flex row for tags, buttons, links and meta items. Four gap presets tuned to what they hold, start/center/end/between justification and baseline alignment. No client JavaScript.

- ID: `cmp_cluster_layout_01`
- Markdown (source included): https://pagesugar.com/components/cluster-layout-01.md
- Layout and page composition · Svelte · v1.0.1

### Celebration burst

A brief confetti or sparkle burst that rises from the control that earned it, drawn on a temporary canvas and gone in 1.6 s by default. Pair it with a real text confirmation; it never replaces one.

- ID: `cmp_celebration_burst_01`
- Markdown (source included): https://pagesugar.com/components/celebration-burst-01.md
- Optional visual and motion enhancements · Svelte · v1.0.1

### Checkbox

A native checkbox with a drawn box, a label, optional help text and an error, plus a dash for select-all rows. The box stays level with the label's first line however far it wraps.

- ID: `cmp_checkbox_01`
- Markdown (source included): https://pagesugar.com/components/checkbox-01.md
- Selection and specialised pickers · Svelte · v1.0.0