@ulu/frontend
Version:
A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op
495 lines • 9.43 MB
JSON
{
"name": "@ulu/frontend",
"prefix": "ulu",
"snippets": {
"themes": [
{
"title": "Theme Switching",
"description": "Using the `theme-light` and `theme-dark` classes to change the visual context of a section.",
"html": "<div>\n <button class=\"button\" data-ulu-theme-toggle='{ \"target\": \"#theme-demo-box\" }'>Toggle Theme</button>\n \n <div id=\"theme-demo-box\" class=\"demo-theme-box theme-light padding\">\n <h3 class=\"h3\">Themed Content</h3>\n <p>This section changes its colors based on the applied theme class.</p>\n <button class=\"button\">Themed Button</button>\n </div>\n</div>"
},
{
"title": "Theme Inversion",
"description": "The `theme-inverse` utility automatically applies the opposite theme (e.g., dark inside light) based on the current context.",
"html": "<div class=\"demo-theme-box theme-light\">\n <h3 class=\"h3\">Light Context</h3>\n <div class=\"demo-theme-box theme-inverse padding margin-top\">\n <p>This box is automatically inverted to the dark theme because its parent is light.</p>\n <button class=\"button\">Inverted Button</button>\n </div>\n</div>"
}
],
"accordion": [
{
"title": "Basic Accordion",
"description": "A standard accordion stack with plus-to-minus icons and one-at-a-time behavior.",
"html": "<div data-ulu-details-group='{ \"onlyOneOpen\": true }'>\n <details class=\"accordion\">\n <summary class=\"accordion__summary\">\n What is your return policy?\n <span class=\"accordion__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--plus-to-minus\"></span>\n </span>\n </summary>\n <div class=\"accordion__content\">\n <p>You can return any unused item within 30 days of purchase for a full refund.</p>\n </div>\n </details>\n <details class=\"accordion\">\n <summary class=\"accordion__summary\">\n Do you offer customer support?\n <span class=\"accordion__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--plus-to-minus\"></span>\n </span>\n </summary>\n <div class=\"accordion__content\">\n <p>Yes, our customer support team is available 24/7 via email, live chat, or phone.</p>\n </div>\n </details>\n</div>"
},
{
"title": "Transparent Variant",
"description": "The `accordion--transparent` modifier blends the component into the background.",
"html": "<div data-ulu-details-group='{ \"onlyOneOpen\": true }'>\n <details class=\"accordion accordion--transparent\">\n <summary class=\"accordion__summary\">\n Product Features\n <span class=\"accordion__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--angle-right-to-down\"></span>\n </span>\n </summary>\n <div class=\"accordion__content\">\n <ul>\n <li>Water-resistant design</li>\n <li>24-hour battery life</li>\n </ul>\n </div>\n </details>\n <details class=\"accordion accordion--transparent\">\n <summary class=\"accordion__summary\">\n Warranty Information\n <span class=\"accordion__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--angle-right-to-down\"></span>\n </span>\n </summary>\n <div class=\"accordion__content\">\n <p>This product comes with a one-year limited warranty covering manufacturer defects.</p>\n </div>\n </details>\n</div>"
},
{
"title": "Borderless Variant",
"description": "The `accordion--borderless` modifier removes external borders for an inline look.",
"html": "<div data-ulu-details-group='{ \"onlyOneOpen\": true }'>\n <details class=\"accordion accordion--borderless\">\n <summary class=\"accordion__summary\">\n Privacy Settings\n <span class=\"accordion__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--angle-down-to-up\"></span>\n </span>\n </summary>\n <div class=\"accordion__content\">\n <p>Manage who can see your profile and activity status.</p>\n </div>\n </details>\n <details class=\"accordion accordion--borderless\">\n <summary class=\"accordion__summary\">\n Cookie Policy\n <span class=\"accordion__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--angle-down-to-up\"></span>\n </span>\n </summary>\n <div class=\"accordion__content\">\n <p>We use cookies to improve your browsing experience.</p>\n </div>\n </details>\n</div>"
}
],
"badge-stack": [
{
"title": "Basic Badge Stack",
"description": "Overlapping text-based badges.",
"html": "<ul class=\"badge-stack\">\n <li class=\"badge-stack__item\">\n <span class=\"badge badge--small\">\n <span class=\"badge__inner\"><span>JD</span></span>\n </span>\n </li>\n <li class=\"badge-stack__item\">\n <span class=\"badge badge--small\">\n <span class=\"badge__inner\"><span>MS</span></span>\n </span>\n </li>\n <li class=\"badge-stack__item\">\n <span class=\"badge badge--small\">\n <span class=\"badge__inner\"><span>AJ</span></span>\n </span>\n </li>\n <li class=\"badge-stack__item\">\n <span class=\"badge badge--small\">\n <span class=\"badge__inner\"><span>+3</span></span>\n </span>\n </li>\n</ul>"
},
{
"title": "Clickable Image Stack",
"description": "A stack of clickable user profiles with images.",
"html": "<ul class=\"badge-stack\">\n <li class=\"badge-stack__item\">\n <a href=\"#\" class=\"badge badge--small badge--clickable\">\n <div class=\"badge__inner\">\n <img src=\"https://picsum.photos/id/64/100/100\" alt=\"User 1\">\n </div>\n </a>\n </li>\n <li class=\"badge-stack__item\">\n <a href=\"#\" class=\"badge badge--small badge--clickable\">\n <div class=\"badge__inner\">\n <img src=\"https://picsum.photos/id/65/100/100\" alt=\"User 2\">\n </div>\n </a>\n </li>\n <li class=\"badge-stack__item\">\n <a href=\"#\" class=\"badge badge--small badge--clickable\">\n <div class=\"badge__inner\">\n <img src=\"https://picsum.photos/id/66/100/100\" alt=\"User 3\">\n </div>\n </a>\n </li>\n</ul>"
}
],
"badge": [
{
"title": "Basic Badge",
"description": "A standard badge with text.",
"html": "<div class=\"badge\">\n <div class=\"badge__inner\">\n <span>JS</span>\n </div>\n</div>"
},
{
"title": "Badge Sizes",
"description": "Demonstrating small, default, and large badge variants.",
"html": "<div style=\"display: flex; gap: 1rem; align-items: center;\">\n <div class=\"badge badge--small\">\n <div class=\"badge__inner\">\n <span>SM</span>\n </div>\n </div>\n <div class=\"badge\">\n <div class=\"badge__inner\">\n <span>MD</span>\n </div>\n </div>\n <div class=\"badge badge--large\">\n <div class=\"badge__inner\">\n <span>LG</span>\n </div>\n </div>\n</div>"
},
{
"title": "Clickable Badge with Image",
"description": "A badge containing an image that scales on hover.",
"html": "<a href=\"#\" class=\"badge\">\n <div class=\"badge__inner\">\n <img src=\"https://picsum.photos/id/64/300/300\" alt=\"Profile Image\">\n </div>\n</a>"
}
],
"basic-hero": [
{
"title": "Basic Hero",
"description": "A hero section with content and media side-by-side on larger screens.",
"fullscreen": true,
"html": "<div class=\"basic-hero\">\n <div class=\"basic-hero__content container\">\n <div class=\"basic-hero__content-main\">\n <h1 class=\"h1\">Hero Title with Supporting Text</h1>\n <p class=\"type-large\">This is a description that provides more context about the page or section.</p>\n </div>\n <div class=\"basic-hero__content-media\">\n <img src=\"https://picsum.photos/id/10/400/300\" alt=\"Hero Media\">\n </div>\n </div>\n</div>"
},
{
"title": "Centered Hero",
"description": "A centered layout for the hero section.",
"fullscreen": true,
"html": "<div class=\"basic-hero basic-hero--center\">\n <div class=\"basic-hero__content container\">\n <div class=\"basic-hero__content-main\">\n <h1 class=\"h1\">Centered Hero Title</h1>\n <p class=\"type-large\">A brief and compelling reason to explore further.</p>\n </div>\n <div class=\"basic-hero__content-media\">\n <img src=\"https://picsum.photos/id/20/400/300\" alt=\"Hero Media\">\n </div>\n </div>\n</div>"
}
],
"breadcrumb": [
{
"title": "Standard Breadcrumb",
"description": "A typical breadcrumb trail for navigation.",
"html": "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n <li class=\"breadcrumb__item\">\n <a href=\"#\" class=\"breadcrumb__link\">Home</a>\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">/</span>\n </li>\n <li class=\"breadcrumb__item\">\n <a href=\"#\" class=\"breadcrumb__link\">Products</a>\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">/</span>\n </li>\n <li class=\"breadcrumb__item\" aria-current=\"page\">\n <span class=\"breadcrumb__current\">Electronic Gadgets</span>\n </li>\n </ol>\n</nav>"
},
{
"title": "Truncated Breadcrumb",
"description": "Items automatically truncate with an ellipsis if they exceed the `item-max-width`.",
"html": "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n <li class=\"breadcrumb__item\">\n <a href=\"#\" class=\"breadcrumb__link\">Home</a>\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">/</span>\n </li>\n <li class=\"breadcrumb__item\">\n <a href=\"#\" class=\"breadcrumb__link\">This is an extremely long page title that will be truncated by the breadcrumb component</a>\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">/</span>\n </li>\n <li class=\"breadcrumb__item\" aria-current=\"page\">\n <span class=\"breadcrumb__current\">Current Page</span>\n </li>\n </ol>\n</nav>"
}
],
"button-group": [
{
"title": "Standard Button Group",
"description": "A group of buttons with a standard gap between them.",
"html": "<div class=\"button-group\">\n <button class=\"button\">Action 1</button>\n <button class=\"button\">Action 2</button>\n <button class=\"button\">Action 3</button>\n</div>"
},
{
"title": "Joined Button Group",
"description": "Buttons in this group are visually connected, with rounded corners only on the outer edges.",
"html": "<div class=\"button-group button-group--joined\">\n <button class=\"button\">Left</button>\n <button class=\"button is-active\">Middle</button>\n <button class=\"button\">Right</button>\n</div>"
}
],
"button-verbose": [
{
"title": "Standard Verbose Button",
"description": "A button that includes a title and body text, often used for important links or pagination.",
"html": "<a href=\"#\" class=\"button-verbose\">\n <strong class=\"button-verbose__title\">Primary Action Title</strong>\n <span class=\"button-verbose__body\">Additional descriptive text that explains the consequence of this action.</span>\n <span class=\"button-verbose__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--angle-right\"></span>\n </span>\n</a>"
},
{
"title": "Full Width Verbose Button",
"description": "The `button-verbose--full-width` modifier makes the button span the entire width of its container.",
"html": "<a href=\"#\" class=\"button-verbose button-verbose--full-width\">\n <strong class=\"button-verbose__title\">Next Chapter</strong>\n <span class=\"button-verbose__body\">Continue reading about the architecture of the system.</span>\n <span class=\"button-verbose__icon\" aria-hidden=\"true\">\n <span class=\"css-icon css-icon--angle-right\"></span>\n </span>\n</a>"
}
],
"button": [
{
"title": "Primary Button",
"description": "The default button style for main actions.",
"wrapperClass": "demo-theme-box demo-width-small",
"html": "<button class=\"button\">Primary Button</button>"
},
{
"title": "Secondary Button",
"description": "An alternative style for less important actions.",
"html": "<button class=\"button button--secondary\">Secondary Button</button>"
},
{
"title": "Small Button",
"description": "A smaller button variant.",
"html": "<button class=\"button button--small\">Small Button</button>"
},
{
"title": "Large Button",
"description": "A larger button variant.",
"html": "<button class=\"button button--large\">Large Button</button>"
},
{
"title": "Left Aligned Button",
"description": "A button with its content aligned to the left, useful when the button spans a larger width.",
"html": "<button class=\"button button--left\" style=\"width: 100%;\">Left Aligned</button>"
}
],
"callout": [
{
"title": "Basic Callout",
"description": "A simple container to highlight content.",
"html": "<div class=\"callout\">\n <p>This is a default callout. It provides a subtle background to distinguish this section from the rest of the content.</p>\n</div>"
},
{
"title": "Status Callouts",
"description": "Modifiers for different semantic states.",
"html": "<div class=\"callout callout--info\">\n <p><strong>Info:</strong> Use this for helpful tips or additional context.</p>\n</div>\n<div class=\"callout callout--success\">\n <p><strong>Success:</strong> Use this to confirm a positive action or state.</p>\n</div>\n<div class=\"callout callout--warning\">\n <p><strong>Warning:</strong> Use this to alert the user about potential issues.</p>\n</div>\n<div class=\"callout callout--danger\">\n <p><strong>Danger:</strong> Use this for critical errors or irreversible actions.</p>\n</div>"
},
{
"title": "Outline Callout",
"description": "A variant with no background color.",
"html": "<div class=\"callout callout--outline\">\n <p>This is an outline callout. It uses a border without a background fill.</p>\n</div>"
}
],
"captioned-figure": [
{
"title": "Traditional Layout",
"description": "A traditional figure layout with the caption appearing below the image.",
"html": "<figure class=\"captioned-figure captioned-figure--traditional\">\n <img src=\"https://picsum.photos/id/1018/600/400\" alt=\"Landscape photo\">\n <figcaption class=\"captioned-figure__caption\">\n A beautiful landscape captured during sunset.\n </figcaption>\n</figure>"
},
{
"title": "Bottom-Right Overlay",
"description": "The caption is overlaid on the bottom-right of the image using absolute positioning.",
"html": "<figure class=\"captioned-figure captioned-figure--bottom captioned-figure--right\">\n <img src=\"https://picsum.photos/id/1015/600/400\" alt=\"Landscape photo\">\n <figcaption class=\"captioned-figure__caption\">\n Overlay Caption\n </figcaption>\n</figure>"
},
{
"title": "Bottom-Center Overlay",
"description": "The caption is centered at the bottom of the image.",
"html": "<figure class=\"captioned-figure captioned-figure--bottom captioned-figure--center\">\n <img src=\"https://picsum.photos/id/1016/600/400\" alt=\"Landscape photo\">\n <figcaption class=\"captioned-figure__caption\">\n Centered Overlay\n </figcaption>\n</figure>"
}
],
"card-grid": [
{
"title": "Standard Card Grid",
"description": "A responsive grid that automatically fills rows with cards.",
"html": "<div class=\"card-grid\">\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Card 1</h3><p>Content for the first card.</p></div></div>\n </article>\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Card 2</h3><p>Content for the second card.</p></div></div>\n </article>\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Card 3</h3><p>Content for the third card.</p></div></div>\n </article>\n</div>"
},
{
"title": "Compact Card Grid",
"description": "A grid with smaller minimum column widths and tighter gaps.",
"html": "<div class=\"card-grid card-grid--compact\">\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Compact 1</h3></div></div>\n </article>\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Compact 2</h3></div></div>\n </article>\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Compact 3</h3></div></div>\n </article>\n <article class=\"card\">\n <div class=\"card__body\"><div class=\"card__main\"><h3 class=\"card__title\">Compact 4</h3></div></div>\n </article>\n</div>"
}
],
"card": [
{
"title": "Basic Card",
"description": "A standard card with a title, body content, and a footer.",
"html": "<article class=\"card\">\n <div class=\"card__body\">\n <div class=\"card__main\">\n <h3 class=\"card__title\">Card Title</h3>\n <p>This is the main content of the card. It provides a brief summary or introduction to a more detailed resource.</p>\n </div>\n </div>\n <div class=\"card__footer\">\n <a href=\"#\" class=\"button button--small\">Read More</a>\n </div>\n</article>"
},
{
"title": "Card with Image",
"description": "A card that includes a featured image at the top.",
"html": "<article class=\"card\">\n <div class=\"card__image\">\n <img src=\"https://picsum.photos/id/1035/600/400\" alt=\"Card Image\">\n </div>\n <div class=\"card__body\">\n <div class=\"card__main\">\n <h3 class=\"card__title\">Featured Resource</h3>\n <p>Discover interesting insights and helpful tips in our latest featured article.</p>\n </div>\n </div>\n</article>"
},
{
"title": "Clickable Card (Proxy Click)",
"description": "A card where the entire area is clickable, using a proxy click pattern for accessibility.",
"html": "<article class=\"card\" data-ulu-proxy-click>\n <div class=\"card__image\">\n <img src=\"https://picsum.photos/id/1019/600/400\" alt=\"Card Image\">\n </div>\n <div class=\"card__body\">\n <div class=\"card__main\">\n <h3 class=\"card__title\">\n <a href=\"#\" class=\"card__title-link\" data-ulu-proxy-click-source>Entire Card is Clickable</a>\n </h3>\n <p>This pattern allows the whole card to act as a link while maintaining a single, accessible anchor point.</p>\n </div>\n </div>\n</article>"
}
],
"counter-list": [
{
"title": "Numeric Counter List",
"description": "A standard ordered list styled with custom counters.",
"html": "<ol class=\"counter-list\">\n <li>First item in the list.</li>\n <li>Second item with more content to demonstrate how the counter stays aligned.</li>\n <li>Third item.</li>\n</ol>"
},
{
"title": "Alphabetical Counter List",
"description": "Using the `counter-list--alphabetical` modifier to use letters instead of numbers.",
"html": "<ol class=\"counter-list counter-list--alphabetical\">\n <li>Analyze the requirements.</li>\n <li>Design the solution.</li>\n <li>Implement the features.</li>\n</ol>"
},
{
"title": "Non-List Counter Elements",
"description": "You can also use the `counter-list__item` class on non-list elements (like divs).",
"html": "<div class=\"counter-list\">\n <div class=\"counter-list__item\">This is a div acting as a counter item.</div>\n <div class=\"counter-list__item\">Another div in the counter flow.</div>\n</div>"
}
],
"css-icon": [
{
"title": "Basic UI Icons",
"description": "Simple geometric icons for common actions.",
"html": "<div style=\"font-size: 2rem; display: flex; gap: 1rem;\">\n <span class=\"css-icon css-icon--plus\"></span>\n <span class=\"css-icon css-icon--minus\"></span>\n <span class=\"css-icon css-icon--close\"></span>\n <span class=\"css-icon css-icon--menu\"></span>\n</div>"
},
{
"title": "Navigation Icons",
"description": "Icons for directional navigation and disclosures.",
"html": "<div style=\"font-size: 2rem; display: flex; gap: 1rem;\">\n <span class=\"css-icon css-icon--angle-right\"></span>\n <span class=\"css-icon css-icon--angle-down\"></span>\n <span class=\"css-icon css-icon--arrow-right\"></span>\n <span class=\"css-icon css-icon--arrow-left\"></span>\n</div>"
},
{
"title": "Stroke Weight Variation",
"description": "Use the `css-icon--stroke-large` modifier for a bolder appearance.",
"html": "<div style=\"font-size: 2rem; display: flex; gap: 1rem;\">\n <span class=\"css-icon css-icon--plus\"></span>\n <span class=\"css-icon css-icon--plus css-icon--stroke-large\"></span>\n <span class=\"css-icon css-icon--angle-right\"></span>\n <span class=\"css-icon css-icon--angle-right css-icon--stroke-large\"></span>\n</div>"
},
{
"title": "Transition Icons (Active State)",
"description": "Some icons animate between states when the `is-active` class is applied.",
"html": "<div style=\"font-size: 2rem; display: flex; gap: 2rem; align-items: center;\">\n <div>\n <span class=\"css-icon css-icon--plus-to-minus\"></span>\n <span class=\"css-icon css-icon--plus-to-minus is-active\"></span>\n <span class=\"type-small\" style=\"display: block;\">Plus-to-Minus</span>\n </div>\n <div>\n <span class=\"css-icon css-icon--menu-to-close\"></span>\n <span class=\"css-icon css-icon--menu-to-close is-active\"></span>\n <span class=\"type-small\" style=\"display: block;\">Menu-to-Close</span>\n </div>\n</div>"
}
],
"data-grid": [
{
"title": "Basic 12-Column Grid",
"description": "A standard 12-column grid layout using the `data-grid` and `data-grid-item` attributes.",
"html": "<div data-grid=\"columns: 12\">\n <div data-grid-item=\"width: 6\">\n <div style=\"background: #eee; padding: 1rem;\">6 Columns (50%)</div>\n </div>\n <div data-grid-item=\"width: 6\">\n <div style=\"background: #eee; padding: 1rem;\">6 Columns (50%)</div>\n </div>\n <div data-grid-item=\"width: 4\">\n <div style=\"background: #ddd; padding: 1rem;\">4 Columns</div>\n </div>\n <div data-grid-item=\"width: 4\">\n <div style=\"background: #ddd; padding: 1rem;\">4 Columns</div>\n </div>\n <div data-grid-item=\"width: 4\">\n <div style=\"background: #ddd; padding: 1rem;\">4 Columns</div>\n </div>\n</div>"
},
{
"title": "Grid with Offsets",
"description": "Using the `offset` property to create gaps in the grid layout.",
"html": "<div data-grid=\"columns: 12\">\n <div data-grid-item=\"width: 4\">\n <div style=\"background: #eee; padding: 1rem;\">Width: 4</div>\n </div>\n <div data-grid-item=\"width: 4, offset: 4\">\n <div style=\"background: #eee; padding: 1rem;\">Width: 4, Offset: 4</div>\n </div>\n</div>"
},
{
"title": "Responsive Column Widths",
"description": "Defining different widths for different breakpoints (e.g., `width` for mobile, `width-large` for desktop).",
"html": "<div data-grid=\"columns: 12\">\n <div data-grid-item=\"width: 12, width-large: 8\">\n <div style=\"background: #eee; padding: 1rem;\">8 Columns on Desktop, Full Width on Mobile</div>\n </div>\n <div data-grid-item=\"width: 12, width-large: 4\">\n <div style=\"background: #eee; padding: 1rem;\">4 Columns on Desktop, Full Width on Mobile</div>\n </div>\n</div>"
}
],
"data-list": [
{
"title": "Basic Data List",
"description": "A standard list layout for simple items.",
"html": "<ul class=\"data-list\">\n <li class=\"data-list__item\">\n <div class=\"data-list__column\">\n <strong>Item One Title</strong>\n </div>\n </li>\n <li class=\"data-list__item\">\n <div class=\"data-list__column\">\n <strong>Item Two Title</strong>\n </div>\n </li>\n</ul>"
},
{
"title": "Flanked Layout (Prefixed + Suffixed)",
"description": "Automatically aligns an icon at the start and an action at the end.",
"html": "<ul class=\"data-list data-list--prefixed data-list--suffixed\">\n <li class=\"data-list__item\">\n <div class=\"data-list__column\" aria-hidden=\"true\">📄</div>\n <div class=\"data-list__column\"><strong>Report_Q1.pdf</strong></div>\n <div class=\"data-list__column\"><button class=\"button button--small\">Download</button></div>\n </li>\n <li class=\"data-list__item\">\n <div class=\"data-list__column\" aria-hidden=\"true\">📊</div>\n <div class=\"data-list__column\"><strong>Analytics_Data.xlsx</strong></div>\n <div class=\"data-list__column\"><button class=\"button button--small\">Download</button></div>\n </li>\n</ul>"
},
{
"title": "Interactive Clickable Rows",
"description": "Entire rows are interactive, using proxy-click logic to route to a primary link.",
"html": "<ul class=\"data-list data-list--clickable\">\n <li class=\"data-list__item\" data-ulu-proxy-click>\n <div class=\"data-list__column\">\n <a href=\"#\" data-ulu-proxy-click-source><strong>Important Update: New Security Features</strong></a>\n </div>\n <div class=\"data-list__column type-small\">2 hours ago</div>\n </li>\n <li class=\"data-list__item\" data-ulu-proxy-click>\n <div class=\"data-list__column\">\n <a href=\"#\" data-ulu-proxy-click-source><strong>Your Weekly Activity Summary</strong></a>\n </div>\n <div class=\"data-list__column type-small\">Yesterday</div>\n </li>\n</ul>"
},
{
"title": "Custom Grid with Spanning",
"description": "Advanced usage using inline variables and column spanning.",
"html": "<ul class=\"data-list\" style=\"--ulu-data-list-columns: auto 1fr auto auto;\">\n <li class=\"data-list__item\">\n <div class=\"data-list__column\">ID: 101</div>\n <div class=\"data-list__column data-list__column--span-2\">\n <strong>Product Name A</strong>\n <span class=\"type-small\">In Stock</span>\n </div>\n <div class=\"data-list__column\">$19.99</div>\n </li>\n</ul>"
}
],
"data-table": [
{
"title": "Standard Data Table",
"description": "A native HTML table styled for data display, including headers, footers, and a caption.",
"html": "<table class=\"data-table\">\n <caption>Quarterly Performance Summary</caption>\n <thead>\n <tr>\n <th>Category</th>\n <th>Previous Q</th>\n <th>Current Q</th>\n <th>Change</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Product Sales</td>\n <td>$45,000</td>\n <td>$52,000</td>\n <td style=\"color: green;\">+15%</td>\n </tr>\n <tr>\n <td>Service Fees</td>\n <td>$12,000</td>\n <td>$11,500</td>\n <td style=\"color: red;\">-4%</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <td>Total</td>\n <td>$57,000</td>\n <td>$63,500</td>\n <td>+11%</td>\n </tr>\n </tfoot>\n</table>"
},
{
"title": "Striped Table",
"description": "Using the `data-table--striped` modifier to alternate background colors for rows.",
"html": "<table class=\"data-table data-table--striped\">\n <thead>\n <tr>\n <th>Employee Name</th>\n <th>Department</th>\n <th>Status</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Jane Doe</td>\n <td>Engineering</td>\n <td>Active</td>\n </tr>\n <tr>\n <td>John Smith</td>\n <td>Marketing</td>\n <td>On Leave</td>\n </tr>\n <tr>\n <td>Alice Johnson</td>\n <td>Product</td>\n <td>Active</td>\n </tr>\n </tbody>\n</table>"
},
{
"title": "Large First Column",
"description": "The `data-table--large-first` modifier ensures the first column has a larger minimum width, useful for row labels.",
"html": "<table class=\"data-table data-table--large-first\">\n <thead>\n <tr>\n <th>Specification Feature Description</th>\n <th>Value</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Memory (RAM)</td>\n <td>32GB DDR5</td>\n </tr>\n <tr>\n <td>Processor (CPU)</td>\n <td>8-Core 4.2GHz</td>\n </tr>\n </tbody>\n</table>"
}
],
"definition-list": [
{
"title": "Basic Stacked Layout",
"description": "The default layout, which stacks terms and their definitions vertically.",
"html": "<dl class=\"definition-list\">\n <div>\n <dt>Application Version</dt>\n <dd>v2.4.5 (Stable)</dd>\n </div>\n <div>\n <dt>Release Date</dt>\n <dd>October 12, 2024</dd>\n </div>\n</dl>"
},
{
"title": "Table Layout",
"description": "Using the `definition-list--table` modifier to create a two-column grid on larger screens.",
"html": "<dl class=\"definition-list definition-list--table\">\n <div>\n <dt>Project Owner</dt>\n <dd>Jane Doe</dd>\n </div>\n <div>\n <dt>Primary Language</dt>\n <dd>TypeScript (with Sass for styling)</dd>\n </div>\n</dl>"
},
{
"title": "Inline-All Layout",
"description": "Using the `definition-list--inline-all` modifier to place terms and definitions on the same line.",
"html": "<dl class=\"definition-list definition-list--inline-all\">\n <div>\n <dt>Status</dt>\n <dd>Connected</dd>\n </div>\n <div>\n <dt>Uptime</dt>\n <dd>99.9%</dd>\n </div>\n</dl>"
},
{
"title": "Separated Layout",
"description": "Using the `definition-list--separated` and `definition-list--separated-first` modifiers to add borders between items.",
"html": "<dl class=\"definition-list definition-list--separated definition-list--separated-first\">\n <div>\n <dt>Support Tier</dt>\n <dd>Premium (24/7)</dd>\n </div>\n <div>\n <dt>Service SLA</dt>\n <dd>99.99% Availability Guaranteed</dd>\n </div>\n</dl>"
}
],
"flipcard": [
{
"title": "Basic Flipcard",
"description": "A text-only flipcard that reveals more information when clicked.",
"html": "<div class=\"flipcard\" data-ulu-flipcard>\n <div class=\"flipcard__front\">\n <div class=\"flipcard__front-content\">\n <h3 class=\"h4\">Technical Strategy</h3>\n <span class=\"flipcard__icon\" aria-hidden=\"true\">+</span>\n </div>\n </div>\n <div class=\"flipcard__back\">\n <div class=\"flipcard__back-content\">\n <p>Our technical strategy focuses on modularity, performance, and accessibility across all platforms.</p>\n <button class=\"button button--small\" data-ulu-flipcard-close>Close</button>\n </div>\n </div>\n</div>"
},
{
"title": "Flipcard with Image",
"description": "A flipcard using the `flipcard--w-image` modifier to include a background image on the front.",
"html": "<div class=\"flipcard flipcard--w-image\" data-ulu-flipcard>\n <div class=\"flipcard__front\">\n <div class=\"flipcard__front-image\">\n <img src=\"https://picsum.photos/id/1025/400/400\" alt=\"Front Image\">\n </div>\n <div class=\"flipcard__front-content\">\n <h3 class=\"h4\">Project Alpha</h3>\n <span class=\"flipcard__icon\" aria-hidden=\"true\">+</span>\n </div>\n </div>\n <div class=\"flipcard__back\">\n <div class=\"flipcard__back-content\">\n <p>Project Alpha is our flagship initiative to redefine the user experience for complex data dashboards.</p>\n <button class=\"button button--small\" data-ulu-flipcard-close>Close</button>\n </div>\n </div>\n</div>"
}
],
"headline-label": [
{
"title": "Basic Headline Label",
"description": "A small, bold label placed above a headline to categorize content.",
"html": "<h2 class=\"h2\">\n <span class=\"headline-label\">Case Study<span class=\"hidden-visually\">:</span></span>\n Modernizing Legacy Infrastructure\n</h2>\n<p>This case study explores the challenges and successes of a multi-year digital transformation project.</p>"
}
],
"hero": [
{
"title": "Split Hero (Graphic Left)",
"description": "A hero section where the graphic and content are split side-by-side.",
"html": "<section class=\"hero hero--split hero--left\">\n <div class=\"hero__graphic\">\n <img src=\"https://picsum.photos/id/102/1200/800\" class=\"hero__graphic-media\" alt=\"Hero Background\">\n </div>\n <div class=\"hero__content\">\n <div class=\"hero__content-container container\">\n <div class=\"hero__content-inner\">\n <h1 class=\"h1\">Innovate Your Workflow</h1>\n <p class=\"type-large\">Discover the tools and strategies that drive modern software development.</p>\n <div class=\"button-group\">\n <a href=\"#\" class=\"button\">Get Started</a>\n <a href=\"#\" class=\"button button--outline\">Learn More</a>\n </div>\n </div>\n </div>\n </div>\n</section>"
},
{
"title": "Overlay Hero",
"description": "A hero section with the content overlaid on a full-width background graphic.",
"html": "<section class=\"hero hero--overlay\">\n <div class=\"hero__graphic\">\n <img src=\"https://picsum.photos/id/103/1200/800\" class=\"hero__graphic-media\" alt=\"Hero Background\">\n </div>\n <div class=\"hero__content\">\n <div class=\"hero__content-container container\">\n <div class=\"hero__content-inner\" style=\"background: rgba(255,255,255,0.8); padding: 2rem; border-radius: 8px;\">\n <h1 class=\"h1\">Full Screen Impact</h1>\n <p class=\"type-large\">Create a bold first impression with a full-width immersive experience.</p>\n <a href=\"#\" class=\"button\">Call to Action</a>\n </div>\n </div>\n </div>\n</section>"
}
],
"image-grid": [
{
"title": "Basic Image Grid",
"description": "A flex-based grid for displaying a collection of images that automatically reflows.",
"html": "<ul class=\"image-grid\">\n <li class=\"image-grid__item\">\n <img src=\"https://picsum.photos/id/10/400/300\" alt=\"Image 1\">\n </li>\n <li class=\"image-grid__item\">\n <img src=\"https://picsum.photos/id/11/400/300\" alt=\"Image 2\">\n </li>\n <li class=\"image-grid__item\">\n <img src=\"https://picsum.photos/id/12/400/300\" alt=\"Image 3\">\n </li>\n <li class=\"image-grid__item\">\n <img src=\"https://picsum.photos/id/13/400/300\" alt=\"Image 4\">\n </li>\n <li class=\"image-grid__item\">\n <img src=\"https://picsum.photos/id/14/400/300\" alt=\"Image 5\">\n </li>\n <li class=\"image-grid__item\">\n <img src=\"https://picsum.photos/id/15/400/300\" alt=\"Image 6\">\n </li>\n</ul>"
}
],
"input-group": [
{
"title": "Search Input (Joined)",
"description": "A search bar where the input and button are visually connected with shared borders.",
"html": "<div class=\"form-theme\">\n <div class=\"input-group input-group--joined\">\n <div class=\"input-group__item input-group__item--field\">\n <input type=\"text\" class=\"input-group__input\" placeholder=\"Search...\">\n </div>\n <div class=\"input-group__item\">\n <button class=\"button input-group__button\">Search</button>\n </div>\n </div>\n</div>"
},
{
"title": "Input with Currency Cue",
"description": "Using a cue item to provide context, like a currency symbol.",
"html": "<div class=\"form-theme\">\n <div class=\"input-group input-group--joined\">\n <div class=\"input-group__item input-group__item--cue\">$</div>\n <div class=\"input-group__item input-group__item--field\">\n <input type=\"number\" class=\"input-group__input\" placeholder=\"0.00\">\n </div>\n </div>\n</div>"
},
{
"title": "Gapped Layout",
"description": "The default layout with a small gap between the input and the action button.",
"html": "<div class=\"form-theme\">\n <div class=\"input-group\">\n <div class=\"input-group__item input-group__item--field\">\n <input type=\"text\" class=\"input-group__input\" placeholder=\"Enter coupon code\">\n </div>\n <div class=\"input-group__item\">\n <button class=\"button button--outline input-group__button\">Apply</button>\n </div>\n </div>\n</div>"
}
],
"list-inline": [
{
"title": "Basic Inline List",
"description": "A pipe-separated list of items displayed in a single line.",
"html": "<ul class=\"list-inline\">\n <li>Privacy Policy</li>\n <li>Terms of Service</li>\n <li>Contact Us</li>\n <li>Support</li>\n</ul>"
},
{
"title": "Large Gap Inline List",
"description": "Using the `list-inline--large-gap` modifier for increased spacing between items.",
"html": "<ul class=\"list-inline list-inline--large-gap\">\n <li>Project Alpha</li>\n <li>Project Beta</li>\n <li>Project Gamma</li>\n</ul>"
}
],
"list-lines": [
{
"title": "Basic List Lines",
"description": "A list with horizontal rules between each item.",
"html": "<ul class=\"list-lines\">\n <li>First item in the list</li>\n <li>Second item with more content</li>\n <li>Third item</li>\n</ul>"
},
{
"title": "Dense List Lines",
"description": "Using the `list-lines--dense` modifier for tighter vertical spacing.",
"html": "<ul class=\"list-lines list-lines--dense\">\n <li>Compact item one</li>\n <li>Compact item two</li>\n <li>Compact item three</li>\n</ul>"
}
],
"menu-stack": [
{
"title": "Basic Navigation Menu",
"description": "A standard vertical list of links, often used for sidebars or secondary navigation.",
"html": "<nav class=\"menu-stack\">\n <h3 class=\"menu-stack__label\">Main Navigation</h3>\n <ul class=\"menu-stack__list\">\n <li class=\"menu-stack__item\">\n <a href=\"#\" class=\"menu-stack__link is-active\">Dashboard</a>\n </li>\n <li class=\"menu-stack__item\">\n <a href=\"#\" class=\"menu-stack__link\">Projects</a>\n </li>\n <li class=\"menu-stack__item\">\n <a href=\"#\" class=\"menu-stack__link\">Tasks</a>\n </li>\n </ul>\n</nav>"
},
{
"title": "Collapsible Sub-Menu",
"description": "Using `details` to create a collapsible group within the menu stack.",
"html": "<div class=\"menu-stack\">\n <ul class=\"menu-stack__list\">\n <li class=\"menu-stack__item\">\n <details class=\"menu-stack__collapsible\">\n <summary class=\"menu-stack__toggle\">\n <span class=\"menu-stack__link-text\">Organization</span>\n <span class=\"menu-stack__toggle-icon css-icon css-icon--angle-down-to-up\" aria-hidden=\"true\"></span>\n </summary>\n <div class=\"menu-stack__collapsible-content\">\n <ul class=\"menu-stack__list\">\n <li class=\"menu-stack__item\"><a class=\"menu-stack__link\" href=\"#\">Team Members</a></li>\n <li class=\"menu-stack__item\"><a class=\"menu-stack__link\" href=\"#\">Permissions</a></li>\n </ul>\n </div>\n </details>\n </li>\n </ul>\n</div>"
},
{
"title": "Selectable (Checkbox) Menu",
"description": "A menu containing checkboxes, useful for filtering or selection lists.",
"html": "<div class=\"menu-stack form-theme\">\n <h3 class=\"menu-stack__label\">Filter by Status</h3>\n <ul class=\"menu-stack__list\">\n <li class=\"menu-stack__item\">\n <div class=\"menu-stack__selectable\">\n <input type=\"checkbox\" id=\"status-1\" checked>\n <label for=\"status-1\">Active</label>\n </div>\n </li>\n <li class=\"menu-stack__item\">\n <div class=\"menu-stack__selectable\">\n <input type=\"checkbox\" id=\"status-2\">\n <label for=\"status-2\">Pending</label>\n </div>\n </li>\n <li class=\"menu-stack__item\">\n <div class=\"menu-stack__selectable\">\n <input type=\"checkbox\" id=\"status-3\">\n <label for=\"status-3\">Completed</label>\n </div>\n </li>\n </ul>\n</div>"
}
],
"modal": [
{
"title": "Basic Centered Modal",
"description": "The default centered modal configuration, triggered by a button.",
"html": "<button class=\"button\" data-ulu-dialog-trigger=\"modal-example-center\">Open Modal</button>\n\n<div id=\"modal-example-center\" \n data-ulu-modal-builder='{ \"title\": \"Information\" }' \n hidden>\n <p>This is a standard centered modal window. It can contain any HTML content, including text, images, or forms.</p>\n <div class=\"button-group\">\n <button class=\"button\" data-ulu-dialog-close>Confirm</button>\n <button class=\"button button--outline\" data-ulu-dialog-close>Cancel</button>\n </div>\n</div>"
},
{
"title": "Right Sidebar Modal",
"description": "Using the position: 'right' option to create a sidebar-style modal.",
"html": "<button class=\"button\" data-ulu-dialog-trigger=\"modal-example-sidebar\">Open Sidebar</button>\n\n<div id=\"modal-example-sidebar\" \n data-ulu-modal-builder='{ \"title\": \"Settings\", \"position\": \"right\" }' \n hidden>\n <div class=\"menu-stack\">\n <ul class=\"menu-stack__list\">\n <li class=\"menu-stack__item\"><a href=\"#\" class=\"menu-stack__link\">Notification Settings</a></li>\n <li class=\"menu-stack__item\"><a href=\"#\" class=\"menu-stack__link\">Security Options</a></li>\n <li class=\"menu-stack__item\"><a href=\"#\" class=\"menu-stack__link\">Account Data</a></li>\n </ul>\n </div>\n</div>"
},
{
"title": "Fullscreen Modal",
"description": "A modal that fills the entire viewport, useful for immersive content or complex tasks.",
"html": "<button class=\"button\" data-ulu-dialog-trigger=\"modal-example-fullscreen\">View Fullscreen</button>\n\n<div id=\"modal-example-fullscreen\" \n data-ulu-modal-builder='{ \"title\": \"Editor Mode\", \"size\": \"fullscreen\" }' \n hidden>\n <div class=\"container\">\n <h2 class=\"h2\">Comprehensive Overview</h2>\n <p>This view allows for focused interaction with complex data or large media assets without the distraction of the underlying page.</p>\n <button class=\"button\" data-ulu-dialog-close>Exit Fullscreen</button>\n </div>\n</div>"
}
],
"nav-strip": [
{
"title": "Basic Nav Strip",
"description": "A simple horizontal list of navigation links with an active state underline.",
"html": "<nav class=\"nav-strip\">\n <ul class=\"nav-strip__list\">\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link\">Overview</a></li>\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link is-active\">Features</a></li>\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link\">Pricing</a></li>\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link\">Support</a></li>\n </ul>\n</nav>"
},
{
"title": "Nav Strip with Base Rule",
"description": "Using the `nav-strip--rule` modifier to add a continuous horizontal line beneath the navigation items.",
"html": "<nav class=\"nav-strip nav-strip--rule\">\n <ul class=\"nav-strip__list\">\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link is-active\">Dashboard</a></li>\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link\">Settings</a></li>\n <li class=\"nav-strip__item\"><a href=\"#\" class=\"nav-strip__link\">Analytics</a></li>\n </ul>\n</nav>"
},
{
"title": "Automatic (Markup Only) Nav Strip",
"description": "The `nav-strip--auto` modifier applies styling to standard `ul/li/a` tags without requiring component-specific classes on every element.",
"html": "<div class=\"nav-strip nav-strip--auto\">\n <ul>\n <li><a href=\"#\" class=\"is-active\">Recent</a></li>\n <li><a href=\"#\">Popular</a></li>\n <li><a href=\"#\">Trending</a></li>\n </ul>\n</div>"
}
],
"overlay-section": [
{
"title": "Basic Overlay Section",
"description": "A section with a full-bleed background and centered content box.",
"html": "<section class=\"overlay-section\">\n <div class=\"overlay-section__background\">\n <img src=\"https://picsum.photos/id/101/1200/800\" alt=\"Background Image\">\n </div>\n <div class=\"overlay-section__content\">\n <h2 class=\"h2\">Centered Content</h2>\n <p>This content box is centered over the background image, providing a clear focal point for messaging.</p>\n <a href=\"#\" class=\"button\">Explore More</a>\n </div>\n</section>"
},
{
"title": "Right-Aligned Overlay",
"description": "Using the `overlay-section--right` modifier to position the content box on the right side of the section.",
"html": "<section class=\"overlay-section overlay-section--right\">\n <div class=\"overlay-section__background\">\n <img src=\"https://picsum.photos/id/104/1200/800\" alt=\"Background Image\">\n </div>\n <div class=\"overlay-section__content\">\n <h2 class=\"h2\">Side Aligned</h2>\n <p>Positioning content to the side can help prevent obscuring important details in the background image.</p>\n <a href=\"#\" class=\"button\">Contact Us</a>\n </div>\n</section>"
}
],
"panel": [
{
"title": "Standard Panel",
"description": "A structured container with a distinct header, body, and footer.",
"html": "<div class=\"panel\">\n <div class=\"panel__row panel__row--header\">\n <h3 class=\"h4\">Account Overview</h3>\n </div>\n <div class=\"panel__row\">\n <p>Your subscription is active and will renew on November 15th. You have 3 active projects and 12 collaborators.</p>\n </div>\n <div class=\"panel__row panel__row--footer\">\n <a href=\"#\" class=\"button button--small\">Manage Subscription</a>\n </div>\n</div>"
},
{
"title": "Transparent Panel with Separators",
"description": "Using the `panel--transparent` modifier for a seamless look, with `panel__row--separator-top` for visual division.",
"html": "<div class=\"panel panel--transparent\">\n <div class=\"panel__row panel__row--header\">\n <h3 class=\"h4\">System Status</h3>\n </div>\n <div class=\"panel__row\">\n <p>All systems are operational. No active incidents reported in the last 24 hours.</p>\n </div>\n <div class=\"panel__row panel__row--separator-top\">\n <p class=\"type-small\">Last checked: 5 minutes ago</p>\n </div>\n</div>"
}
],
"popover": [
{
"title": "Basic Popover",
"description": "A standard popover that appears near a trigger element, including a pointer arrow.",
"html": "<div style=\"padding: 4rem 0;\">\n <button class=\"button\" data-ulu-popover-trigger>Toggle Popover</button>\n <div class=\"popover\" data-ulu-popover-content>\n <div class=\"popover__inner\">\n <p>This is the content of the popover. It can contain text, links, or other small UI elements.</p>\n </div>\n <span class=\"popover__arrow\" data-ulu-popover-arrow></span>\n </div>\n</div>"
},
{
"title": "Popover with Footer",
"description": "Using the `popover__footer` element to add actions or metadata at the bottom.",
"html": "<div style=\"padding: 4rem 0;\">\n <button class=\"button\" data-ulu-popover-trigger>Open Menu</button>\n <div class=\"popover\" data-ulu-popover-content>\n <div class=\"popover__header\">Options</div>\n <div class=\"popover__inner\">\n <ul class=\"list-lines list-lines--dense\">\n <li>Notification Settings</li>\n <li>Privacy Controls</li>\n </ul>\n </div>\n <div class=\"popover__footer\">\n <a href=\"#\" class=\"type-small\">Learn More</a>\n </div>\n <span class=\"popover__arrow\" data-ulu-popover-arrow></span>\n </div>\n</div>"
},
{
"title": "Tooltip Modifier",
"description": "The `popover--tooltip` modifier creates a smaller, non-interactive overlay typically used for labels.",
"html": "<div style=\"padding: 2rem 0;\">\n <button class=\"button\" data-ulu-popover-trigger='{ \"floating\": { \"placement\": \"top\" }, \"trigger\": \"hover\" }'>Hover Me</button>\n <div class=\"popover popover--tooltip\" data-ulu-popover-content>\n <div class=\"popover__inner\">\n Helpful hint about this action\n </div>\n <span class=\"popover__arrow\" data-ulu-popover-arrow></span>\n </div>\n</div>"
}
],
"progress-bar": [
{
"title": "Basic Progress Bar",
"description": "A st