Molecules combine atoms into distinct, reusable UI patterns.
| Component | Tag | Description |
|---|---|---|
| Box | <ed-box> |
Box A generic container component providing padding and background styling. Box is a simple layout... |
| Card | <ed-card> |
A flexible container component that organizes content into distinct sections: header, body, and... |
| Feature | <ed-feature> |
|
| Hero | <ed-hero> |
|
| Media Block | <ed-media-block> |
|
| Skeleton | <ed-skeleton> |
| Component | Tag | Description |
|---|---|---|
| Button | <ed-button> |
Interactive button or link component. Renders as a semantic `<button>` or `<a>` element depending on... |
| Tag List | <ed-tag-list> |
A semantic list container for arranging multiple tag elements with consistent spacing. Tag list... |
| Component | Tag | Description |
|---|---|---|
| Tooltip | <ed-tooltip> |
A small popup that appears on hover/focus to provide supplementary information. Tooltips display... |
| Tooltip Trigger | <ed-tooltip-trigger> |
| Component | Tag | Description |
|---|---|---|
| Checkbox Field | <ed-checkbox-field> |
A container for grouping checkbox input items with a shared legend and optional field notes. ... |
| Counter | <ed-counter> |
|
| File Upload | <ed-file-upload> |
A form-associated file upload component with drag-and-drop support and upload progress tracking. ... |
| Inline Checkbox | <ed-inline-checkbox> |
|
| Radio Field | <ed-radio-field> |
A container for grouping radio input items with a shared legend and optional field notes. ... |
| Select Field | <ed-select-field> |
A form-associated dropdown select component that integrates with HTML forms via ElementInternals... |
| Text Field | <ed-text-field> |
A form-associated single-line text input component that integrates with HTML forms via... |
| Textarea Field | <ed-textarea-field> |
A form-associated multi-line text area component that integrates with HTML forms via... |
| Toggle | <ed-toggle> |
A form-associated toggle switch component that integrates with HTML forms via ElementInternals API. ... |
| Component | Tag | Description |
|---|---|---|
| Logo | <ed-logo> |
Logo/branding component typically used in headers and footers. Renders as a link wrapping an image... |
| Component | Tag | Description |
|---|---|---|
| Show Hide | <ed-show-hide> |
A collapsible panel component that shows/hides content with an icon-labeled toggle button. Content... |
| Show More | <ed-show-more> |
A content expansion component with "Show More/Show Less" functionality. Content is divided into... |
| Component | Tag | Description |
|---|---|---|
| Band | <ed-band> |
Band A full-width background container for creating visual sections with distinct backgrounds or... |
| Grid | <ed-grid> |
Grid A responsive CSS Grid container for laying out child `<ed-grid-item>` elements. Supports... |
| Layout | <ed-layout> |
Layout A two-column (or nested multi-column) layout container for page-level structure. Layout... |
| Layout Container | <ed-layout-container> |
Layout Container A fixed-width container that caps content to a max-width (70rem by default, 50rem... |
| Linelength Container | <ed-linelength-container> |
|
| Main | <ed-main> |
A semantic HTML5 `<main>` wrapper for primary page content. EdMain renders as a semantic `<main>`... |
| Nav Container | <ed-nav-container> |
Wrapper container for header navigation content. A simple semantic `<div>` wrapper that holds... |
| Component | Tag | Description |
|---|---|---|
| List | <ed-list> |
List container component for displaying structured data or content as a vertical list. Provides... |
| Component | Tag | Description |
|---|---|---|
| Alert | <ed-alert> |
Default icon names mapped to each variant. Used when no explicit iconName is provided. / const... |
| Badge | <ed-badge> |
Small informational badge component for displaying status, counts, or labels. Often used to... |
| Toast | <ed-toast> |
Default icon names mapped to each variant. Used when no explicit iconName is provided. / const... |
| Component | Tag | Description |
|---|---|---|
| Breadcrumbs | <ed-breadcrumbs> |
Breadcrumb navigation showing page hierarchy and path. Renders a semantic `<nav>` with an `<ol>`... |
| Global Nav | <ed-global-nav> |
|
| Icon Link List | <ed-icon-link-list> |
|
| Link List | <ed-link-list> |
Vertical list of links with flexible layout and styling options. Renders a semantic `<ul>`... |
| Pagination | <ed-pagination> |
Pagination navigation for browsing multi-page content. Renders an ordered list of page links with... |
| Primary Nav | <ed-primary-nav> |
Primary navigation component for main site/app navigation. Renders a semantic `<nav>` element... |
| Utility Nav | <ed-utility-nav> |
| Component | Tag | Description |
|---|---|---|
| Key Value Table | <ed-key-value-table> |
A semantic table component for displaying key-value pair data. Renders as an HTML table with... |
| Component | Tag | Description |
|---|---|---|
| Page Header | <ed-page-header> |
A page-level title area with optional description and supplementary content. Page header displays... |
| Component | Tag | Description |
|---|---|---|
| Toolbar | <ed-toolbar> |
A horizontal bar for grouping action buttons and controls with optional left and right sections. ... |