@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.38

package/build/search-index.json

@@ -1,426 +0,0 @@
-[
-  {
-    "href": "/about",
-    "content": "export const team = [ { role: \"Owner\", name: \"Jakub Mišún\", responsibility: \"Responisble for the fate of Lime - from roadmap to sprint planning. Enables communication betweet Lime team and individual product owners.\", }, { role: \"Visual Designer\", name: \"Martin Stripaj\", responsibility: \"Ensures visual consistency across products and alignmnet with brand. She is the main contributor to Figma library.\", }, { role: \"Developer, maintaner\", name: \"Benjamín Starý\", responsibility: \"Manages version releases, documentation and components code base. Ensures accessibility and compatibility.\", }, ]; About Desing, Develop, Deliver, Improve. Lime enables design teams to prototype new features rapidly, test them with users and hand over polished designs quickly. Developers can rely on familiar UI elements and focus on implementation, speeding up delivery. Lime is constantly under development, taking project needs into account. We thrive for reusable components, but understand that not everything should be re-used. Different projects have different needs. Once a user need is being solved in two separate projects, design system should address this need by providing a universal component. What is Lime used for? - Ensuring consistency. - Ensuring the quality of design, source code, and availability. Included components are: - usable - responsive - accessbile - Improving efficiency: - Developers use ready made, clearly documented components. - Graphic designers follow conventions and rarley design new UI elements. - Prototypes can be easily transformed to polished visuals. What Lime is not Lime has no ambition to replace the design process. It only is a regulation for creating user interfaces. Using Lime won't guarantee that the service will be flawless and that it will provide perfect User Experience. To ensure perfect user experience, the methodology of UCD - User-centered Design must be included in the process of creating these electronic services. Mission 1. One library of components and patterns, used by developers and designers. 2. Uniform, well documented design and code, which stakeholders understand. 3. Sustainable front-end environment, prepared for continual imoprovement. 4. Platform independent front-end environment. Team {team.map((member) => ( <b>{member.role}</b> <h3 className=\"bold\">{member.name}</h3> <p>{member.responsibility}</p> ))}"
-  },
-  {
-    "href": "/changelog",
-    "content": "import Changelog from \"../../../CHANGELOG.mdx\";"
-  },
-  {
-    "href": "/components/accordion",
-    "content": "Accordion Accordion expands and collapses sections of content. Custom heading level Accordion titles are rendered inside a h3 element, which can be overriden. Size Default Large Enclosed accordion Enclosed accordions are usually placed inside a Card and labelled with a heading element in a separate CardSection. Borders By default, accordion items have: - A top border on the first item - Bottom borders between all items - No bottom border on the last item Use the noTopBorder prop to remove the top border from the first item: Advanced layout using Block Action Accessibility Accordion is built according to WAI-ARIA Authoring Practices 1.1. Current implementation differs in markup from WAI-ARIA Authoring Practices 1.1 recommended markup. We used unoredered list instead of description list. This shoud not have any implications on accessibility or semantics. Accordion.static.js provides keyboard navigation via roving tabindex. API React Props Accordion | Prop | Type | Default | Description | | -------------- | ---------------------------- | ------- | ---------------------------------------------------------- | | headingLevel | 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 | 3 | Heading level for accordion item titles | | isEnclosed | boolean | - | Accordion is enclosed in another component (e.g., Card) | | noTopBorder | boolean | - | Remove the top border from the first item | | size | \"large\" | - | Adjustable spacing variant | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Accordion content (AccordionItem components) | AccordionItem | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------- | ------- | ------------------------------------------------------ | | id | string | - | Accordion item id (automatically generated by default) | | title | string | - | Required. Title of accordion item | | isActive | boolean | - | Open state indication | | renderTitle | (title: string) => React.ReactNode | - | Custom title renderer | | renderHeader | (title: string, id: string, isActive: boolean) => React.ReactNode | - | Custom header renderer | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Accordion item content | JS module reference All elements with data-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | --------------------------- | --------------------------------------------------------------------------------------------------------- | | buttonSelector | string | '[data-accordion-toggle]' | Element selector for activating/deactivating accordion sections. Also enables roving tabindex navigation. | Accordion Methods The component has its own two important methods to destroy and update instance. | Prop | Type | Default | Description | | --------- | ------ | ------------------------------ | ---------------------------------------------------------- | | destroy | func | () => { / cleanup / } | Destroy the instance - removes all listeners | | update | func | () => { / reinitialize / } | Re-initialize the component (useful after content changes) |"
-  },
-  {
-    "href": "/components/alert",
-    "content": "Alert If you need to notify user about something specific, or if you want to explain something shortly, this is the element to do it. Variants Title Title and Description Title and Buttons Prihlásiť sa, Skryť, ]} /> Title, Description and Buttons Prihlásiť sa} /> Types There are four types of alert messages you can choose from. - Info - Success - Warning - Danger Info info is default type of alert. It's used for simple, not most important, messages for the user if something happend. }> Success Best feeling is when something went well. You can notify the user about successful things with success type. Warning If you need to warn user about anything use warning type. Danger If warning is not enought and you need to show error message, use danger type. Custom title renderer Alert spacing is quite strict and works 99% of time. In rare cases, the title requires a little more space to breathe. To achieve that, you can render a custom title using the renderTitle prop. ( <h3 className=\"alerttitle mb-medium\">{props.title}</h3> )} description={ } actionButtons={Prihlásiť sa} /> Full width If you need full width Alert, you can use isFullWidth prop. Max width on text remamains the same, because of readability. API React Props | Prop | Type | Default | Description | | --------------- | ---------------------------------------------- | -------- | ---------------------------------------------------------- | | title | string | - | Required.** Main text message | | description | React.ReactNode | - | Description of the alert | | type | \"info\" \\| \"success\" \\| \"warning\" \\| \"danger\" | \"info\" | Type of alert, sets icon and color | | headingLevel | number | 3 | Level of the heading in heading hierarchy (1-6) | | isFullWidth | boolean | - | Sets Alert to full width | | actionButtons | React.ReactNode | - | Additional action buttons to add interactivity | | renderTitle | (props: AlertProps) => React.ReactNode | - | Custom title renderer. Passes props as function parameter. | | onClose | () => void | - | Callback function when close button is clicked | | className | string | - | Additional CSS classes |"
-  },
-  {
-    "href": "/components/anchor-navigation",
-    "content": "export const basicItems = [ { label: \"Key Features\", href: \"#features\", isActive: true }, { label: \"Pricing\", href: \"#pricing\" }, { label: \"Getting Started\", href: \"#getting-started\" }, { label: \"Contact\", href: \"#contact\" }, ]; export const moreItems = [ { label: \"Overview\", href: \"#overview\", isActive: true }, { label: \"Features\", href: \"#features\" }, { label: \"Documentation\", href: \"#docs\" }, { label: \"API Reference\", href: \"#api\" }, { label: \"Examples\", href: \"#examples\" }, { label: \"Support\", href: \"#support\" }, ]; Anchor Navigation Sticky navigation component that helps users navigate between sections of a long page. The component automatically positions itself below the megamenu when present, ensuring it doesn't overlap with the site header. It features automatic scroll spy functionality that highlights the active navigation item based on the current scroll position and provides smooth scrolling to target sections. Basic Usage With Additional Content You can add additional content to the right side of the navigation, such as pricing information or action buttons. <div className=\"bold\"> <div className=\"align-sm-right\">Free Trial</div> <div className=\"reset-font-weight\">14 days</div> </div> {\"Get Started\"} More Navigation Items The component handles multiple navigation items and will scroll horizontally on smaller screens when needed. Megamenu Integration The AnchorNavigation component automatically detects and positions itself below any element with a data-megamenu attribute. This ensures the sticky navigation doesn't overlap with the site's megamenu or header. Key Features: - Automatic Detection: Finds megamenu elements using [data-megamenu] selector - Dynamic Positioning: Calculates and applies correct top offset based on megamenu height - Responsive Updates: Recalculates position on scroll and window resize events - Performance Optimized: Uses ResizeObserver and passive scroll listeners Technical Implementation: - The component searches for elements with data-megamenu attribute - Calculates the current height of the megamenu element - Sets the top CSS property to position the navigation below the megamenu - Automatically updates positioning when the megamenu height changes - Falls back to top: 0px when no megamenu is found This integration ensures seamless sticky positioning regardless of megamenu size or viewport changes. Scroll Spy Functionality The AnchorNavigation component includes intelligent scroll spy functionality that automatically highlights the active navigation item based on the current scroll position. Features: - Automatic Highlighting: Detects which section is currently in view and highlights the corresponding navigation item - Smooth Scrolling: Provides smooth scroll behavior when clicking navigation links - Smart Offset Calculation: Accounts for megamenu height and navigation height to accurately determine active sections - Navigation Centering: Automatically scrolls the navigation horizontally to center the active item on smaller screens - Multiple URL Patterns: Supports different href patterns including relative and absolute URLs CSS Custom Properties: The component sets the following CSS custom properties for integration with other components: - --extra-scroll-margin: Dynamic value based on navigation height for proper section targeting Technical Details: - Uses intersection-based detection to determine the active section - Calculates effective viewport center considering megamenu and navigation offsets - Provides fallback logic for edge cases (top of page, no active section) - Updates active state with smooth horizontal scrolling of navigation items JavaScript Implementation The AnchorNavigation component requires JavaScript for comprehensive functionality including megamenu positioning, scroll spy, and smooth scrolling. The static JavaScript module handles all interactions automatically without any configuration needed. Usage Include the module and initialize it on your anchor navigation elements: Automatic Initialization When using the full bundle (build/static.js), AnchorNavigation is automatically initialized on all elements with the data-anchor-navigation attribute: Features - Zero Configuration: Works out of the box with no setup required - Scroll Spy: Automatically highlights active navigation items based on scroll position - Smooth Scrolling: Provides smooth scroll behavior with proper offset calculation - Automatic Cleanup: Properly removes event listeners when component is destroyed - Performance Optimized: Uses passive scroll listeners, ResizeObserver, and optimized scroll detection - Fallback Handling: Gracefully handles missing megamenu elements and browser compatibility - Smart Active Detection: Includes fallback logic for edge cases and maintains state consistency - Dynamic Updates: Recalculates all measurements on window resize and content changes Instance Management Semantic HTML The component uses semantic HTML for better accessibility: - Uses <nav> element as the root container with aria-label=\"Sekcie stránky\" for screen readers - Navigation items are structured as an unordered list (<ul>) with proper link elements - All interactive elements are keyboard accessible and follow accessibility best practices API React Props | Prop | Type | Default | Description | | ----------- | ------------------------ | ------- | ----------------------------------------------------------------- | | items | AnchorNavigationItem[] | - | Required. Array of navigation items to display | | className | string | - | Additional CSS classes to apply to the navigation element | | children | React.ReactNode | - | Additional content to display on the right side of the navigation | AnchorNavigationItem | Property | Type | Default | Description | | ---------- | --------- | ------- | ------------------------------------------------------- | | label | string | - | Required. Display text for the navigation item | | href | string | - | Required. URL or anchor link (e.g., \"#section-id\") | | isActive | boolean | false | Initial active state (will be overridden by scroll spy) | CSS Custom Properties The component exposes the following CSS custom properties: | Property | Description | | ----------------------- | ----------------------------------------------------------------------------- | | --extra-scroll-margin | Dynamic scroll margin value set by the component for proper section targeting | JS module reference All elements with data-anchor-navigation are initialized on window.DOMContentLoaded event. Custom initialization example: AnchorNavigation Methods The component has its own two important methods to destroy and update instance. | Prop | Type | Default | Description | | --------- | ------ | ------------------------------ | ---------------------------------------------------------- | | destroy | func | () => { / cleanup / } | Destroy the instance - removes all listeners | | update | func | () => { / reinitialize / } | Re-initialize the component (useful after content changes) |"
-  },
-  {
-    "href": "/components/bar",
-    "content": "export const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1); export const spaces = [\"small\", \"default\", \"large\"]; export const alignments = [\"start\", \"center\", \"end\"]; Bar We use bar to create horizontal layouts with predefined spacings between items. <div className=\"l-debug\">Item</div> <div className=\"l-debug\">I'm filling good</div> <div className=\"l-debug\">Item</div> Spacing If you need to adjust space widths between items, it can be done by adjusted with .bar--space-small and .bar--space-large classes. {spaces.map((space) => ( <div className=\"l-debug\">space</div> <div className=\"l-debug\">set</div> <div className=\"l-debug\">to</div> <div className=\"l-debug\"> <strong>{space}</strong> </div> ))} Vertical alignment You have three options to vertically align all items of the .bar component. You can use a standard .align-items-start, .align-items-center, .align-items-end known as vertical utility classes. {alignments.map((align) => ( <div className=\"l-debug\"> <strong>{capitalize(align)}</strong> {\"alignment\"} </div> <div className=\"l-debug\"> <p> {Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, ipsum deleniti quia iure similique mollitia quam excepturi laudantium architecto, aperiam magnam exercitationem magni commodi laborum molestiae dolore. Corrupti, officia perferendis?} </p> </div> <div className=\"l-debug\">Item</div> ))} Vertical bar Bar can be use to stack elements vertically with .bar--vertical class. <div className=\"l-debug\">Item</div> <div className=\"l-debug\"> <p> {Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, incidunt veniam minima quasi eligendi amet ullam explicabo laborum aperiam accusantium hic laboriosam doloremque expedita odit ex consequatur voluptas aliquid soluta.} </p> </div> <div className=\"l-debug\">Item</div> Item filling the space If one or more items need to fill maximum available space available you can use .baritem--fill class to do that. <div className=\"l-debug\">Item</div> <div className=\"l-debug\">I'm filling good</div> <div className=\"l-debug\">Third item</div> Item shrinking to fit If you need an item to shrink where there is lack of space, there is a .baritem--shrink class to do that. <div className=\"l-debug\">Item</div> <div className=\"l-debug\"> <p> {Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium deleniti dignissimos recusandae nesciunt perferendis cupiditate perspiciatis harum odit eaque aspernatur dolorem rerum ratione repudiandae qui alias assumenda saepe, atque reiciendis?} </p> </div> <div className=\"l-debug\">Third item</div> Bar nowrap .bar--nowrap is used to force bar items to stay in one line at all times. {[...Array(20)].map((, i) => ( <div className=\"l-debug\">Item</div> ))} Bar break .barbreak breaks horizontal bar into multiple lines. Pro tip: use visibility classes to show and hide the break to adjust layout for different breakpoints. <div className=\"l-debug\">Item</div> <div className=\"l-debug\">Item</div> Accessibility The Bar component is primarily used for layout, and as such, should not have any impact on accessibility. Beware however when you are using it for layouts inside inline elements such as form labels. ` and benefit from the tag prop to render any html element you want it to. API React Props Bar | Prop | Type | Default | Description | | ------------ | ------------------------------ | ------- | ---------------------------------------- | | align | \"start\" \\| \"end\" \\| \"center\" | - | Flex vertical alignment | | canWrap | boolean | true | Allow horizontally stacked items to wrap | | isVertical | boolean | - | Stack BarItems vertically | | space | \"small\" \\| \"large\" | - | Item spacing | | tag | React.ElementType | \"div\" | HTML tag to render | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Child content | BarItem | Prop | Type | Default | Description | | ----------- | ------------------- | ------- | ------------------------------------------------------------------- | | canShrink | boolean | - | Bar item could shrink and wrap content if there is not enough space | | isFilling | boolean | - | Bar item should fill empty space | | tag | React.ElementType | \"div\" | HTML tag to render | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Child content | BarBreak | Prop | Type | Default | Description | | ----------- | ------------------- | ------- | ---------------------- | | tag | React.ElementType | \"div\" | HTML tag to render | | className | string | - | Additional CSS classes | | children | React.ReactNode` | - | Child content |"
-  },
-  {
-    "href": "/components/block-action",
-    "content": "BlockAction Utility component that makes whole blocks clickable. Although it is possible to wrap even complex layouts in an <a /> and even use flexbox layout in <button />s, this results in verbose screenreader output. BlockAction solves this issue and even allows for an override - a separate clickable element inside a clickable block, and an indicator - a non-interactive element that can indicate the block action is being hovered. Anatomy BlockAction is a utility component. It does not render any elements. It's sole purpose is to assign classNames to it's children components/elements. - BlockAction / .block-action<br /> Wrapper around the whole clickable block. Enables positioning. - BlockActionControl / .block-actioncontrol<br /> Interactive element (button or anchor) that receives a click event fired anywhere inside BlockAction. It has a pseudo element that spans the whole BlockAction wrapper. Only one control element allowed per BlockAction. - BlockActionOverride / .block-actionoverride<br /> Another interactive element that can be clicked without firing a click event on BlockActionControl. This is achieved by it's own stacking context. BlockAction can contain multiple overrides (max. 2 recommended). - BlockActionIndicator / .block-actionindicator<br /> Shows basic hover styles, indicates that the control element is heing hovered. Usually an Icon. Examples Card The following example shows a BlockAction Card. It's Control element is a Link inside a heading. When hovering over the Card, the cursor changes to pointer and the Link element enters it's hover state. This is done via a pseudo element that spans the whole BlockAction wrapper. The Override element can be interated with separately as it has it's own staciking context. Clicking it does not activate the Control element. <h2 className=\"bold\"> Control anchor </h2> <p>Aenean lacinia bibendum nulla sed consectetur.</p> Override button Accordion The following example shows an Accordion with a Button performing a separate action. It's Control element is an accordion button, which serves for opening and closing the accordion item and is placed inside a Bar layout. Since the accordion icon sits outsite the accordion button to make room for the override button, it's active class must be manually controlled using Toggle via [data-toggle] attribute. The icon is also being used as an Indicator element which changes the icon color when the Control element is being hovered. Color reset Use class .block-actionindicator--color-reset if you don't want text color change when BlockAction is being hovered. <div className=\"card border border--gray border-radius--medium\"> <div className=\"cardsection\"> Control <p>With class .block-actionindicator--color-reset</p> </div> </div> Border on Hover Use the hasBorderOnHover prop to add a border to the BlockAction wrapper when hovering over the control. This provides additional visual feedback for interactive components like tiles and cards. <h2 className=\"bold\"> Control with border on hover </h2> <p>Hover to see the border appear around this card.</p> JS module reference Javascript is required when using an Indicator element. All elements with [data-block-action] attribute are initialized automatically. When a Block action contains a control and at least one indicator, the JS module adds mouseenter and mouseleave listeners to the control element and manages toggling a classname on the indicator elements. API React Props BlockAction | Prop | Type | Default | Description | | ------------------ | -------------------- | ------- | ------------------------------------------- | | children | React.ReactElement | - | Required. 1 and only one single element | | className | string | - | Additional CSS classes | | hasBorderOnHover | boolean | - | Add border to the BlockAction on hover | BlockActionControl | Prop | Type | Default | Description | | ----------- | -------------------- | ------- | ------------------------------------------- | | children | React.ReactElement | - | Required. 1 and only one single element | | className | string | - | Additional CSS classes | BlockActionOverride | Prop | Type | Default | Description | | ----------- | -------------------- | ------- | ------------------------------------------- | | children | React.ReactElement | - | Required. 1 and only one single element | | className | string | - | Additional CSS classes | BlockActionIndicator | Prop | Type | Default | Description | | ----------- | -------------------- | ------- | ------------------------------------------- | | children | React.ReactElement | - | Required. 1 and only one single element | | className | string | - | Additional CSS classes | JS module reference All elements with [data-block-action] attribute are initialized automatically on window.DOMContentLoaded event. When a Block action contains a control and at least one indicator, the JS module adds mouseenter, mouseleave, focus, and blur listeners to the control element and manages toggling a classname on the indicator elements. Custom initialization example: Default Config | Prop | Type | Default | Description | | ------------------- | -------- | ---------------------------- | ------------------------------------------------------- | | controlSelector | string | \".block-actioncontrol\" | Element selector for the control/interactive element | | indicatorSelector | string | \".block-actionindicator\" | Element selector for indicator elements | | activeClass | string | \"is-indicating\" | Class name applied to indicators on control interaction | BlockAction Methods The component has important methods to destroy and update instance. | Method | Type | Description | | --------- | ------ | ------------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners and resets state | | update | func | Re-initialize the component (useful after content changes) | Notes Based on Inclusive Components - Cards"
-  },
-  {
-    "href": "/components/body-banner",
-    "content": "BodyBanner A versatile banner component for prominently displaying content with images and call-to-action buttons. Perfect for hero sections, feature highlights, and important announcements. The component uses a design-token-first approach with semantic color tokens that automatically adapt to light and dark themes. } > <h3 className=\"bold h6 mb-small\">Mesiac zadarmo pri nákupe online</h3> <p> {Zoberte si cez e-shop nové číslo alebo preneste existujúce číslo od iného operátora a my vás odmeníme 100 % zľavou z jedného mesačného poplatku.} </p> Layout Sizes BodyBanner supports two layout sizes: small (default) and large. Choose based on the visual prominence you need. Small (Default) Compact layout with centered, smaller imagery. Text and image stack vertically on mobile for optimal responsiveness. } > <h3 className=\"bold h6 mb-small\">Mesiac zadarmo pri nákupe online</h3> <p> {Zoberte si cez e-shop nové číslo alebo preneste existujúce číslo od iného operátora a my vás odmeníme 100 % zľavou z jedného mesačného poplatku.} </p> Large Two-column layout with full-height image beside text content, ideal for hero sections and primary announcements. } > <h3 className=\"bold mb\"> {\"Mesiac zadarmo pri nákupe online je headline na viac riadkov\"} </h3> <p> {Zoberte si cez e-shop nové číslo alebo preneste existujúce číslo od iného operátora a my vás odmeníme 100 % zľavou z jedného mesačného poplatku.} </p> Background Colors Choose from three design token-based colors that automatically adapt to light and dark themes: - background-primary (default): Clean white/primary background for maximum contrast - background-accent: Brand accent background for featured content - surface-subtle: Subtle surface background for gentle emphasis Color Examples Primary (Default) } > <h3 className=\"bold h6 mb-small\">Primary Background</h3> <p> {Clean and minimal, perfect for standard content areas. No color prop needed—primary is the default.} </p> Subtle } > <h3 className=\"bold h6 mb-small\">Subtle Surface</h3> <p> {Gentle background color for content that doesn't demand full attention.} </p> Accent } > <h3 className=\"bold h6 mb-small\">Accent Background</h3> <p> {Brand color background for highlighted content and special announcements.} </p> Without Image Banners work great without images too, focusing purely on text content and the call-to-action. <h3 className=\"bold h6 mb-small\">Text-Only Banner</h3> <p> {Sometimes simple is best. A text-focused banner makes your message clear without visual distraction.} </p> With Icon Use the Icon component for a compact, symbolic representation instead of images: } > <h3 className=\"bold h6 mb-small\">Financial Planning</h3> <p> {Take control of your finances with our savings and investment tools.} </p> Flexible Content The children prop accepts any React content, giving you complete control over your banner's content structure: } > <div> <h3 className=\"bold h6 mb-small\">Flexible Content</h3> <p className=\"mb-small\">Use any HTML structure in the children prop</p> <ul className=\"mb-none list-circle\"> <li>Multiple paragraphs</li> <li>Lists and structured content</li> <li>Custom HTML elements</li> </ul> </div> Responsive Behavior - Mobile: All banners stack vertically with full-width imagery for optimal touch interaction - Tablet: Small banners remain compact, large banners begin two-column layout - Desktop: Full two-column layout for large banners; small banners maintain centered image sizing - Content Wrapping: Button and text always remain readable and accessible across all viewport sizes API Reference Props | Prop | Type | Default | Description | | ----------------- | ----------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------- | | size | \"large\" | undefined | Optional size modifier. Undefined means small (default). Use \"large\" for hero layouts. | | color | \"background-primary\" \\| \"background-accent\" \\| \"surface-subtle\" | \"background-primary\" | Design token color class for the banner background | | image | React.ReactNode | undefined | Optional image element. If provided, displays the image appropriately for the size. | | children | React.ReactNode | undefined | Content area for banner text. Typically contains heading and description elements. | | buttonText | string | undefined | Optional button text. If provided, displays a prominent call-to-action button. | | className | string | undefined | Additional CSS classes to apply to the root element | | buttonClassName | string | undefined | Additional CSS classes to apply to the button element |"
-  },
-  {
-    "href": "/components/breadcrumbs",
-    "content": "export const breadcrumbsItems = [ { text: \"Home\", url: \"/styleguide\", }, { text: \"Components\", url: \"/components\", }, { text: \"Breadcrumbs\", url: \"#main\", }, ]; Breadcrumbs Help users understand where they are within a website's structure and move between levels. ✅ <p> {Use the breadcrumbs component on every page, where you need to help users understand and move between the multiple levels of a website. That means virtually every page except the homepage and checkout.} </p> <p>Include the current page to indicate current location.</p> ❌ <p> {Don't use the breadcrumbs to show progress through a linear journey or transaction.} </p> Higlighting current page to screen readers If your application implements HTML5 landmarks (it should if possible), breadcrumbs should not be a part of the main region, current page hyperlink should point to the main region and be identified with aria-current=\"page\" attribute. Otherwise, current page should not be a hyperlink and the aria-current=\"page\" is applied to its wrapping <li />. Current page item as hyperlink Current page item without hyperlink Accessibility The breadcrumb component is built according to WAI-ARIA authoring practices 1.1. API React Props | Prop | Type | Default | Description | | ----------- | ---------------------------------- | ------- | --------------------------------------- | | items | { text: string, url?: string }[] | - | Required. Array of breadcrumb items | | label | string | - | Navigation label for accessibility | | className | string | - | Additional CSS classes | Notes - On small screens, breadcrumbs collapse and show only the parent page of the current location to provide a simple back button. - This component can be used as a separate package. The only asset required for proper use is a stylesheet, located in lib/breadcrumbs.css."
-  },
-  {
-    "href": "/components/button",
-    "content": "import React from \"react\"; export const buttonVariants = [\"default\", \"primary\", \"fill\", \"ghost\"]; Button Buttons are interactive elements used for navigation, form submission, and triggering actions. They can render as either <button> or <a> elements depending on their purpose. Basic Usage Default Button Element Types The ` component can render as either <a> or <button> elements. Use the appropriate element based on function: - <a> - for navigation (linking to pages or sections) - <button> - for actions (form submission, controlling UI, etc.) Button Element Anchor Element Spacing and Layout Buttons include built-in right and bottom margins for proper spacing in horizontal and vertical flows. For complex button layouts that may wrap to multiple lines, use the Buttons component. <p>Buttons flow naturally with text and maintain proper spacing.</p> Button 1 Button 2 <p>This paragraph maintains proper spacing from the buttons above.</p> Single button Use Buttons component for wrapping <p> {\"When buttons might break into multiple lines, wrap them using the\"}{\" \"} <a href=\"/components/buttons\">Buttons component</a> {\" for better vertical\"} {\"spacing.\"} </p> Variants Buttons support different visual variants to convey hierarchy and meaning. {buttonVariants.map((variant) => { const variantName = variant.charAt(0).toUpperCase() + variant.slice(1); return ( <h3 className=\"bold\">{variantName}</h3> {variantName} {variantName} active {variantName} disabled </React.Fragment> ); })} </React.Fragment> Sizes Buttons are available in three sizes: small, default (medium), and large. Small Default Large Square Buttons Square buttons maintain equal width and height regardless of content. They are primarily used for icon-only buttons. {\"A\"} A {\"A\"} <br /> {\"Overflow\"} Overflow {\"Overflow\"} Icon Buttons Use IconButton for buttons that include icons alongside or instead of text. Icon Only For icon-only buttons, use the isSquare prop and provide accessible text as children (rendered as visually hidden). {\"Settings\"} {\"Settings\"} {\"Settings\"} <br /> {\"Settings\"} {\"Settings\"} {\"Settings\"} Icon with Text Icons can be positioned to the left (default) or right of button text using the iconPosition prop. {\"Add Item\"} {\"Add Item\"} {\"Add Item\"} <br /> {\"Select Option\"} {\"Select Option\"} {\"Select Option\"} <br /> {\"Next\"} {\"Next\"} {\"Next\"} Accessibility Semantic Elements Choose the correct HTML element based on function: - <a> - for navigation (takes users to a different page or section) - <button> - for actions (form submission, UI controls, etc.) - <button type=\"submit\"> - for form submission buttons Color Contrast Note: Buttons do not meet Success Criterion 1.4.3: Contrast (Minimum) due to insufficient contrast between white and orange brand colors. While Technique G145 suggests increasing font size to meet contrast requirements, a business decision has been made to maintain current aesthetics. Disabled States Avoid using disabled buttons, especially for form submissions. Disabled buttons are not keyboard focusable and cannot be announced by screen readers. Instead: - Use aria-disabled=\"true\" to maintain focusability - Allow form submission and provide clear validation feedback - Help users understand what needs to be fixed Icon Accessibility When using icon-only buttons, ensure accessible text is provided through: - Descriptive text as children (rendered as visually hidden for IconButton) - aria-label attribute on the button element - alt attribute on the icon (if applicable) Additional Resources - When Is A Button Not A Button? - Anchors, Buttons, And Accessibility API React Props Button | Prop | Type | Default | Description | | --------------- | --------------------------------- | ----------- | ------------------------------------------- | | type | \"primary\" \\| \"fill\" \\| \"ghost\" | \"default\" | Button variant style | | size | \"small\" \\| \"large\" | - | Button size (default is medium) | | isSquare | boolean | - | Make button square (equal width and height) | | isActive | boolean | - | Apply active state styling | | isDisabled | boolean | - | Disable the button | | htmlType | \"button\" \\| \"submit\" \\| \"reset\" | \"button\" | HTML button type attribute | | href | string | - | If provided, renders as anchor element | | preserveWidth | boolean | - | Preserve button width when content changes | | className | string | - | Additional CSS classes | | elemRef | Ref | - | Forwarded ref for the button/anchor element | | children | React.ReactNode | - | Button content | The component also accepts all standard HTML button or anchor attributes depending on whether href is provided. IconButton | Prop | Type | Default | Description | | --------------- | -------------------- | -------- | --------------------------------------------------------- | | iconName | string | - | Required. Name of the icon to display | | iconPosition | \"left\" \\| \"right\" | \"left\" | Position of icon relative to text | | iconClassName | string | - | Additional CSS classes for the icon | | size | \"small\" \\| \"large\" | - | Button and icon size | | isSquare | boolean | - | Make button square (children rendered as visually hidden) | | children | React.ReactNode` | - | Button text content | Component Aliases For convenience, the following aliases are available:"
-  },
-  {
-    "href": "/components/buttons",
-    "content": "Buttons Help arrange multiple buttons Usage There are example buttons They can break into multiple lines <button className=\"link\">And look fabulous doing it</button> Stack on XS Buttons can be forced to stack and span the available width only on XS viewport when used on crossroads pages with two available actions. For example: - Login prompt: \"Login\" and \"Continue as new customer\" - Upsell/crossel prompt: \"Show offer\" and \"Skip\" Button stacks must not be used in wizards to stack continue/back buttons. Button stacks must not be used with only one button. The maximum recommended number of stacked buttons is two. Log in Continue as new customer Button width is always determined by it's content and Button stack scenario is the only exception. If you need vertical navigation, use the List component. API React Props | Prop | Type | Default | Description | | --------------- | ----------------- | ------- | -------------------------------------------------------------------- | | isStackedOnXs | boolean | - | Force buttons to stack vertically on XS viewport and span full width | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Button elements to arrange |"
-  },
-  {
-    "href": "/components/card",
-    "content": "export const GrayPreview = (props) => ( ); export const DefaultSection = ({ title = \"Section\", content = \"Content\", ...props }) => ( <h3 className=\"bold\">{title}</h3> <p>{content}</p> ); Card A card serves as an entry point to more detailed information. Cards can contain rich content such as photos, text, links, lists, and tables. Cards should be used on non-primary backgrounds (such as background-secondary or other colored backgrounds) to stand out from the page content. Basic Example <h2 className=\"bold\">Card with one section</h2> <p>Content can be whatever you choose it to be</p> Background Colors You can customize the background color of cards and sections using the color prop: - On individual CardSection components (preferred) - for specific section styling - On the entire Card component - to set a default color for all sections The default card color is background-primary (white), and sections inherit their parent card's color unless overridden. Available Colors - Background colors: background-primary, background-secondary, background-contrast, background-accent, background-accent1-blog, background-accent2-blog - Fill colors: fill-subtle, fill-accent1, fill-accent2, fill-accent3, fill-accent4, fill-accent5 <h4 className=\"bold\">Secondary Background</h4> <p>Using background-secondary color</p> <h4 className=\"bold\">Accent Fill</h4> <p>Using fill-accent2 color</p> <h4 className=\"bold\">Subtle Fill</h4> <p>Using fill-subtle color</p> <h2 className=\"h4 bold\">Contrast section</h2> {[1, 2].map((i) => ( ))} <h2 className=\"h4 bold\">Contrast card</h2> {[1, 2, 3].map((i) => ( ))} Borders By default, cards have a subtle border. You can remove this border using the noBorder prop. This is useful when you want the card to seamlessly blend with its background or when using cards in certain layout compositions. <h3 className=\"bold\">Default Card</h3> <p>This card has the default border styling</p> <h3 className=\"bold\">No Border Card</h3> <p>This card has no border using the noBorder prop</p> Flexible Height In flex layouts, card sections can expand to fill available space using the isFilling prop. This is useful when you need cards of equal height in a grid layout. <h2 className=\"bold\">Filling good</h2> <p>Adjusting by filling the space</p> <h2 className=\"bold\">Filling good</h2> <p>Adjusting by filling the space</p> <h2 className=\"bold\">I fill for you</h2> <h2 className=\"bold\">I don't fill good</h2> <p>Someone turned my fillings off</p> <h2 className=\"bold\">Tall helper card</h2> <p> {This card is here just to stretch the vertical space and force the other cards to fill their remaining space.} </p> <p> {Ipsum consequat esse eu ullamco deserunt veniam exercitation officia. In eu voluptate Lorem ut nisi veniam nulla Lorem ipsum. Enim excepteur adipisicing esse id est. Deserunt adipisicing excepteur sunt occaecat consectetur dolor deserunt excepteur ut enim ullamco Lorem. Enim aliquip laboris sint consequat culpa tempor exercitation. Laborum labore amet do ullamco excepteur anim tempor pariatur pariatur.} </p> Product Header Use CardProductHeader to create cards that showcase products or services with images. The header displays product information alongside a visual element. The CardProductHeader component supports a space=\"small\" prop for more compact layouts when needed. }> <p className=\"bold text-accent\">Recommended</p> <p className=\"h4 mb-none bold text-nowrap d-inline-flex align-items-center\"> {\"Premium Plan\"} {\"\\u00A0\\u00A0\"} 5G </p> <p className=\"h2 text-accent mb-none\">200 GB</p> <p>Get 200 GB at full speed, then 20 Mbit/s</p> <p className=\"h2 mb-none\"> {\"46.13 \"} <span className=\"large bold\">€/month</span> </p> <p className=\"text-secondary\">24-month contract</p> {\"Check Availability\"} Learn More }> <p className=\"bold text-accent\">Popular</p> <p className=\"h4 mb-none bold text-nowrap\">Premium Internet</p> <p className=\"h2 text-accent mb-none\">500 Mbit/s</p> <p className=\"mb-none\">100 Mbit/s upload</p> <p>High-speed internet for your home or office</p> <p className=\"h2 mb-none\"> {\"39.99 \"} <span className=\"large bold\">€/month</span> </p> <p className=\"text-secondary\">12-month contract</p> {\"Check Availability\"} Learn More Custom Headers For custom header styling beyond product cards, use CardSection with the color prop to create header-like sections: <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> Dividers Use the Divider component between card sections to create visual separation. Dividers can be used with or without icons. <h2 className=\"bold\">Section with Dividers</h2> <p>First section content</p> <h3 className=\"bold\">Second Section</h3> <p>Content separated by a divider</p> <h3 className=\"bold\">Third Section</h3> <p>Content separated by a divider with icon</p> Images in Cards Images can be placed either inside card sections or directly in the card to fill its full width. export const PlaceholderImage = ({ title, ...props }) => ( ); <h3 className=\"bold\">Image Inside Section</h3> <p>Image is contained within the section padding</p> <h3 className=\"bold\">Full Width Image</h3> <p>Image fills the entire card width without padding</p> Advanced Examples Cards with Icons and Mixed Colors {\"New\"} <h3 className=\"bold\">Large Plan</h3> <p>Call, text, and use data conveniently with credit.</p> Check Availability Learn More {\"Featured\"} <h3 className=\"bold\">Premium Plan</h3> <p>Enhanced service with additional benefits and features.</p> Check Availability Learn More Compact Sections Use the space=\"small\" prop on CardSection for more compact layouts. {\"Compact header with small spacing\"} <h3 className=\"bold\">Main content</h3> <p>Regular content below the compact header section.</p> Accessibility The Card component is purely presentational and carries no semantic meaning. When using cards: - Use proper heading hierarchy within CardSection components - Ensure sufficient color contrast when using custom background colors - Include appropriate alt text for images in product headers - Consider keyboard navigation if cards contain interactive elements API React Props Card | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- | | color | \"background-primary\" \\| \"background-secondary\" \\| \"background-contrast\" \\| \"background-accent\" \\| \"background-accent1-blog\" \\| \"background-accent2-blog\" \\| \"fill-subtle\" \\| \"fill-accent1\" \\| \"fill-accent2\" \\| \"fill-accent3\" \\| \"fill-accent4\" \\| \"fill-accent5\" | \"background-primary\" | Custom background color | | noBorder | boolean | - | Remove the default border | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Card content (CardSection components) | CardSection | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------- | | color | \"background-primary\" \\| \"background-secondary\" \\| \"background-contrast\" \\| \"background-accent\" \\| \"background-accent1-blog\" \\| \"background-accent2-blog\" \\| \"fill-subtle\" \\| \"fill-accent1\" \\| \"fill-accent2\" \\| \"fill-accent3\" \\| \"fill-accent4\" \\| \"fill-accent5\" | - | Custom background color for this section | | isFilling | boolean | - | Fill available space using flexbox | | space | \"small\" | - | Use small spacing variant | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Section content | CardProductHeader | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ----------------------------------- | | image | React.ReactNode | - | Image element or content to display | | space | \"small\" | - | Use small spacing variant | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Header content/text |"
-  },
-  {
-    "href": "/components/carousel",
-    "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to enable a bleed layout that extends beyond the container edges while keeping the carousel internally managed (no global body overflow workaround needed). Key features of the bleed variant: - Carousel extends to the viewport edge while preserving container-aligned content insets - Extends beyond container edges without forcing page-level overflow clipping - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden before initialization using data-swiper-options attribute. The attribute accepts a JSON string representing a Swiper.js options object Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | --------------------------------------------------------------------------- | | items | ReactNode[] | - | Array of carousel items to display | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example:"
-  },
-  {
-    "href": "/components/carousel-hero",
-    "content": "import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; import phones from \"@/assets/images/developers/phones.png\"; import twoPhones from \"@/assets/images/developers/two-phones.png\"; import handsWithPhones from \"@/assets/images/developers/hands-with-phones.svg\"; import router from \"@/assets/images/developers/router.png\"; export const SlideExample = ({ title = \"Samsung Galaxy Z Fold6 a Z Flip6 prichádzajú\", image = \"https://placehold.co/720x560\", ...props }) => ( <h1 className=\"h1 mb-medium mt-0\">{title}</h1> <p>Apple iPhone 16 Pro už v predaji v našom e-shope.</p> Objednať ); export const heroSlides = [ , , , , , ]; export const heroTabs = [ { label: \"Motorola Edge 50 Fusion\" }, { label: \"3 mesiace zadarmo\" }, { label: \"Nekonečné dáta\" }, { label: \"iPhone16 Pro\" }, { label: \"HONOR 200\" }, ]; export const simpleTabs = [ { label: \"Úvod\" }, { label: \"Produkty\" }, { label: \"Kontakt\" }, ]; export const simpleSlides = heroSlides.slice(0, 3); export const SlideExampleWithImage = ({ title, imageSrc, ...props }) => ( <h2 className=\"bold\">{title}</h2> <p>Objavte najnovšie technológie a inovácie.</p> Viac informácií ); export const heroSlidesWithImages = [ , , , ]; export const imageHeroTabs = [ { label: \"Najnovšie smartfóny\" }, { label: \"Dva telefóny v jednom\" }, { label: \"Revolúcia v rukách\" }, ]; Carousel Hero Hero carousel component with tab navigation and play/pause controls for featured content sections. {heroSlides} Without autoplay By omitting the interval prop or setting it to 0, autoplay is disabled and the play/pause button is hidden. {simpleSlides} Custom options Carousel default configuration can be overridden using swiperOptions prop. The prop accepts a Swiper.js options object. {simpleSlides} JS module reference All elements with data-carousel-hero are initialized on window.DOMContentLoaded event. Custom initialization example: With autoplay: Instance methods API React Props CarouselHero | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | ---------------------------------------------------------------------------------------- | | tabs | { label: string }[] | [] | Array of tab objects with label property for navigation | | interval | number | - | Autoplay interval in milliseconds. Omit or set to 0 to disable | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Carousel slide items (CarouselHeroItem components) | CarouselHeroItem | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------------------------ | | image | string | - | Required. Image URL for the slide background | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Slide content (text, buttons, etc.) | Notes Accessibility features - Each slide has proper ARIA labels and role descriptions - Tab navigation follows keyboard interaction patterns - Play/pause controls have clear labels and state indicators - Autoplay respects user interaction and pauses appropriately"
-  },
-  {
-    "href": "/components/carousel-promotions",
-    "content": "import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; import phones from \"@/assets/images/developers/phones.png\"; export const SlideExample = ({ ...props }) => ( } title=\"Online ochrana pre váš digitálny svet\" subtitle=\"Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.\" /> ); export const SlideExamplePictureTag = ({ num, ...props }) => ( } title=\"Online ochrana pre váš digitálny svet\" subtitle=\"Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.\" /> ); export const imageItems = Array(4) .fill() .map((, index) => ( )); export const imageDarkItems = Array(4) .fill() .map((, index) => ( )); export const imageItemsWithHref = Array(4) .fill() .map((, index) => ( )); export const imageItemsWithPicture = Array(4) .fill() .map((, index) => ( )); Carousel for promotions {imageItems} With links You can specify a hyperlink for each slide by using the anchor tag with the carousel-promotionsslide class. {imageItemsWithHref} Autoplay You can specify autoplay interval by setting the data-interval attribute to a value in milliseconds. The minimum value is 1000ms. If no value is provided, or the provided value is 0, null or undefined, the autoplay is disabled. Due to the nature of Glider.js and requirements for animations, each dot has an SVG automatically rendered in it's innerHTML. This happens only if the autoplay is enabled. When window size changes, Glider.js re-renders the whole pagination and the SVGs are re-rendered as well. This causes the countdown timer to reset. {imageItems} With picture tag The carousel accepts a picture tag as a source for the image. For more information please refer to Image component documentation. {imageItemsWithPicture} Custom options Carousel default configuration can be overriden before initialization using data-swiper-options attribute. The attribute accepts a JSON string representing a Swiper.js options object. {imageItems} JS module reference All elements with data-carousel-promotions are initialized on window.DOMContentLoaded event. Custom initialization example: With autoplay: API React Props CarouselPromotions | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | ---------------------------------------------------------------------------------------- | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required.** Carousel slide items (CarouselPromotionsItem components) | CarouselPromotionsItem | Prop | Type | Default | Description | | ----------- | -------------------- | ------- | ----------------------------------------------- | | image | React.ReactElement | - | Image element to display in the slide | | title | string | - | Slide title/heading | | subtitle | string | - | Slide subtitle/description text | | href | string | - | Optional URL to make the slide a clickable link | | color | \"black\" | - | Optional color variant | | className | string | - | Additional CSS classes | Notes Because of lack of time, we did not implement recommended a11y corrections: - carousel dots should have minimum 24px clickable area (currently 8px) - autoplay is not good UX and a11y pattern according to this Missing - Screenshot tests"
-  },
-  {
-    "href": "/components/cart-table",
-    "content": "import data, { discountVisible, internetItems, optionalItem, deviceItem, generateTotal, largeItems, router, } from \"@/components/CartTable/data\"; CartTable Example Usage Editable Items in editable cart table are removable. Mandatory (non-removeable) items Some items should not have remove button because they are mandatory to complete the checkout. Optional items Upsell good deals the customer gets with together with an existing cart item. Footer Label with/without tooltip can be added to single row footer. In case of footer with multiple rows with discounts, first row with upfront paynment can be hidden. Monthly generated total Total is calculated automatically as sum of all items. In some cases, you might need to break down total prices into multiple rows by months. If you define monthsFree or discount.monthsCount in your data, cart table will use these to generate multiple rows with proper discounts calculated for different periods. Primary Discount When price is not defined and discount is, it takes place of price. Additionaly if discount.monthsCount is defined, description with duration of discount is displayed. And at last, when price and discount have the same value, free Label is shown. Hide first footer row If it's required we can hide first row of multiline footer. Simple pricing When the products sold do not require combined (upfront + monthly) payments, only relevant columns should be displayed. ({ price: { monthly: price.monthly, }, ...other, }))} /> This default behaviour can be modified by removing of .hide class from hidden column. ({ price: { monthly: price.monthly, }, ...other, }))} hideEmpty={false} /> Size Large cart table was designed for simple flat structure (no subitems), without icons/images, no edit buttons or optional items. API React Props | Prop | Type | Default | Description | | ------------ | --------- | ------------- | ------------------------------------------------------------- | | items | Item[] | [] | Required. Array of cart items to display | | isEditable | boolean | false | Show remove button for each item | | footer | Footer | - | Footer configuration with name, tooltip, or hideFirst options | | hideEmpty | boolean | true | Hide columns with no data | | size | \"large\" | - | Large variant for simplified layouts | | labels | Labels | defaultLabels | Customize column labels and button text | Data Types Item Footer Labels"
-  },
-  {
-    "href": "/components/controls",
-    "content": "Controls Interactive control buttons used for navigation and interface actions. Built for touch-first interactions with consistent spacing and accessibility features. Example Icons Controls support various icon types for different interface actions. States Disabled Cannot be focused, does not receive click events and provides appropriate visual feedback. Usage Controls are designed for touch-first interfaces and provide consistent interactive elements across the application. They should be used for: - Navigation actions (menu, close) - Search functionality - Directional navigation (chevrons) - Other interface controls The component renders as a <button> element and supports all standard button attributes and accessibility features. API React Props | Prop | Type | Default | Description | | ------------ | --------- | ------- | ------------------------------------ | | icon | string | - | Required. Icon name to display | | isDisabled | boolean | - | Disable the control button | | className | string | - | Additional CSS classes | | elemRef | Ref | - | Forwarded ref for the button element | The component also accepts all standard HTML button attributes like onClick, aria-label, data-*, etc."
-  },
-  {
-    "href": "/components/cover",
-    "content": "Cover Image overlaid with content. <h2 className=\"bold\">Heading</h2> Responsive srcset You can image sources by breakpoints. This is a best practice for designing for mobile devices. Making sure small devices get small images. We don't want to use more bandwidth if not necessary <h2 className=\"bold\">Heading</h2> Sizes We have 4 different sizes of overlay. You can choose which one fits your usecase best. <h2 className=\"bold\">Small</h2> <hr /> <h2 className=\"bold\">Medium</h2> <hr /> <h2 className=\"bold\">Large</h2> <hr /> <h2 className=\"bold\">Extra Large</h2> <hr /> <hr /> <hr /> <hr /> Background position If you need specific area of the background image to be always visible you can \"stick it\" to that position. <h2 className=\"bold\">Center (default)</h2> <hr /> <h2 className=\"bold\">Top</h2> <hr /> <h2 className=\"bold\">Bottom</h2> API React Props | Prop | Type | Default | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------ | | bgSrc | string \\| { default: string, xs?: string, sm?: string, md?: string, lg?: string, xl?: string, xxl?: string, xxxl?: string } | - | Required. Background image source. URL string or object of breakpoint: url pairs | | size | \"small\" \\| \"medium\" \\| \"large\" \\| \"xlarge\" | - | Size variant for the cover overlay | | bgPosition | \"top\" \\| \"center\" \\| \"bottom\" | \"center\" | Vertical position of the background image | | contentClass | string | - | Additional CSS classes for the overlay content | | className | string | - | Additional CSS classes for the cover container | | children | React.ReactNode | - | Content to overlay on the background image |"
-  },
-  {
-    "href": "/components/divider",
-    "content": "Divider Divider serves as an option for horizontal division of spaces/elements/contents. Example Content Divider can hold different contents if you need to visualise separation with something like a word or icon, you can do it here. custom text</strong>} /> API React Props | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ---------------------------------- | | content | React.ReactNode | - | Custom content inside divider | | icon | string | - | Icon name to render inside divider | | className | string | - | Additional CSS classes |"
-  },
-  {
-    "href": "/components/dropdown",
-    "content": "Dropdown It's required to use id on dropdown a toogle button for it to work. id of dropdown should follow pattern dropdown-<name> and for toggle buttons id pattern btn-<name> should be used. Laborum laboris amet minim. Quis adipisicing eu consectetur. Deserunt id consectetur esse in. Dropdown Interactive Dropdown menu with Interactive functionality eg. forms, buttons etc. should not close after click inside of dropdown component. This can be achieved with attribute [data-dropdown-interactive]. Laborum laboris amet minim. Quis adipisicing eu consectetur. Deserunt id consectetur esse in. Focus Trap Prevents user from leaving the Dropdown using keyboard without closing the Dropdown. Can be achieved with attribute [data-dropdown-focus-trap]. In this case Dropdown can be close by using Escape key, but it's also recommended to use close button. Close buttons id needs to follow pattern close-btn-<name> for it to work. <option>Item 1</option> <option>Item 2</option> Position Dropdown can be aligned to left, right or center side of toggle button. <p>Told ya I'm aligned to left...</p> <p>Told ya I'm aligned to center...</p> <p>Told ya I'm aligned to right...</p> API React Props Dropdown | Prop | Type | Default | Description | | --------------- | ------------------------------- | -------- | ------------------------------------------------------------------------- | | id | string | - | Required. Unique identifier for dropdown (pattern: dropdown-<name>) | | button | DropdownButtonProps | - | Required. Toggle button configuration object | | placement | \"left\" \\| \"center\" \\| \"right\" | \"left\" | Dropdown alignment relative to toggle button | | isInteractive | boolean | false | Prevent dropdown from closing on clicks inside (for forms, buttons, etc.) | | hasFocusTrap | boolean | false | Trap keyboard focus within dropdown | | hasSpacing | boolean | true | Apply spacing around dropdown content | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Dropdown content (DropdownItem, DropdownDivider components) | DropdownItem | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ---------------------- | | href | string | - | Link URL | | disabled | boolean | - | Disable the item | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Item content | DropdownDivider Component for visual separation between dropdown items. No props required. JS module reference All elements with data-dropdown are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ----------------------- | ------------------------ | ----------------------------- | --------------------------------------------------------- | | dataInteractive | string | \"data-dropdown-interactive\" | Attribute for interactive mode | | focusTrap | string | \"data-dropdown-focus-trap\" | Attribute for focus trap mode | | removeDialogOnDestroy | boolean | false | Remove dialog element on destroy | | popperOptions | Partial | See source | Popper.js configuration | Dropdown Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
-  },
-  {
-    "href": "/components/expander",
-    "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Accessibility The Expander component uses the native <details> and <summary> HTML elements, which provide built-in accessibility support. Screen readers automatically announce the expanded/collapsed state without requiring manual ARIA attributes. The native <details> element ensures: - Keyboard navigation works automatically (Enter/Space to toggle) - Screen readers announce the state changes - Focus management is handled by the browser Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state to improve user experience. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
-  },
-  {
-    "href": "/components/feature-accordion",
-    "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho Responsive images with srcset Use data-image-srcset to provide multiple image resolutions for different screen densities. <h3 className=\"bold\">AI-powered camera with enhanced clarity</h3> <p>High-resolution images for retina displays</p> Learn More <h3 className=\"bold\">Professional photography setup</h3> <p>Optimized for high-DPI screens</p> Learn More Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via data-image-alt attribute - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, the JavaScript module automatically generates images from data-image-url, data-image-alt, and data-image-srcset attributes on accordion items. API React Props FeatureAccordion | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------------- | ------------------ | ------- | ------------------------------------------------------------------ | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | data-image-url | string | - | Image URL (or use imageUrl prop) | | data-image-alt | string | - | Image alt text (or use imageAlt prop) | | data-image-srcset | string | - | Image srcset for responsive images (or use imageSrcSet prop) | | data-image | string \\| object | - | Responsive image object with breakpoint keys (or use image prop) | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: data-image > data-image-srcset + data-image-url > data-image-url Vanilla HTML: In non-React environments, images are automatically generated from data-image-url, data-image-alt, and data-image-srcset attributes on the accordion item element. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | itemSelector | string | \"[data-feature-accordion-item]\" | Selector for accordion items | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | | imageSelector | string | \"[data-feature-accordion-image]\" | Selector for images | FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
-  },
-  {
-    "href": "/components/footer",
-    "content": "Footer A comprehensive site footer component with navigation links, logo, social media links, app download badges, legal links, and copyright information. Automatically adapts to different color schemes using a CSS-first implementation. Basic Usage Custom Data Footer accepts custom data to override the default footer content. The data structure includes columns with navigation links, bottom links, and copyright information. Standalone Usage The Footer component is built as a standalone bundle that provides complete styling and xs accordion behavior. It automatically adapts to light and dark themes using CSS variables. Build Files - CSS: build/lib/footer.css - JavaScript: build/lib/footer.js Quick Start 1. Build the bundle: 2. Include the files: 3. Font Integration The component includes OrangeSK Neue font integration. Ensure font files are available or update the CSS paths accordingly: Features - Standalone Auto-Init: Automatically initializes all elements with data-footer - XS Accordion: Footer columns collapse into accordion sections only on xs screens (< 480px) - Theme Support: Automatic light/dark theme switching via .is-light/.is-dark classes - Responsive Design: Mobile-first approach with progressive enhancement - Top Utility Bar: Logo and social links are displayed together in a single responsive row - App Download Bar: Built-in App Store and Google Play badges with external links - Accessible: Semantic HTML structure with proper ARIA labels - Customizable: Easy to modify styling via CSS variables HTML Structure JavaScript API The bundle exposes a global ODSFooter object: Theme Integration Props | Prop | Type | Default | Description | | ----------- | -------- | ------------------- | -------------------------------------------------------- | | data | object | Default footer data | Custom data structure to override default footer content | | className | string | - | Additional CSS classes | Data Structure The data prop accepts an object with the following structure: Accessibility - Uses semantic <footer> element for proper landmark navigation - Uses paragraph titles (.footertitle) in navigation columns to avoid heading hierarchy conflicts - All links are keyboard accessible - External app links use target=\"blank\" with rel=\"noopener noreferrer\" - Screen readers can easily navigate between footer sections - Proper contrast ratios maintained in both normal and inverse themes Structure The Footer component consists of: 1. Top Bar: Company logo and social media actions with responsive wrapping 2. Navigation Columns: Organized links grouped by category 3. App Download Bar: App Store and Google Play badges plus Plan obnovy link 4. Bottom Links: Legal and secondary navigation links 5. Copyright: Copyright information aligned to the right on larger screens Responsive Behavior - Mobile (xs): Single-column menu with accordion interaction, bars stack vertically, bottom legal links stack in a column - Small (sm): Two-column navigation menu with expanded (non-accordion) columns and list break helpers for inline list wrapping - Medium (md): Three-column navigation menu, bottom section splits into links and copyright - Large (lg+): Four-column navigation menu with increased spacing API React Props | Prop | Type | Default | Description | | ----------- | ------------ | ------------ | ----------------------------------- | | data | FooterData | footerData | Footer content configuration object | | className | string | - | Additional CSS classes | FooterData Type"
-  },
-  {
-    "href": "/components/forms/addons",
-    "content": "Search Icon Add search icon to TextInput using searchIcon=\"transient\". For Autocomplete, use .input--search-icon through autocompleteConfig.customInputClassName. Icon is visible when element is not focused and doesn't have value. It's required to set empty placeholder. Usage with placeholder is described in the example below. Does not apply for radios and checkboxes. <br /> <br /> <br /> Search icon with placeholder When displaying search icon on TextInput with placeholder, use searchIcon=\"persistent\". For Autocomplete, set .input--search-icon-with-placeholder through autocompleteConfig.customInputClassName. Does not apply for radios and checkboxes. Usage with Autocomplete Usage with TextInput Regular input Large input Control Group Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes. Example Variants With Button Ok } control={{ type: \"text\", id: \"group-2\" }} /> Size kg</span>, Send]} control={{ type: \"text\", size: \"large\", id: \"group-3\" }} />"
-  },
-  {
-    "href": "/components/forms/autocomplete",
-    "content": "Autocomplete Adds typeahead nad filtering capability to input. Autocomplete Field Autocomplete Field consists of: 1. Label (mandatory) 2. Tooltip (optional) 3. Hint (optional) 4. Autocomplete control itself 5. Messages (optional) Progressive enhancement of a select element If your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a <select> on the server, and use progressive enhancement. ODS Autocomplete wrapper javascript automatically uses progressive enhancement when initalized on a select element. Rendering an autocomplete on a div When rendering a select element is not feasible, for example due to fetching search results via an API, Autocomplete can be rendered inside a div. With search icon More about usage with search icon can be found in Addons documentation. JS module reference Autocomplete is backed with accessible-autocomplete | see docs All elements with data-autocomplete attribute will be initialised automatically. Config can be also passed via data-autocomplete-config as a JSON string. Please note that, due to security issues, it is not possible to pass any executable code via this attribute. If you need to configure a filtering function, please initialize Autocomplete manually. Manual initialization { const cities = ['Bratislava', 'Banská Bystrica', 'Košice', 'Žilina']; const myAutocomplete = new window.myApp.Autocomplete( document.getElementById('my-autocomplete'), { // required config // fuction that populates search results source: (query, populateResults) => { // you can filter filter items based on your preference, for example you // can use indexOf() or startsWith() function inside filter, or any different way to filter items const filteredResults = cities.filter( city => city.toLowerCase().indexOf(query.toLowerCase()) !== -1 ); populateResults(filteredResults); }, // This function will be called when you confirm the option, you can for example change page url // argument is object with name attribute onConfirm: (option) => { if(option) { params.delete('q'); params.set('q', option.name); window.location.search = params.toString(); } }, defaultValue: '', templates: { // inputValue is a function that receives one argument, the currently selected suggestion. // It returns the string value to be inserted into the input. // example inputValue: result => result && result.name , // suggestion is a function that receives one argument, a suggestion to be displayed. // It is used when rendering suggestions, and should return a string, which can contain HTML. // example suggestion: result => result && \\<strong>\\${result.name}</strong>\\, } } );} Config See Accessible autocomplete documentation: https://alphagov.github.io/accessible-autocomplete/ Default config {objectToString(defaultConfigAutocomplete)} Methods Autocomplete has only one method - init. The Accessible Autocomplete plugin does not provide any methods for interacting with its instance. export const methods = [ { prop: \"init\", type: \"func\", description: \"Initialize instance. This is called automatically on new Plugin(el, config)\", }, ]; API React Props | Name | Type | Default | Description | | -------------------- | ---------------------- | ------- | ------------------------------------------------------------ | | autocompleteConfig | Record<string, any> | - | Module config. For more see accessible-autocomplete docs. | | options | AutocompleteOption[] | [] | Array of string options or objects with title and value. | | placeholder | string | - | Placeholder text. | | className | string | - | Additional CSS classes. | JS module reference Default Config | Property | Type | Default | Description | | ---------------------- | -------------- | ----------- | ---------------------------------------------------------- | | autoselect | boolean | true | Whether to autoselect the first option. | | wrapperClassName | string | \"\" | CSS class for wrapper element. | | menuClassName | string | \"\" | CSS class for menu element. | | optionClassName | string | \"\" | CSS class for option elements. | | customInputClassName | string | \"\" | CSS class for custom input. | | displayMenu | string | \"overlay\" | Menu display mode. | | tAssistiveHint | () => string | Slovak hint | Function returning assistive hint text for screen readers. | Methods | Method | Description | | ----------------- | ------------------------------------------------------------------ | | destroy() | Removes event listeners and cleans up the autocomplete instance. | | update() | Re-initializes the autocomplete with current configuration. | | getInstance(el) | Static method to get the Autocomplete instance from a DOM element. |"
-  },
-  {
-    "href": "/components/forms/captions/hint",
-    "content": "import React from \"react\"; Hint Provide instructions on how to fill a form field. Unlike a placeholder, hint stays visible even while the user is typing. Hints improve experience when the field expects special formatting or can help users fint the required information (e.g. a contract number or SN). Using a properly worded hint can also reduce anxiety when filling in sensitive information. Fill the field like this Using in Fields Hint must be reffered to using aria-describedby attribute on the input element. Without it, screenreader users will not be able to conveniently reach the provided help text. By checking this, you declare you understand the{\" \"} important document. </React.Fragment> } /> API React Props | Name | Type | Default | Description | | ----------- | ----------------- | ------- | ----------------------- | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Hint text content. |"
-  },
-  {
-    "href": "/components/forms/captions/label",
-    "content": "import React from \"react\"; Label Every input needs a label. A label provides instructions what to fill inside an input. Each label must be visually and programatically associated with an input. Learn how to write label copy Example label Labelling required inputs E-Commerce checkouts need to mark both required and optional fields explicitly. In other cases like a login or newsletter subscribtion it is not needed because of context, previous experience of the user and low number of fields. Try to avoid optional fields in forms. But if you use them, you should at least clearly distinguish which input fields cannot be left blank by the user. How to mark required fields If you need to mark field as a required, rather than mentioning \"required\" next to every header, use an asterisk with screenreader text. How to mark optional fields Mark the optional fields in checkout or registration process with \"optional\" in words next to the label. Example label <span className=\"reset-font-weight\">(optional)</span> <br /> Example label <span className=\"sr-only\">required</span> <br /> Links and buttons in labels Don't place interactive elements inside a label. Touchscreen devices often remove click listeners on label descendants, rendering them useless. Interactive elements should be placed next to the label element, making sure that both label and action texts are provide meaningful information to screenreaders on their own. This is usually done with visually hiding portions of the instructions. Agree with<span className=\"visually-hidden\"> terms and conditions</span> {\" \"} terms and conditions Using in fields With action action (optional) </React.Fragment> } /> Agree with<span className=\"visually-hidden\"> terms and conditions</span> </React.Fragment> } labelAfter={terms and conditions} /> API React Props | Name | Type | Default | Description | | ----------- | ----------------- | ------------ | ------------------------------------------ | | htmlFor | string | required** | HTML for attribute linking label to input. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Label text content. |"
-  },
-  {
-    "href": "/components/forms/captions/message",
-    "content": "Message Provide feedback to user input. Please also check validation copy docs. A message to you, Rudy Variants Info (default) Provides assurance or guidance to the user. A message to you, Rudy Error An error message should display instruction on how to fix an input error. Error messages are displayed under an input until the error is fixed. Stop your messing around Warning They are fundamentally different in nature from error messages as they only alert the user to potential problems but doesn't prevent them from proceeding. This makes warnings ideal for inputs that tend to follow certain patterns, yet can't be validated without invoking false negatives. Better think of your future API React Props | Name | Type | Default | Description | | ----------- | --------------------------------------------- | ------- | ----------------------------------------------- | | type | \"info\" \\| \"warning\" \\| \"error\" \\| \"invalid\" | - | Type of message. Determines the icon and color. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Message content. |"
-  },
-  {
-    "href": "/components/forms/captions/tooltip",
-    "content": "Form Tooltip After exhausting the possibilities of label and hint, the last resort is to use a tooltip. Tooltips cannot contain interactive elements such as hyperlinks and buttons. If your information requires them, use a hint instead. A form tooltip is a small info tooltip placed next to the field label: - The tooltip should open to the right using [data-tooltip-placement=\"right\"] attribute - The tooltip must be refferenced using [aria-describedby=\"tooltip-id\"] attribute on the control (input) element. Help text Using in Fields Accessibility To enable screenreader support, it is important to reference the tooltip from the control (input) element using aria-describedby. Simplified example:"
-  },
-  {
-    "href": "/components/forms/checkbox",
-    "content": "Checkbox A checkbox is an interface for making one or more selections from multiple options, or providing a boolean answer. Based on context, checkbox can be used as a standalone field or a multi-choice fieldset. Anatomy of a standalone Checkbox Field A Checkobx Field is usually used for consents (terms and conditions, competition rules, etc.) and consists of: - Control - Checkbox control itself - Description - Label (mandatory) - Tooltip (optional) - Hint (optional) - Messages (optional) read the Terms and conditions document </> } messages={[ { type: \"error\", text: \"This is mandatory, no way around that.\" }, ]} /> Anatomy of a Checkbox Fieldset A Checkbox Fieldset is usually used in flows with various number of options (checkout settings, multi-choice consents, etc.) and consists of: - Legend (mandatory) - Description (optional) - Checkbox Fields (mandatory) - Control - Checkbox control itself - Description - Label (mandatory) - Tooltip (optional) - Hint (optional) - Messages (optional) Control sizes Large Control states Default Checked Disabled Cannot be focused, does not receive click events and is not submitted with the form. <br /> Invalid Field did no pass validation. Must be accompanied by a meaningfull Error message. <br /> Toggle Displays Checkbox as toogle switch. <br /> <br /> <br /> API React Props | Name | Type | Default | Description | | ------------ | ---------------------- | ------------ | --------------------------------------------- | | id | string | required | HTML id attribute. | | isChecked | boolean | false | Checked state. | | isDisabled | boolean | false | Disabled state. | | isInvalid | boolean | false | Invalid state. | | isToggle | boolean | false | Checkbox is displayed as Toggle. | | name | string | - | HTML name attribute. Id is used when not set. | | size | \"default\" \\| \"large\" | \"default\" | Size of element. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/forms/datepicker",
-    "content": "DatePicker Entering known dates, such as birthday, ID expiration date and other date that a user already knows or can look up wihtout using a calendar should be done using a{\" \"} date input </> } /> Datepicker Field 1. Label (mandatory) 2. Tooltip (optional) 3. Hint (optional) 4. DatePicker control group - Input field (for user interaction) - Hidden input (for storing and sending a YYYY-MM-DD value) - Calendar texts - Calendar widget toggle button - Calendar widget - Year select - Month select - Pagination - Calendar 5. Messages (optional) Datepicker Component Disable dates You can disable dates using disabledDayFn function in DayPicker config object. But in some cases it can be more effective to use data-enabled-days and pass string of dates with format YYYY-MM-DD separated by commas. In this case all dates except the ones you passed will be disabled. data-enabled-days will override disabledDayFn if both are set. User input and output data Datepicker supports manual input and selecting a date from a calendar. Selecting/entering a date populates the hidden field with a YYYY-MM-DD value. Manual input parses the input string, and if it succeeds, it selects the corresponding date. The parser can be customized, but does not handle errors - error handling must be done by your app. The default parser enables slovak locale (D. M. YYYY). Config DatePicker is backed with daypickr package. This package contains it's own default configuration that is partially overriden by configuration in this project (see Default config bellow). To see all configuration options visit previously mentioned daypickr package. API React Props | Name | Type | Default | Description | | ----------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ | | config | DayPickrConfig | - | Configuration object for daypickr. Includes locale, classes, firstDayOfWeek, l10n, parseDate, calendarIcon, and disabledDayFn. | | className | string | - | Additional CSS classes. | | id | string | - | Input ID attribute. | | name | string | - | Input name attribute. | | value | string | - | Initial date value in YYYY-MM-DD format. | JS module reference Default Config The DatePicker uses daypickr configuration with customized defaults. Key configuration properties include: | Property | Type | Default | Description | | ---------------- | --------------------------------- | -------------- | ---------------------------------------------------- | | locale | string | \"sk\" | Locale for date formatting. | | classes | DayPickrClasses | Custom classes | Object with CSS classes for all datepicker elements. | | firstDayOfWeek | number | 1 | First day of week (0 = Sunday, 1 = Monday). | | l10n | DayPickrL10n | Slovak locale | Localization strings for UI elements. | | parseDate | (date: string) => Date \\| false | - | Custom date parser function. | | calendarIcon | DayPickrIcon | - | Custom calendar icon configuration. | | disabledDayFn | (date: Date) => boolean | - | Function to disable specific dates. | Methods | Method | Description | | ----------------- | ---------------------------------------------------------------- | | destroy() | Removes the datepicker instance and cleans up event listeners. | | update() | Re-initializes the datepicker with current configuration. | | getInstance(el) | Static method to get the DatePicker instance from a DOM element. |"
-  },
-  {
-    "href": "/components/forms/field",
-    "content": "import ToggleCheckbox from \"@/docs/utils/ToggleCheckbox\"; Field Scaffolding for Controls and Captions Required minimum TextInput Radio Checkbox File Select Range DatePicker Group ipsum</span>, Ok , ], }} label=\"Field label\" /> Hint, Tooltip and Messages TextInput Error state Warning state Success state Radio Checkbox Checkbox Toggle File Select Range DatePicker Group Warning ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" messages={[{ type: \"error\", text: \"Error message\" }]} tooltip=\"Field tooltip with further explanation\" /> Warning ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" messages={[{ type: \"warning\", text: \"Warning message\" }]} tooltip=\"Field tooltip with further explanation\" /> Success ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" tooltip=\"Field tooltip with further explanation\" /> Stepper Fill parent Because Checkbox/Radio input styling, we are not able to fill the parent using .block-actioncontrol. We can do this using className .radiocheck--fill, thanks to which Checkbox fill whole space of parent element with set position. In this case position: relative of .card prevents element from further expanding. Disadvantage is that we can't have another interactive element inside of this card. <div className=\"card border border--gray\" id=\"checkbox-no-fill-border\"> <div className=\"cardsection\"> <div className=\"form-field form-field--radiocheck\"> <div className=\"form-fieldcontrol\"> <input type=\"checkbox\" className=\"checkbox block-actioncontrol\" id=\"checkbox-no-fill\" name=\"checkbox-no-fill\" ></input> <div className=\"checkbox-display\"></div> </div> <div className=\"form-fielddescription\"> <label htmlFor=\"checkbox-no-fill\" className=\"label form-fieldlabel\" id=\"checkbox-no-fill-label\" > Whole element is not clickable </label> </div> </div> </div> </div> <div className=\"card border border--gray border-hover\" id=\"checkbox-border\"> <div className=\"cardsection\"> <div className=\"form-field form-field--radiocheck\"> <div className=\"form-fieldcontrol\"> <div className=\"checkbox-display\"></div> </div> <div className=\"form-fielddescription\"> <label htmlFor=\"checkbox-fill\" className=\"label form-fieldlabel\" id=\"checkbox-fill-label\" > Whole element is clickable </label> </div> </div> </div> </div> API React Props | Name | Type | Default | Description | | ------------ | --------------------------------------- | ------------ | ------------------------------------------------------------- | | className | string | - | Additional CSS classes. | | control | FieldContextType[\"control\"] | required | Control element configuration with type, props, etc. | | hint | React.ReactNode | - | Hint text displayed below the label. | | label | React.ReactNode | - | Field label. | | labelAfter | React.ReactNode | - | Content displayed after the label (e.g., optional indicator). | | messages | Array<{ type: string; text: string }> | [] | Validation or info messages. | | tooltip | React.ReactNode | - | Tooltip content for additional information. |"
-  },
-  {
-    "href": "/components/forms/fieldset",
-    "content": "Fieldset Related inputs should be wrapped by a fieldset. For example when asking for address, the fields are closely related and should be grouped together. The legend element must be the first descendant of the fieldset. export const DeliveryFields = ({ items }) => ( <> {items.map((item) => ( ))} </> ); Fieldset main error In case of whole fieldset problem, we define main fieldset error above fieldset itself. Block field errors In case of only separate field problems, we show field errors under corresponding field as usual. Known date with description Manual entry date fields are used when users knows or can look up the date without using a calendar (e.g. birthday, document validity dates). A fieldset can be described by referencing the describing element via aria-describedby on the fieldset element. export const description = ( <p id=\"birthday-description\">Napríklad 29. 8. 1944</p> ); export const Fields = ({ items }) => ( {items.map((item) => ( ))} ); Fieldset main error In case of whole fieldset problem, we define main fieldset error above fieldset itself. Inline fields errors In case of separate field problems, inline field errors are stacked under the fieldset in order of the fields and fields style changes to error state style. Legend as h1 When a form is the only element on the page, the first level heading can be placed inside the legend. Kam to bude?</h1>}> Complex layouts The HTML5 spec defines dictates, that a legend can only be used as the first child of a fieldset element. Moreover, fieldset and legend are replaced elements, making them very difficult to style (for example flexbox does not work here). Fortunately, this can be solved using ARIA. The fieldsets implicit role is group, while legend serves as a label. <div role=\"group\" aria-labelledby=\"group-label\"> <div id=\"group-label\">Sort by: </div> </div> Accessibility Fieldsets group inputs into logic parts of a form. A screenreader usually announces the filedset legend along with the label of each nested input, which helps users stay in context when tabbing through different inputs within a fieldset. For example a color switch would consist of radio buttons wrapped in a fieldset, with a legend reading \"Color\". A screenreader would then read each input's label prefixed with the legend contnets (e.g. Color blue, color red, color green...). API React Props | Name | Type | Default | Description | | ------------- | ----------------------------------------- | ------------ | ------------------------------------------------------- | | legend | React.ReactNode | required | Required <legend /> for fieldset. | | legendProps | React.HTMLAttributes | - | Additional legend props. | | description | React.ReactNode | - | Description text for the fieldset. | | messages | FieldsetMessage[] | - | Array of message objects for validation or information. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Child form elements. |"
-  },
-  {
-    "href": "/components/forms/file",
-    "content": "File File input allows uploading one or multiple files. File Field A File Field consists of: 1. Label (mandatory) 2. Tooltip (optional) 3. Hint (optional) 4. File control itself 5. List of selected files (visible after selecting file/files) 6. Messages (optional) Control States Disabled Cannot be focused, does not receive click events and is not submitted with the form. Sizes Large JS Module Reference The JS Module is responsible for updating label text with the selected file name. All elements matching input[type=\"file\"].file-input selector with a unique name attribute will be initialised automatically. input[name] must be specified for the JS module to initialize. Custom initialization Methods - init() - handles initialization - destroy() - destroys the instance - update() - destroys and initializes the instance again Accessibility Bootsted implementation changes the input label text to the file name of selected file. Once user selects a file, they loose the context and therefore this implementation is considered bad usability and violates at least one WCAG success criterion - 3.3.2 Labels or Instructions - Level A. API React Props | Name | Type | Default | Description | | ------------ | ---------------------- | ----------- | ------------------------------------------------------ | | id | string | - | HTML id attribute. Generated automatically if omitted. | | isDisabled | boolean | false | Disabled state. | | name | string | - | Input name. | | size | \"default\" \\| \"large\" | \"default\" | Size of element. | | className | string | - | Additional CSS classes. | JS module reference Default Config | Property | Type | Default | Description | | ---------------------- | ------------------------------------- | ---------------------- | ------------------------------------------------ | | dragDropClassname | string | \"is-dragdrop\" | CSS class for drag & drop state. | | inputSelector | string | 'input[type=\"file\"]' | Selector for file input element. | | resultsSelector | string | \".file-input__files\" | Selector for results list element. | | deleteButtonSelector | string | \"[data-file-delete]\" | Selector for delete buttons. | | deleteFileAttr | string | \"data-file-delete\" | Attribute name for file delete buttons. | | fileTemplate | (name: string, i: number) => string | Function | Template function for rendering file list items. | Methods | Method | Description | | ----------- | -------------------------------------------------------------- | | destroy() | Removes event listeners and cleans up the file input instance. | | update() | Re-initializes the file input with current configuration. |"
-  },
-  {
-    "href": "/components/forms/inputstepper",
-    "content": "InputStepper Field Layout If you want different layout use Bar component. <div className=\"form-field\"> <label htmlFor=\"id-2\" className=\"label form-fieldlabel\" id=\"id-2-label\" > {\"Field label\"} </label> &nbsp; Field tooltip with further explanation <p className=\"hint form-fieldhint\" id=\"id-2-hint\"> {\"Field instructions\"} </p> <p className=\"message\" id=\"id-2-message-0\"> {\"Info message\"} </p> </div> InputStepper config By default minimum value is 1, maximum value is 999 and defaultValue is 1. You can override these values by passing JSON string to data-inputstepper. InputStepper disabled Outside of disabled attributes on input and buttons, dont forget to add className input-stepper--disabled to <div/> wrapper, otherwise disabled attributes will be removed during component initialization. {\" \"} InputStepper with non editable input When nonEditableInput config is used, input is replaced only with text number and user cannot change it by typing. JS Module Reference All elements with [data-inputstepper] will be initialised automatically on DOMContentLoaded event. Config The module is configured either by passing a JSON string representing a config object through [data-inputstepper] attribute or during manual initialisation. Default config Manual initialisation Methods - init() - handles initialization - destroy() - destroys the instance - update() - destroys and initializes the instance again API React Props | Name | Type | Default | Description | | ------------------ | -------------------- | ------------ | ----------------------------------------------------------------------- | | config | InputStepperConfig | - | Configuration object with min, max, defaultValue, and nonEditableInput. | | id | string | required | Input ID attribute. | | inputClassName | string | - | Additional CSS classes for the input element. | | isDisabled | boolean | false | Disabled state. | | name | string | - | Input name attribute. | | nonEditableInput | boolean | false | Whether the input is non-editable (display only). | | className | string | - | Additional CSS classes for the wrapper. | JS module reference Default Config | Property | Type | Default | Description | | ------------------ | --------- | ------- | ---------------------------------- | | nonEditableInput | boolean | false | Whether the input is non-editable. | | min | number | 1 | Minimum value allowed. | | max | number | 999 | Maximum value allowed. | | defaultValue | number | 1 | Initial/default value. | Methods | Method | Description | | ----------------- | ------------------------------------------------------------------ | | destroy() | Removes event listeners and cleans up the input stepper instance. | | update() | Re-initializes the input stepper with current configuration. | | getInstance(el) | Static method to get the InputStepper instance from a DOM element. |"
-  },
-  {
-    "href": "/components/forms/radio",
-    "content": "Radio A Radio input is an interface for choosing one option from a limited amount of choices. Radios are used as a group and presented inside a Fieldset. Consider using a Select when there are more than 5 options and the options do not need additional explanation. Anatomy of a Radio Fieldset A Radio Fieldset consists of: - Legend (mandatory) - Description (optional) - Radio filelds (mandatory) - Control - Radio control itself - Description - Label (mandatory) - Tooltip (optional) - Hint (optional) - Messages (optional) Control sizes Large Control states Default States Checked Disabled Cannot be focused, does not receive click events and is not submitted with the form. <br /> Invalid Field did no pass validation. Must be accompanied by a meaningfull Error message. <br /> API React Props | Name | Type | Default | Description | | ------------ | ---------------------- | ------------ | --------------------------------- | | id | string | required | HTML id attribute. | | isChecked | boolean | false | Checked state. | | isDisabled | boolean | false | Disabled state. | | isInvalid | boolean | false | Invalid state. | | name | string | required | HTML name attribute. | | size | \"default\" \\| \"large\" | \"default\" | Size of element. | | value | string | - | HTML value. Uses id when not set. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/forms/rangeslider",
-    "content": "import defaultConfig from \"@/components/Forms/RangeSlider/data\"; export const basicConfig = { start: [0], range: { min: 0, max: 50, }, connect: [true, false], }; RangeSlider Interactive widget used a replacement for input[type=range] using noUiSlider RangeSlider Field 1. Label (mandatory) 1. Tooltip (optional) 1. Hint (optional) 1. Before Element arbitrary content before the slider, useful for output values (optional) 1. RangeSlider control itself - Track - visualises range that handle(s) can travel along (mandatory) - Handle(s) - one or more handles used to select desired value (mandatory) - Pips - points along the slider (optional) 1. After Element arbitrary content after the slider, useful for output values or custom pips (optional) 1. Messages (optional) Before element</p>, elementAfter: <p className=\"mb-small\">After element</p>, }} tooltip=\"Helpful tooltip\" label=\"How much would you like?\" hint=\"Some helpful hint text\" messages={[ { type: \"error\", text: \"You have selected zero. Please have at least one.\", }, ]} /> Width Default Fullwidth Output values By default, the ` component renders hidden input fields with current value of each handle. Initialize RangeSlider.static.js expects hidden input elements with a name property consisting of the id of the rangeslider element and the index of the handle, delimited by a dash. <input type=\"hidden\" name=\"rangeslider-0\" /> Accesing instance Initialized RangeSlider is stored in ODSRangeSlider property of the element. So by accessing this property, for example by document.getElementById('id-1').ODSRangeSlider, you get access to RangeSlider config, element itself, it inputs and outputs and instance which contains noUiSlider itself. Through this you can for example get or set RangeSlider value document.getElementById('id-1').ODSRangeSlider.instance.set(10). Display To display the values for the user, place an element anywhere in the document and assign it an id equal to the rangeslider element, index of the handle and \"output\", delimited by a dash. <div id=\"rangeslider-0-output\" /> Formatting By default, the value of the input is formatted to zero decimal places and can be overriden using the format property in config. The config format expects a wNumb config object. You can format the output by passing a wNumb config object to data-format attribute of the output element. <div id=\"range-output-preview-0-output\" /> <div id=\"range-output-preview-1-output\" data-format={JSON.stringify({ decimals: 2, mark: \",\", thousand: \" \", prefix: \"\", suffix: \" MB\", })} /> Accessibility noUiSlider provides keyboard operability and screenreader support. Authors must provide accessible names for slider handles and create relationship between handles and captioning elements. Assign relationship between slider handle and Captions RangeSlider uses hidden fields that are populated with user selected values. We can't point related information to those hidden fields, but the JS generated handles. Each handle must have it's own accessible name. Hint, tooltip and validation messages (captions) must be also in relationship with the handle elements. This is achieved defining aria-label, aria-labelledby and aria-describedby attributes for each handle using handleAttributes property of the config object. Label Since our rendered input is hidden, the label element is replaced by a span. The relationship is then defined in the config object using aria-labelledby Multiple handles In case multiple handles are present, we need to create a different accessible name for each handle, as they represent different parts of the range. Screenreader users must be able to distinguish which handle they are using and what does the handle represent. Hint, Tooltip and Messages Hint, tooltip and messages must also be in relationship with the handle using aria-describedby. When multiple handles are used, authors are responsible to pick whether it makes more sense to describe all or just some of the handles. JS Module Reference All elements with [data-rangeslider] will be initialised automatically on DOMContentLoaded event. Config The module is configured either by passing a JSON string representing a noUiSlider config object through [data-rangeslider] attribute or during manual initialisation. When configuring the module through [data-rangeslider], the format attribute expects a wNumb config object instead of a function. In case you need a custom formatting fuction, omit the data-rangeslider attribute and initialize the module manually. Default config Manual initialisation Notes currently DOES NOT SUPPORT vertical and rtl ortientations and tooltips. API React Props | Name | Type | Default | Description | | --------------- | -------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | config | RangeSliderConfig | required** | noUiSlider config object. Includes connect, format, handleAttributes, pips, range, and start properties. | | elementAfter | React.ReactNode | - | Insert arbitrary element after rangeslider. | | elementBefore | React.ReactNode | - | Insert arbitrary element before rangeslider. | | hasDataAttr | boolean | false | Render data-rangeslider attribute and initialize RangeSlider.static.js. | | id | string | - | HTML id attribute. Generated automatically if omitted. | | width | \"default\" \\| \"fullwidth\" | \"default\" | Width variant. | | className | string | - | Additional CSS classes. | JS module reference Default Config The RangeSlider uses noUiSlider with customized defaults. Configuration is based on noUiSlider options. | Property | Type | Description | | --------- | ------------------------------ | -------------------------------------------- | | format | any | Number formatting using wnumb library. | | range | { min: number, max: number } | Minimum and maximum values for the slider. | | start | number[] | Initial handle positions. | | connect | boolean \\| boolean[] | Whether to show connections between handles. | | pips | object | Configuration for scale/pips display. | Methods | Method | Description | | ----------------- | ----------------------------------------------------------------- | | destroy() | Removes the slider instance and cleans up event listeners. | | update() | Re-initializes the slider with current configuration. | | getInstance(el)` | Static method to get the RangeSlider instance from a DOM element. |"
-  },
-  {
-    "href": "/components/forms/select",
-    "content": "export const options = [\"Option 1\", \"Option 2\", \"Option 3\"]; Select Select is a control that provides a finite menu of options. One option is always selected, a select cannot be empty. Select is used when the user does not need to see all available options. Select Field A Select Field consists of: 1. Label (mandatory) 2. Tooltip (optional) 3. Hint (optional) 4. Select control itself 5. Messages (optional) States Disabled Cannot be focused, does not receive click events and is not submitted with the form. Invalid Field did no pass validation. Must be accompanied by a meaningfull Error message. Widths Default Default width matches widths of other form controls. 12ch Narrow select. Truncnates very long options to maintain it's width. Shrink Shrink matches the control witdh to the longest available option. Fullwidth Fill the available container. Sizes Default Large API React Props | Name | Type | Default | Description | | ------------ | ------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------- | | elemRef | React.Ref | - | Forwarded DOM element ref. | | id | string | - | HTML id attribute. | | isDisabled | boolean | false | Disabled state. | | isInvalid | boolean | false | Invalid state. | | name | string | - | HTML name attribute. | | options | SelectOption[] | - | Select options as array of strings or objects with text and value. Can also be specified via children. | | size | \"default\" \\| \"large\" | \"default\" | Size of element. | | value | string \\| string[] | - | Select value. | | width | \"default\" \\| \"12ch\" \\| \"shrink\" \\| \"fullwidth\" | \"default\" | Element width. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Child option elements. |"
-  },
-  {
-    "href": "/components/forms/text-area",
-    "content": "import React from \"react\"; TextArea Textarea field allows users to enter and edit long textual data. TextArea Field A TextArea Field consists of: 1. Label (mandatory) 2. Tooltip (optional) 3. Hint (optional) 4. TextArea control itself 5. Messages (optional) Control sizes Large Control widths Control width should correspond with the lenght of the expected answer. Controls always provide horizontal space for success indicator. See fieldset documentation for specific usage export const widths = { default: { value: \"Default width\", }, fullwidth: { value: \"Full width input value on the full width of the screen\", }, }; {Object.entries(widths).map(([width, { value, type }]) => ( <h3 className=\"mb-none\">{width[0].toUpperCase() + width.slice(1)}</h3> </React.Fragment> ))} </React.Fragment> Control states Default Disabled Cannot be focused, does not receive click events and is not submitted with the form. Avoid if possible. Disabled fields are not announced by screenreaders. Read only User cannot change the value of the input, but it remains focusable and is submitted with the form. Invalid Field did no pass validation. Must be accompanied by a meaningfull Error message. Success Filed passed inline validation and the user is encouraged to continue. API React Props | Name | Type | Default | Description | | ------------- | -------------------------- | ------------ | ------------------------------------------------ | | id | string | required | HTML id attribute. | | isDisabled | boolean | false | Disabled state. | | isInvalid | boolean | false | Invalid state. | | isReadonly | boolean | false | Readonly state. | | isValid | boolean | false | Valid state. | | name | string | - | HTML name attribute. If not present, id is used. | | placeholder | string | - | Placeholder text. | | size | \"default\" \\| \"large\" | \"default\" | Size of element. | | width | \"default\" \\| \"fullwidth\" | \"default\" | Input width. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Child elements. |"
-  },
-  {
-    "href": "/components/forms/text-input",
-    "content": "import React from \"react\"; TextInput Input field allows users to enter and edit textual data. TextInput Field A TextInput Field consists of: 1. Label (mandatory) 2. Tooltip (optional) 3. Hint (optional) 4. TextInput control itself 5. Messages (optional) Control Types Although the input element type attribute can receive various values, the TextInput component is meant for direct text entry and only supports the following types: - email - hidden - password - search - tel - text - url <br /> <br /> <br /> <br /> <br /> <br /> <br /> Recommendations - Match virtual keyboard with expected data. - type=\"email\" when asking for an email address puts the @ sign directly on the main keyboard. - pattern=\"[0-9]\" inputmode=\"numeric\" attributes opens numeric keyboard. avoid using type=\"number\" when the requested information is not a pure number that can be incremented (e.g. phone number, ZIP code, etc.). Why not to use input type=\"number\" Control sizes Large Control widths Control width should correspond with the lenght of the expected answer. Controls always provide horizontal space for success indicator. See fieldset documentation for specific usage export const widths = { \"3ch\": { value: \"3ch\", }, \"8ch\": { value: \"8 chars\", }, \"12ch\": { value: \"12 characters\", }, default: { value: \"Default width\", }, fullwidth: { value: \"Full width input value on the full width of the screen\", }, }; {Object.entries(widths).map(([width, { value, type }]) => ( <h3 className=\"mb-none\">{width[0].toUpperCase() + width.slice(1)}</h3> </React.Fragment> ))} </React.Fragment> Control states Default Disabled Cannot be focused, does not receive click events and is not submitted with the form. Avoid if possible. Disabled fields are not announced by screenreaders. Read only User cannot change the value of the input, but it remains focusable and is submitted with the form. Invalid Field did no pass validation. Must be accompanied by a meaningfull Error message. Success Filed passed inline validation and the user is encouraged to continue. API React Props | Name | Type | Default | Description | | ------------- | ------------------------------------------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------- | | htmlType | TextInputType | \"text\" | Input HTML type. Options: \"email\", \"hidden\", \"password\", \"search\", \"tel\", \"number\", \"text\", \"url\". | | id | string | required** | HTML id attribute. | | isDisabled | boolean | false | Disabled state. | | isInvalid | boolean | false | Invalid state. | | isReadonly | boolean | false | Readonly state. | | isValid | boolean | false | Valid state. | | name | string | - | HTML name attribute. If not present, id is used. | | placeholder | string | - | Placeholder text. | | size | \"default\" \\| \"large\" | \"default\" | Size of element. | | value | string | - | Input value. | | width | \"3ch\" \\| \"8ch\" \\| \"12ch\" \\| \"default\" \\| \"fullwidth\" | \"default\" | Input width. | | className | string | - | Additional CSS classes. | | searchIcon | \"none\" \\| \"transient\" \\| \"persistent\" | \"none\" | Search icon mode. \"transient\" shows icon only when empty and unfocused, \"persistent\" keeps icon visible with placeholder. |"
-  },
-  {
-    "href": "/components/gauge",
-    "content": "Gauge Stylized display of a scalar value within a known range. Often used to compare a single, important value between multiple product versions. The gauge consists of: - Dial: SVG element, the face of the gauge meter - Display: Gray denominator of the maximum value - Indicator: Black \"needle\" which shows the value - Text: Textual representation of the value <div className=\"h1 bold mb-xsmall\">500</div> <div className=\"bold\"> {\"Mbit/s\"} <br /> {\"sťahovanie\"} </div> Calculating your svg values Gauge presentaion is done using svg. Due to visual complexity, math is needed to display each value correctly. Use the widget below to set your value and copy the code. API React Props | Name | Type | Default | Description | | ------------ | ----------------- | ------- | -------------------------------- | | children | React.ReactNode | - | Text inside the gauge. | | percentage | number | 0 | Value filling the gauge (0-100). | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/grid",
-    "content": "import spaces from \"@/styles/export/space.js\"; Grid The main function of the grid is to distribute items to rows and columns. Our grid has a maximum of 12 columns. Each column can have a custom size defined by breakpoints. Breakpoints Grid uses the mobile-first definition of breakpoints, which means that smallest breakpoint defines default size. Columns You can have a maximum of 12 columns in one row. A default column takes all the available space. <code>(default) 12</code> <code>6</code> <hr /> <code>auto</code> <code>4</code> <code>6</code> <hr /> <code>fill</code> <code>4</code> <code>6</code> <hr /> <code>shrink</code> <code>6</code> Resizing There are two ways of resizing a column. 1. .gridcol--[size] where size is a number 1-12 or one of [shrink/fill/auto] 2. .gridcol--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the column size > XS breakpoint size > > There is no need to specify the xs breakpoint size because it's a default by definition of mobile-first philosophy. What is shrink/fill/auto? - shrink column takes the least amount of space available - fill column takes all the space available and does not shrink to accomodate other columns - auto takes all available space, also tries to shrink to fit into one row. This is the same as .gridcol. <code>(default) 12</code> <code>4</code> <code>shrink</code> <code>fill</code> <code>auto</code> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Available combinations You can use combinations of different size types for one column at once. Available types are [1-12/shrink/fill/auto] for every breakpoint. <code>(default) 12, sm-9, md-6, lg-fill</code> <code>(default) 12, sm-3, md-6, lg-fill</code> Justify content height Grid with justified content height uses flexbox with an attempt to equalize height of column children <div className=\"surface-subtle\"> <p>Children of these columns are the same height</p> </div> <div className=\"surface-subtle\"> <p>The most high column dictates the height of the row</p> </div> <div className=\"surface-subtle\"> <p>Subsequent rows remain unaffected</p> </div> Container alignment Horizontal Vertical Children alignment Vertical Column gap size Add larger space between grid columns, use smaller gap, or remove them completely. There are two ways of adding a column gap: 1. .grid-column-gap--[size] where size is one of [none/small/default/large] 2. .grid-column-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"large\", \"default\", \"small\", \"none\"].map((size, index) => ( <div key={index.toString()}> <h3 className=\"bold\">Column gap size {JSON.stringify(size)}</h3> {[1, 2, 3].map((key) => ( <code>4</code> ))} </div> ))} Row gap size Row gap helps to maintain space between grid rows and fixes unwanted spacing problems on the bottom of grid's last row elements by removing their content margins. There are two ways of adding a row gap: 1. .grid-row-gap--[size] where size is one of [small/medium/large/xlarge] 2. .grid-row-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"small\", \"medium\", \"large\", \"xlarge\"].map((size, index, array) => ( <h3 className=\"mb-2\">Row gap size {JSON.stringify(size)}</h3> {[1, 2, 3, 4, 5, 6].map((key) => ( <code>6</code> ))} ))} Advanced Examples Complex Layout with Alignment <code>top aligned</code> <code>auto middle</code> <code>fill bottom</code> <code>stretch</code> Semantic HTML Tags <code>main content</code> <code>sidebar</code> All Column Sizes (1-12) {Array.from({ length: 12 }, (, i) => ( <code>{i + 1}</code> ))} API Grid React Props | Name | Type | Default | Description | | --------------- | ------------------------------------------------------------------- | ------- | ------------------------------------------ | | vAlign | \"stretch\" \\| \"start\" \\| \"end\" \\| \"center\" | - | Vertical alignment of grid items. | | hAlign | \"end\" \\| \"center\" \\| \"space-around\" \\| \"space-between\" | - | Horizontal alignment of grid items. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | justifyHeight | boolean | false | Whether grid should justify height. | | rowGapSize | \"small\" \\| \"medium\" \\| \"large\" \\| \"xlarge\" \\| Record<string, ...> | - | Row gap size, can be responsive object. | | columnGapSize | \"none\" \\| \"small\" \\| \"default\" \\| \"large\" \\| Record<string, ...> | - | Column gap size, can be responsive object. | | className | string | - | Additional CSS classes. | GridCol React Props | Name | Type | Default | Description | | ----------- | ------------------- | ------- | --------------------------------------------- | | size | ResponsiveSize | - | Column size (1-12), can be responsive object. | | offset | ResponsiveSize | - | Column offset, can be responsive object. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/hero",
-    "content": "import queryString from \"query-string\"; Hero Composition Hero combines Container, Grid, Button and Sticker together with it's built in responsive styles to create a modular component. Height is determined by its content and image, which means that too much text can overflow the image. Copywriters and designers must test that their images and text fit on each breakpoint. Title - Required. - Must be shorter than 45 characters. - Medium (.display-2) and large (.display-1) variants must match with medium and large description size. Medium title can only be used with medium description and large title with large description. Description - Optional. - Must be shorter than 120 characters. - Medium (.h5) and large (.h4) variants must match with medium and large title size. Medium description can only be used with medium title and large description with large title. Price - Optional. - All price wording and numbers must be the same size. - Must not contain conditions (e.g. asterisk and explanation). Button - Optional. - Points to the main actionable section of the page. - Copy should reflect the desired action. Instead of \"Read more\", try and match the button text with the actionable section. Sticker - Optional. - Can contain an icon or text. Image - Always aligned to the right and vertically centered. - Fullwidth image dimensions: - xs: 768 x 540 - sm, md: 768 x 540 + hidpi version - lg: 1024 x 540 + hidpi version - xl: 1280 x 540 + hidpi version - xxl: 1400 x 540 + hidpi version - Half width image dimensions: - xs: 768 x 540 - sm, md: 768 x 540 + hidpi version - lg: 470 x 540 + hidpi version - xl: 590 x 540 + hidpi version - xxl: 650 x 540 + hidpi version - Single size half width image dimensions: - xs: 626 x 540 + hidpi version - Vendor logo height and position the logo size is constrained by its height and must be placed inside the image by a graphic designer. - xs: 30px, 10px from top, 10px from left - sm, md: 50px, 30px from top, 20px from left - lg: 50px, 50px from top, 30px from right - xl: 60px, 60px from top, 30px from right - xxl: 60px, 60px from top, 50px from right Gradient overlay - Optional. - Makes sure text is readable on full width images. Variants Build your own! Visit the playground to build your own Hero Fullwidth photo all features Half width photo With single image size With vendor logo With other vendor logo style API React Props | Name | Type | Default | Description | | -------------------- | --------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | button | HeroButtonProps | - | Action button props (children and any button attributes). | | description | React.ReactNode | - | Main text content. | | hasFullwidthImage | boolean | false | Whether image spans full width. | | hasGradientOverlay | boolean | false | Gradient overlay ensures proper text readability. | | image | HeroImage | - | Use svg illustrations, png for product images and jpg for photos. Can be a simple object with src and srcSet, or a responsive object with default, sm, lg, xl, xxl keys. | | price | HeroPrice | - | Price to display. Can be a string or object with amount, prefix, and suffix. | | sticker | HeroStickerProps | - | Sticker props (color, children, className). Color options: \"black\", \"orange\". | | textSize | \"medium\" \\| \"large\" | \"medium\" | Adjust title and description size. Medium sets display-2 title and 18px text, large uses display-1 title and 20px text. | | title | string | required | Hero title. |"
-  },
-  {
-    "href": "/components/icon",
-    "content": "import sizes from \"@/components/Icon/styles/export/size.js\"; import colors from \"@/components/Icon/styles/export/color.js\"; import base from \"@/styles/export/base.js\"; export const iconCodeExample = (icons) => icons.map(({ name, ...other }) => ); export const getPixelSize = (size) => size ? parseFloat(size) parseInt(base[\"font-size\"]) + \"px\" : \"\"; export const sizesWithoutBreakpoints = Object.keys(sizes).filter( (name) => name.indexOf(\"-\") === -1, ); export const IconVariantPreview = ({ icons, ...other }) => ( ); Icon ODS uses SVG icons, which load from a sprite file. How to add new icons?. Sizes ({ name: size, size: getPixelSize(sizes[size]), sizemd: getPixelSize(sizes[${size}-md]), }))} /> ({ name: \"money-box\", description: size, size: size, }))} /> Colors Colors should be only used to provide feedback, e.g. in form validation and alerts ({ name: \"money-box\", size: \"large\", description: color, color, }))} id=\"preview-colors\" /> Modifiers With Text End Use the .icon--with-text-end modifier when placing an icon before text. This adds appropriate spacing (5px) to the right of the icon. <span>Regular text with icon</span> Sprite path Default path is /sprite.svg. You can define a different path using either the spritePath prop or the SpritePathContext. When both are set, the spritePath prop takes precedence. When your app runs under a subpath (for example /app-context/dashboard), wrap your app with SpritePathProvider and point it to the correct sprite URL. This ensures all nested components (such as Alert) resolve icons correctly. Using spritePath prop Using SpritePathContext All icons You can copy svg by clicking on the icon and paste directly into Figma. Icon contribution - Download your desired icons from the Icon Library. You'll get a PSD and a PNG file for each icon. The PSD either contains: - a vector path, which can be directly exported from Photoshop as SVG - a smart object, which you can open in Illustrator and save it as SVG - if you don't have Photoshop, use Photopea to export the paths to SVG - Rename the icon file to be lowercase and dash delimited. The library does not employ a naming pattern - there are capitals, dashes, underscores spaces..., but we do! Never change the name of the icon to match the context you're using it in. We need to stay in sync with the file names in the library. - Optimize the SVGs. Use a tool like Jake Archibald's SVGOMG and use the precision setting to get the smallest file size possible, while still maintaing proper display of the icon. - Drop the files to src/assets/icons folder. They will be built into build/sprite.svg. - Open a pull request. A reviewer will check if all requirements are met. The icons will be included in the next release. - Use them in your project immediately. You don't need to wait for the next release. When the pull request is closed, you are safe to create your own build with an updated sprite and use it. Why such a complicated process? To make sure we stay in sync with the group icon library, honor a naming pattern and prevent errors. - We need to stay in sync with the brand icon library, as it is our source of truth. We neeed to check if the icon we want add is not already being used. - We need to optimize the icons, so that we can deliver them to the user as fast as possible. The photoshop export is represents the true interpretation of the icon paths. Otimization algorithms can safely remove around 50-80% of the code, just by rounding some numbers, removing unnecesasry attributes and recalculating the shapes. Smaller file size means faster loading time. - We need to review newly added icons to eliminate human errrors API React Props | Name | Type | Default | Description | | ------------ | ----------- | ------------ | ---------------------------------------------------------------------------------------- | | alt | string | - | Accessible label for the icon. | | color | IconColor | - | Icon color. Options: \"info\", \"success\", \"warning\", \"danger\", \"orange\". | | name | string | required** | Icon name. | | size | IconSize | - | Icon size. Options: \"small\", \"medium\", \"large\", \"xlarge\", \"xxlarge\", \"huge\". | | spritePath | string | - | Path to the SVG sprite. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/icon-list",
-    "content": "IconList Unordered list with icons instead of default bullet styles. Great for describing features of a product. Example With tooltip Tooltips in icon lists should be placed on the right. This way they do not overlap other items and improve scannability. API React Props | Name | Type | Default | Description | | ----------- | ---------------- | ------- | -------------------------------------------------------------------------------------------------------- | | items | IconListItem[] | [] | Array of items. Each item has: icon (string), content (ReactNode), tooltip (ReactNode - optional). | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/image",
-    "content": "import handsImage from \"@/assets/images/developers/hands-with-phones.svg\"; Image Embed images using <img /> for general purposes or <picture /> element for different images across breakpoints. Img element Simple picture that fits anywhere. Picture element Different images for different display sizes. Breakpoint order While ODS uses mobile first breakpoints, they MUST be ordered from largest to smallest in this scenario as they are used to render <source /> elements. <source /> elements are evaluated first to last, which means larger rules need to be specified first. > If the source's media condition evaluates to false, the browser skips it and evaluates the next element inside picture > > The Picture element on MDN Retina images The srcset attribute accepts a comma-separated list of image descriptors, allowing us to serve separate files for high DPI screens. SVG Both <img /> and <picture /> support svg as image sources. To ensure proper scaling in Internet Explorer, the referenced svg file MUST have the viewBox attribure specified AND the <img /> element MUST have either (or both) width or height attributes set to a value which matches the desired design. Accessibility The alt attribute should be used to provide a meaningful textual alternative unless the image is purely presentational and would not double a textual description. Check How to write alternative texts to learn more. API React Props | Name | Type | Default | Description | | ----------- | -------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | alt | string | required | Alternative text for the image. | | src | string \\| ImageSrcObject | required | Image source. Can be a string or a responsive object with breakpoint keys (default, xxxl, xxl, xl, lg, md, sm, xs). | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/link",
-    "content": "Link Links are basic navigation elements that provide interactive text-based navigation. They are always underlined and have consistent styling across the application. Standalone links are bold by default, but when used inline with other text, they inherit the font weight from their parent element. Basic Usage <a href=\"/\" className=\"link\"> {\"Standalone link\"} </a> <p> {\"Links in text \"} <a href=\"/\" className=\"\"> {\"inherit font weight\"} </a> </p> <p> {\"Links in text that are \"} <a href=\"/\" className=\"\"> {way too long and need to wrap at the end of the line so it will not break the paragraph of text} </a> </p> Link Class Behavior Default Link styling is automatically applied to all <a> elements except those with specific classes: .btn, .listcontrol, .tab-listtab, .stepbarlink, .osk-breadcrumbslink, .skip-link, .dropdownitem, .carousel-promotionsslide, and elements within .osk-footer, .mm-header or .megamenu-header. To force Link styling on these elements, use the .link class. <div className=\"megamenu-header\"> <a href=\"/\" className=\"\"> {\"Link in megamenu (no styling)\"} </a> <br /> Link with class .link in megamenu </div> Icon Integration With Icons Links can include icons positioned to the left or right of the text. <a href=\"/\"> {\"Back\"} </a> <br /> <a href=\"/\"> {\"Next\"} </a> <br /> <br /> <a href=\"/\"> {\"Back\"} </a> <br /> <a href=\"/\"> {\"Next\"} </a> Modifiers Underline on Hover Only (.underline-hover) For cases like article thumbnails or card headings where you want links to appear without underline by default but show underline on hover. This is useful for maintaining clean visual hierarchy in card layouts while preserving hover feedback. <div> <h3 className=\"bold\"> <a href=\"/\" className=\"underline-hover\"> {\"Article Title Without Underline\"} </a> </h3> <p> {This pattern is commonly used in card components where headings wrap links.} </p> </div> No Accent on Hover (.no-accent) By default, links display an orange accent color on hover. Use the .no-accent modifier to disable the accent color while keeping the underline decoration. This is useful when links are displayed on dark backgrounds where the orange accent color would have insufficient contrast. <div> <a href=\"/\" className=\"link\"> {\"Regular link with orange accent\"} </a> <a href=\"/\" className=\"link no-accent\"> {\"Link without accent color on hover\"} </a> </div> Element Types Render as Button When a Link doesn't navigate but controls the document (e.g., opens a modal), it can be rendered as a button element. Perform click action Use Cases 1. Navigation Links - Primary navigation: Main menu items, breadcrumbs - Secondary navigation: Footer links, sidebar navigation - Inline navigation: Links within content text 2. Action Links - Modal triggers: Opening dialogs, popups, or overlays - Form submissions: Submit buttons styled as links - Toggle actions: Show/hide content, expand/collapse sections 3. External Links - Social media: Links to external platforms - Documentation: Links to help pages, guides - Partner sites: Affiliate or partner website links 4. Download Links - File downloads: PDFs, documents, media files - Software downloads: Applications, tools, utilities 5. Email Links - Contact information: Email addresses with mailto: protocol - Support links: Direct email to support teams 6. Phone Links - Contact numbers: Phone numbers with tel: protocol - Support hotlines: Direct calling to support 7. Back/Forward Navigation - Breadcrumb navigation: Previous page links - Wizard steps: Next/previous step navigation - Pagination: Page navigation controls 8. Contextual Links - Related content: \"See also\" links - Reference links: Citations, sources, footnotes - Cross-references: Links to related sections 9. Call-to-Action Links - Primary CTAs: \"Get Started\", \"Learn More\", \"Sign Up\" - Secondary CTAs: \"Cancel\", \"Back\", \"Skip\" 10. Accessibility Links - Skip links: Jump to main content - Accessibility help: Screen reader support links Accessibility Color Contrast Orange links on white background do not meet Success Criterion 1.4.3: Contrast (Minimum) due to insufficient contrast between white and orange brand colors. Focus States All links have visible focus states with proper contrast and outline styling. Screen Reader Support - Links are properly announced to screen readers - Icon-only links should include descriptive text - External links should indicate they open in new windows Keyboard Navigation - All links are keyboard accessible - Focus order follows logical document flow - Focus indicators are clearly visible API React Props | Name | Type | Default | Description | | ------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------------------------- | | href | string | - | Destination address. | | tag | \"a\" \\| \"button\" | \"a\" | Rendered HTML element. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Link content. | | isUnderline | boolean | false | Whether the link should be underlined. | | isNormal | boolean | false | Whether the link should have normal font weight. | | noAccent | boolean | false | When true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds). |"
-  },
-  {
-    "href": "/components/list",
-    "content": "import Code from \"@/components/Code\"; Lists Vertical scannable group of items, usually labelled with a heading. Example <h2 className=\"bold\">List of items</h2> Laborum laboris amet minim. Quis adipisicing eu consectetur. Et anim sit do nisi. Deserunt id consectetur esse in. Variants Default Laborum laboris amet minim. Quis adipisicing eu consectetur. Et anim sit do nisi. Deserunt id consectetur esse in. Small Laborum laboris amet minim. Quis adipisicing eu consectetur. Et anim sit do nisi. Deserunt id consectetur esse in. Color <h2 className=\"bold\">List of gray items</h2> Laborum laboris amet minim. Quis adipisicing eu consectetur. Et anim sit do nisi. Deserunt id consectetur esse in. Enclosed Enclosed lists are usually placed inside a Card and labelled with a heading element in a separate CardSection. The number of items can be highlighted with a Pill. <h2 className=\"bold\"> {\"List of items \"} 3 </h2> Laborum laboris amet minim. Quis adipisicing eu consectetur. Et anim sit do nisi. Readable widths Use paragraph element <p> to create readable containers for text. Line length and wrapping will not work on lists or their children. <strong>Text only, no paragraph used.</strong> { Laborum laboris amet minim. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perspiciatis iusto quos accusantium placeat optio. Facere harum suscipit provident quia maxime officiis inventore, beatae pariatur architecto quasi quam. Natus, iusto.} <p> <strong>Simple paragraph with default width constrains.</strong> { Laborum laboris amet minim. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perspiciatis iusto quos accusantium placeat optio. Facere harum suscipit provident quia maxime officiis inventore, beatae pariatur architecto quasi quam. Natus, iusto.} </p> <p className=\"text-narrow\"> <strong> {\"Paragraph with \"} .text-narrow {\" class applied.\"} </strong>{\" \"} {Laborum laboris amet minim. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perspiciatis iusto quos accusantium placeat optio. Facere harum suscipit provident quia maxime officiis inventore, beatae pariatur architecto quasi quam. Natus, iusto.} </p> <p className=\"text-fullwidth\"> <strong> {\"Paragraph with \"} .text-fullwidth {\" class applied.\"} </strong>{\" \"} {Laborum laboris amet minim. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perspiciatis iusto quos accusantium placeat optio. Facere harum suscipit provident quia maxime officiis inventore, beatae pariatur architecto quasi quam. Natus, iusto.} </p> Clickable items Clickable items are always used with a chevron to indicate action. Anchor {\"Laborum laboris amet minim.\"} {\"Quis adipisicing eu consectetur.\"} Button 💡 Pro tip: Don't build an expanding list - use an Accordion instead. Laborum laboris amet minim. Quis adipisicing eu consectetur. Advanced clickable items using BlockAction Combining BlockAction with ListItems enables use of layout, descriptions and multiple actions per item. {[1, 2, 3].map((item) => ( <a href=\"#\" className=\"list__control\"> {\"Irure culpa et magna enim sit voluptate in laboris.\"} </a> <p> {Laboris nisi anim et laboris enim dolore non minim in anim ipsum et.} </p> Override ))} Accessibility The ` component currently only renders as unordered list. API React Props | Name | Type | Default | Description | | ------------ | ----------------- | ------- | --------------------------------------------------------------- | | color | \"gray\" | - | Size determines color of list items and color of their borders. | | isEnclosed | boolean | false | Spacious lists have horizontal spacing. | | size | \"small\" | - | Size determines vertical spacing. | | className | string | - | Additional CSS classes. | | children | React.ReactNode` | - | List items. |"
-  },
-  {
-    "href": "/components/loader",
-    "content": "import cx from \"classnames\"; import ToggleButton from \"@/docs/utils/ToggleButton\"; export const messages = [ \"Loading.\", \"Loading..\", \"Loading...\", \"Still loading\", \"Still loading.\", \"Still loading..\", \"Still loading...\", ]; Loader A simple loader that can cycle different loading messages. Loading <hr /> Large loader Inverse colour Can be used on orange background together with skeleton. Loading}> <div className=\"card surface-secondary\"> <div className=\"card__section\"> Loading </div> </div> Button/Loader switch Buttons and Loaders have the same height for smooth transition without page jitter. Loader has no spacing by default. If you are changing button for loader, loader needs the same spacing as button to prevent jittering. export const ToggleLoader = ({ id, size, margin }) => ( <div> {\"Show loader\"} {\"Loader\"} </div> ); Delay When loading takes more than 5 seconds Loader is shown together with Skeleton to inform the user that the section loading is still in progress. Use attribute data-loader-delayed to delay initialization and to remove .hide class which is also used. {\"Načítavam\"} Accessibility No accessibility testing conducted Notes API React Props | Name | Type | Default | Description | | ----------- | ------------------------ | ----------- | ----------------------------------------------- | | colour | \"default\" \\| \"inverse\" | \"default\" | Loader color. | | isDelayed | boolean | false | Whether loader should appear with a delay. | | messages | string[] | - | Messages that the loader will cycle until done. | | size | \"default\" \\| \"large\" | \"default\" | Size variant. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Loader content. | JS module reference Default Config | Property | Type | Default | Description | | --------------- | -------- | ------- | ------------------------------------------------------ | | cycleDuration | number | 4000 | Duration (ms) each message is displayed. | | delay | number | 5000 | Delay (ms) before showing loader if isDelayed is true. | Methods | Method | Description | | ----------------- | --------------------------------------------------------------- | | destroy() | Clears intervals and timeouts, cleaning up the loader instance. | | getInstance(el) | Static method to get the Loader instance from a DOM element. |"
-  },
-  {
-    "href": "/components/mega-menu",
-    "content": "Megamenu A navigation menu component with dropdown functionality and mobile-responsive design. Default Megamenu Note: When you click on any dropdown button in the preview below, the dropdown menu will open, but is positioned incorrectly due to docs limitations. In a real application, the dropdown will be positioned correctly below the button. Custom Title Empty Search State Filled Search State Megamenu for Blog or other similar sites Blog With Custom Title Blog Non-sticky Variant Empty Search State Filled Search State Standalone Usage The Megamenu component is built as a standalone JavaScript bundle that automatically initializes all elements with the data-megamenu attribute. Build Files - CSS: build/lib/megamenu.css - JavaScript: build/lib/megamenu.js Quick Start 1. Build the bundle: 2. Include the files: 3. Font Integration The component includes OrangeSK Neue font integration. Ensure font files are available or update the CSS paths accordingly: 4. Add the markup: 5. Optional external trigger targeting Use these attributes to open a specific mobile panel from outside the menu: Features - Auto-initialization via data-megamenu attribute - Dropdown functionality with smooth transitions - Outside click handling - Mobile responsive design - Full accessibility support - Light/dark theme capabilities - Multiple mobile side panels (main and my-orange) with target-based triggers HTML Structure JavaScript API The bundle exposes a global ODSMegamenu object: Trigger/Panel Attributes | Attribute | Applies To | Description | | ----------------------------- | ----------------------------- | --------------------------------------------------------------- | | data-megamenu | nav.megamenu | Auto-initialized root element. | | data-megamenu-mobile-toggle | button | Marks element as mobile panel trigger. | | data-megamenu-mobile-target | button | Target panel key (main or my-orange). | | data-megamenu-mobile-panel | .megamenumobile | Panel key resolved by trigger target. | | data-megamenu-close-button | close buttons / panel overlay | Closes active mobile panel (optionally scoped with target key). | | data-megamenu-mobile-for | external trigger button | Optional instance name/id for pages with multiple megamenus. | Notable Class Modifiers | Class | Description | | ------------------------------- | ----------------------------------------------------------------------- | | .is-spaced | Adds larger vertical spacing inside dropdown variant containers. | | .megamenunav-link--locale | Locale link behavior variant in mobile locale switch block. | | .megamenunav-link--no-line | Disables underline line state and uses color-only interactive feedback. | | .megamenunav-button--toggle | Toggle button icon-switch behavior (open/close icon swap). | API React Props Both Megamenu and MegamenuBlog accept the same props: | Prop | Type | Default | Description | | -------------- | --------- | ----------- | -------------------------------------------------------------------- | | className | string | undefined | Additional class names on root <nav>. | | title | string | \"Človek\" | Brand title used in logo text (Blog) and home-link accessible label. | | isSticky | boolean | true | Adds/removes is-sticky class on root <nav>. | | searchEmpty | boolean | false | Renders empty-state search suggestions block. | | searchFilled | boolean | false | Renders sample filled search result block. | React Examples JS module reference Default Config | Property | Type | Default | Description | | ----------------- | --------- | --------------- | -------------------------------------- | | dataToggle | string | \"data-toggle\" | Attribute name for toggle elements. | | activeClass | string | \"is-active\" | CSS class for active state. | | removeOnDestroy | boolean | false | Whether to remove elements on destroy. | Methods | Method | Description | | ----------------- | ---------------------------------------------------------------- | | destroy() | Removes all event listeners and cleans up the megamenu instance. | | getInstance(el) | Static method to get the Megamenu instance from a DOM element. |"
-  },
-  {
-    "href": "/components/mega-menu/test",
-    "content": ""
-  },
-  {
-    "href": "/components/modal",
-    "content": "Modal Additional layer floating above the main content which temporarily interrupts current task. Requires user interaction before they can proceed. Sizes Adjust spacing and maximum width. Each size comes with a default title size, which can be customized when required. Small Default Large Custom title Customize the title and other content inside header. Custom footer Customize the footer. Should be primary used for specific action button cases. Product modal Use the product header to display product information with an optional image, similar to the Card component's product header. When using the product modal, the default modalbody's spacing can be disabled using modalbody--no-spacing modifier class. Instead of the default modal body spacing, each section inside the body has its own spacing, based on the content type. Use appropriate class for each section based on content: - Subtitle section: modalproduct-body-subtitle-section - List section: modalproduct-body-list-section - Accordion section: modalproduct-body-accordion-section For each title in the section, use the modalproduct-body-section-title class as it adds the correct spacing. Full height on XS On XS screens (mobile devices), the modal will take the full height of the viewport to maintain a consistent height when the modal contains a flow or multiple steps. Sticky footer Sticky footers do not stick in IE, as it does not support position: sticky. Colorful body A modal can contain multiple body containers to divide it's content into multiple colorful sections. Colorful body provides vertical spacing needed to visually divide each section. Color is added using background color utilities. Make sure to pick an accessible color combination. Use spacing utilities to remove top/bottom padding when the first/last body element is using default color (white). Accessibility - Modals should only be opened by activating a button element. - Opening a modal sets focus on element with data-a11y-modal-initial-focus attribute (modal title by default). When not present, focus is set on first focusable element, usually the close button. - An open modal traps focus. It must always contain a close button. - Pressing ESC or clicking the overlay closes the modal. - Closing a modal sets focus back on the activating button element. React Usage In React, use the isActive prop to control the modal's visibility. When isActive is provided, the modal enters \"controlled mode\" where React manages its state and event handlers work correctly. Key points: - isActive prop enables React controlled mode - modal won't be moved to #root-modals - onHide callback is triggered when user closes via close button (×), overlay click, or ESC key API React Props | Prop | Type | Default | Description | | ---------------------- | --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | id | string | - | Required. HTML id attribute | | title | string | - | Main title text | | size | \"small\" \\| \"large\" | - | Modal dialog size (default is medium) | | isActive | boolean | - | Controls if modal is opened/closed. Enables React controlled mode - modal stays in DOM, not moved | | onHide | () => void | - | Callback fired when modal is closed (ESC, overlay, close button). Works in both controlled/uncontrolled | | fullHeight | boolean | - | Full height on XS viewport | | hasStickyFooter | boolean | - | Make footer sticky when content overflows | | actions | React.ReactNode[] | - | Action buttons in footer | | renderHeader | (id: string) => React.ReactNode | - | Custom header renderer | | renderBody | () => React.ReactNode | - | Custom body renderer | | renderFooter | () => React.ReactNode | - | Custom footer renderer | | renderTitle | (id: string) => React.ReactNode | - | Custom title renderer | | disableHeaderSpacing | boolean | - | Remove header padding | | disableFooterSpacing | boolean | - | Remove footer padding | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Modal body content | JS module reference All elements with data-a11y-dialog are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------------- | --------- | ---------------- | -------------------------------------------------------------------------------- | | classModalIsOpen | string | \"is-active\" | Class applied to modal when open | | classModalIsOpenBody | string | \"has-modal\" | Class applied to body when modal is open | | root | string | \"#root\" | Root page content selector to hide when modal is open | | modalsRoot | string | \"#root-modals\" | Container where modals are moved | | disablePortal | boolean | false | Disable moving modal to #root-modals (used internally for React controlled mode) | Modal Methods | Method | Type | Description | | --------- | ------ | -------------------------------------------- | | show | func | Show/open the modal | | hide | func | Hide/close the modal | | destroy | func | Destroy the instance - removes all listeners |"
-  },
-  {
-    "href": "/components/pagination",
-    "content": "Pagination export const getItems = (count = 10, current = Math.ceil(count / 2)) => [ ...Array(count) .fill(\"\") .map((, i) => i + 1), ].map((n) => ({ label: ${n}, ariaLabel: Strana ${n}, href: /?page=${n}, ...(current === n ? { isActive: true } : {}), })); export const label = \"Výber stránok\"; Pagination is used to separate long lists or pages into more readable chunks and reduce server load by rendering a limited amount of items. The maximum of visible items is 5. Separators Separators are used when there is more than 5 items and the active page is not near the first or last item. Compact Compact pagination is used in confined spaces, such as cards. First and last elements are replaced with an icon and separators are removed. API React Props | Name | Type | Default | Description | | ----------- | ----------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | isCompact | boolean | false | Collapsed version. | | items | PaginationItemProps[] | required** | All pagination items - buttons & numbers. Each item has: href (string), label (string), isActive (boolean), ariaLabel (string). | | label | string | - | Accessibility label for the pagination nav element. | | className | string | - | Additional CSS class name. |"
-  },
-  {
-    "href": "/components/pictogram",
-    "content": "import sizes from \"@/components/Icon/styles/export/size.js\"; import base from \"@/styles/export/base.js\"; export const getPixelSize = (size) => size ? parseFloat(size) parseInt(base[\"font-size\"]) + \"px\" : \"\"; export const sizesWithoutBreakpoints = Object.keys(sizes).filter( (name) => name.indexOf(\"-\") === -1, ); Pictogram Pictograms are larger, more detailed graphics used to represent concepts, services, or products. Unlike icons, pictograms automatically adapt to light and dark themes. Theme-aware Display Pictograms automatically switch between light and dark versions based on the current theme using CSS class directives (.is-dark / .is-light). The sprite should contain both versions: - Light version: Use the exact name (e.g., pictogram-skylink) - Dark version: Add --dark suffix (e.g., pictogram-skylink--dark) Sizes Pictograms use the same sizing system as icons. ({ name: size, size: getPixelSize(sizes[size]), sizemd: getPixelSize(sizes[${size}-md]), }))} /> Sprite Path Default path is /sprite.svg. You can define a different path using either the spritePath prop or the SpritePathContext. When both are set, the spritePath prop takes precedence. When your app runs under a subpath (for example /app-context/dashboard), wrap your app with SpritePathProvider and point it to the correct sprite URL. path from spritePath prop path from context API React Props | Name | Type | Default | Description | | ------------ | ---------- | ------------ | --------------------------------------------------------------------------------------------- | | alt | string | - | Accessible label for the pictogram. | | name | string | required** | Pictogram name. | | size | IconSize | - | Pictogram size. Options: \"small\", \"medium\", \"large\", \"xlarge\", \"xxlarge\", \"huge\". | | spritePath | string | - | Path to the SVG sprite. | | className | string | - | Additional CSS classes. | Adding New Pictograms When adding pictograms, ensure you include both theme versions: 1. Create the light version with your pictogram name (e.g., pictogram-name) 2. Create the dark version with the --dark suffix (e.g., pictogram-name--dark) 3. Add both files to src/assets/icons folder 4. They will be built into the sprite automatically The Pictogram component will automatically select the appropriate version based on the current theme. All pictograms You can copy svg by clicking on the pictogram and paste directly into Figma."
-  },
-  {
-    "href": "/components/pill",
-    "content": "Pill Put numbers or icons in it. Pills are perfect for displaying counts, badges, status indicators, or small labels. Pills work across different background colors without being hierarchical - choose the right color based on contrast needs. 1 Colors The Pill component supports 8 surface-based color variants that work across different backgrounds: - surface-contrast (default): High contrast surface color - - surface-secondary: Secondary surface color - adapts to theme - surface-tertiary: Tertiary surface color - adapts to theme - surface-subtle: Subtle surface color - minimal contrast - surface-moderate: Moderate surface color - medium contrast - surface-accent: Accent surface color - brand emphasis - transparent: Transparent background with theme-aware text and border - works on any background {\"Default\"} {\"Primary\"} {\"Secondary\"} {\"Tertiary\"} {\"Subtle\"} {\"Moderate\"} {\"Accent\"} {\"Transparent\"} Transparent The transparent variant provides a subtle semi-transparent background that adapts to the surrounding content. <span className=\"h3 mb-none\">2</span> Sizes The Pill component supports predefined sizes through the size prop. You can choose from small, medium, large, xlarge, xxlarge, and huge. S M{\" \"} L XL{\" \"} XXL{\" \"} Typography-based sizing When no size prop is provided, pill size is determined by font size inherited from ancestor elements. <h1 className=\"bold\"> This many: 1 </h1> <h2 className=\"bold\"> {\"I have more: \"} 2 </h2> <p> 3 </p> <p> {\"Max 3 digits please. \"} 123 </p> Icons in Pills Pills can contain icons as well as text or numbers. This is useful for status indicators, categories, or interactive elements. {\" \"} {\" \"} {\" \"} Matching size with external icons While pill size can now be controlled with the size prop, when placing pills next to external icons, icons have fixed sizes, and icon images usually contain a bit of whitespace around the paths themselves. This makes it nearly impossible to match icon and pill sizes perfectly, especially when the icon path has an oval shape. In case there is no way to alter the design, you might want to reuse icon sizing classes on the pill. Note that due to whitespace in the icon, the sizes will never match perfectly. Some icons work better than others. Icons with circular shape don't work well, as the size difference becomes more apparent. 1{\" \"} <br /> <br /> 2 API React Props | Name | Type | Default | Description | | ----------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Pill content. | | color | PillColor | - | Pill color. Options: \"surface-primary\", \"surface-secondary\", \"surface-tertiary\", \"surface-subtle\", \"surface-moderate\", \"surface-contrast\", \"surface-accent\", \"fill-moderate\", \"fill-disabled\", \"transparent\". | | size | \"small\" \\| \"medium\" \\| \"large\" \\| \"xlarge\" \\| \"xxlarge\" | - | Pill size. |"
-  },
-  {
-    "href": "/components/progress",
-    "content": "Progress Horizontal indicator of a task progress or scalar value. Label and value Authors are required to provide a clear, explanatory Label and textual Value to ensure all users can access the displayed information. Variants {[\"orange\", \"green\", \"red\", \"blue\", \"yellow\"].map((color) => { const randomWidth = Math.round(Math.random() 10000) / 10000; return ( ); })} Complex description of Progress bar <p className=\"text-nowrap mb-none\"> <span className=\"text-wrap\">Label with icon and tooltip</span> &nbsp; Tooltip should always be next to label, so we use combination of .text-nowrap and .text-wrap classes. </p> <p className=\"reset-font-weight mb-none\">breaks to left</p> } color=\"red\" width={0.4} value={ <> <p className=\"mb-small\"> <span className=\"reset-font-weight\">Avaible:</span> 4 <span className=\"reset-font-weight\"> / 8 GB</span> </p> <p className=\"mb-none\"> <span className=\"reset-font-weight\"> Yes we need to use another bar element in label, so icon and text stays on same line. Also this text in </span>{\" \"} paragraph{\" \"} <span className=\"reset-font-weight\"> {\" \"} so it has set max-width. If you have label with longer text, you should also use paragraph in there. And one last last think - yes we need to have that many bars in label, so the text doesnt break to newline without icon. </span> </p> </> } /> Accessibility Progress component can be used with role=\"progressbar\" when it's needed to \"indicate that the user's request has been received and the application is making progress toward completing the requested action.\" role=\"progressbar\". It's not recommended to use role=\"meter\" when the component should represent a scalar value as it's screenreader support is poor. Since label and textual value are required when using this component, all relevant infomation is provided in an understandable way, not relying on visual representation only. Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. API React Props | Name | Type | Default | Description | | ----------- | ---------------------------------------------------- | ------------ | ----------------------------------------------------------------- | | color | \"orange\" \\| \"green\" \\| \"yellow\" \\| \"red\" \\| \"blue\" | \"orange\" | Color of the indicator. | | label | React.ReactNode | required | Provides clear instruction on what the horizontal bar represents. | | value | React.ReactNode | required** | Textual representation of the indicator. | | width | number | - | Width of the progress indicator where 0 = empty, 1 = full. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/promo-banner",
-    "content": "PromoBanner Promotional banner component designed to highlight special offers, services, or call-to-action messages with optional images and customizable styling. The component provides a flexible container that can display content alongside optional images in a responsive grid layout. Example <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť?} <span className=\"text-accent ml-small\">{\"Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} With Image PromoBanner supports background images to create more visually engaging promotional content. <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť? Prima Voľba} <span className=\"text-accent ml-small\">{\" Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} Image aligned to bottom <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Image aligned to top <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item top padding on mobile Use flushTopSmDown when you need to remove only top padding of the content item on mobile (sm and smaller). <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item bottom padding on mobile Use flushBottomSmDown when image is visually above the text on mobile and you want to remove the extra spacing under text. <p className=\"mb-none\">Microsoft Copilot</p> <h2 className=\"h1 mb-medium\">{Zjednodušte si prácu s AI asistentom}</h2> <p className=\"mb-none\"> {Ukážka použitia pre prípady, keď je na mobile obrázok navrchu a pod textom nechcete voľný priestor.} </p> Image with bleeding effect The bleedImage prop allows the image to extend beyond the container boundaries to the right edge of the viewport, creating a more dramatic visual effect. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Reverse Variant The reverse variant changes the order of content and image, placing the image on the left side and content on the right side. This creates visual interest and can be used to break up monotonous layouts. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Reverse Layout Example}</h2> <p className=\"mb-large\"> {The reverse variant places the image on the left and content on the right, creating a different visual flow that can help break up page layouts.} </p> {\"Learn More\"} Vertical Variant The vertical variant stacks the content and image vertically instead of horizontally. In this layout, both content and image span the full width (12 columns) and are arranged one above the other. <h2 className=\"h1 mb-medium\">{Vertical Layout Example}</h2> <p className=\"mb-large\"> {The vertical variant is perfect for narrow spaces or when you want a full-width content experience with stacked layout.} </p> {\"Learn More\"} Vertical with Full Width Image The imageFullWidth prop can be used with the vertical variant to make the image span the complete width of its container, creating a more immersive visual experience. <h2 className=\"h1 mb-medium\">{Full Width Image Example}</h2> <p className=\"mb-large\"> {When imageFullWidth is enabled, the image takes up the complete width of its container, creating a bold visual impact in the vertical layout.} </p> {\"Discover More\"} Usage PromoBanner is ideal for: - Highlighting special offers or promotions - Call-to-action sections on landing pages - Product or service announcements - Cross-selling and upselling opportunities - Feature announcements and product launches The component combines visual appeal with clear messaging to drive user engagement and conversions. Content Structure The PromoBanner component uses a children-based API, giving you complete control over the content structure. You can include any combination of: - Headings (h1, h2, h3, etc.) - Paragraphs - Buttons - Custom HTML elements - Other components Layout - Without image: Content spans 7/12 columns on desktop - With image: Content spans 6/12 columns, image spans 6/12 columns - With bleeding image: Image extends beyond the 6/12 column grid to the right edge of the viewport, while content remains in its 6/12 column space. The image appears after the content in the visual order. - Reverse variant: Image spans 6/12 columns on the left, content spans 6/12 columns on the right. The image appears before the content in both DOM order and visual order. - Vertical variant: Both content and image span full width (12/12 columns) and are stacked vertically - With imageFullWidth: When enabled, the image takes up the complete width of its container, particularly useful in vertical layouts for maximum visual impact - Mobile: Both content and image span full width (12/12 columns). Bleeding effect is disabled on small screens for better mobile experience. Image Alignment Use the alignImage prop to control vertical alignment of the image within its container: - \"bottom\": Aligns the image to the bottom of its container - \"top\": Aligns the image to the top of its container Bleeding Effect The bleedImage prop creates a dramatic visual effect by extending the image beyond the normal container boundaries. When enabled: - The image extends to the right edge of the viewport - The image is automatically positioned after the content (using CSS order: 2) - On mobile devices (small screens), the bleeding effect is disabled and normal layout is restored - The content maintains its standard grid positioning while the image breaks out of the grid - Note: The bleeding effect only works with the default horizontal layout, not with the reverse variant Full Width Image The imageFullWidth prop makes the image span the complete width of its container, creating a bold visual impact. This feature: - Applies the fullwidth class to the image component - Is particularly effective when used with the vertical variant - Ensures the image takes up the maximum available space within its grid column - Works well for hero-style images that need to make a strong visual statement API Reference Props | Prop | Type | Default | Description | | ------------------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------- | | children | React.ReactNode | - | Content to display in the banner | | image | string | - | URL of the background image to display | | alignImage | \"bottom\" \\| \"top\" | - | Aligns the image to the bottom or top of its container | | flushTopSmDown | boolean | false | Removes top padding from promo item on sm and smaller breakpoints | | flushBottomSmDown | boolean | false | Removes bottom padding from promo item on sm and smaller breakpoints | | bleedImage | boolean | false | Extends the image beyond container to viewport edge | | imageFullWidth | boolean | false | Makes the image span the complete width of its container | | colorScheme | \"light\" \\| \"dark\" | - | Color scheme for the banner | | variant | \"vertical\" \\| \"reverse\" | - | Sets the layout variant. Vertical stacks content and image, reverse places image on the left | | className | string | - | Additional CSS classes |"
-  },
-  {
-    "href": "/components/promotion-card",
-    "content": "import phones from \"../../../assets/images/developers/phones.png\"; export const getItems = (count = 10, current = Math.ceil(count / 2)) => [ ...Array(count) .fill(\"\") .map((_, i) => i + 1), ].map((n) => ({ label: ${n}, ariaLabel: Strana ${n}, href: /?page=${n}, ...(current === n ? { isActive: true } : {}), })); export const label = \"Výber stránok\"; export const DefaultPromotionsCard = ({ isDark }) => ( <h2 className=\"bold\">Online ochrana pre váš digitálny svet</h2> <p className=\"mb-none\"> Orange je tu, aby ste mohli používať internet bezpečne a bez obáv. </p> Zistiť viac ); Promotion card Karta, ktorá propaguje produkt alebo službu. Komponent Promotion card je adaptáciou Card komponentu. Príklady Základný Viacero kariet Použitie Grid Šírka karty na väčších obrazovkách je obmedzená gridom. Pozri príklad kódu nižšie: <p className=\"mb-small\"> <b>Nové</b> </p> <p className=\"mb-small\"> <b>Staršie</b> </p> API React Props | Name | Type | Default | Description | | ----------- | ----------------- | ---------------------- | ------------------------------------------- | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Card content. | | color | CardColor | \"background-primary\" | Card color (inherited from Card component). |"
-  },
-  {
-    "href": "/components/section",
-    "content": "import cx from \"classnames\"; import ToggleButton from \"@/docs/utils/ToggleButton\"; Section Section is an element that helps to separate page segments with consistent spacing. The content is automatically wrapped in a Container component for consistent layout and spacing. Structure Section automatically wraps its content in a Container component, which provides consistent layout constraints and spacing. This ensures that content is properly contained and aligned within the section. <div style={{ border: \"1px dashed #ccc\", padding: \"10px\" }}> {\"This content is wrapped in a Container component\"} </div> Colors HTML Tags Section can render as different HTML elements using the tag prop. This is useful for semantic HTML structure. Spacing variants and rules Default Small A small section has smaller spacing on its top side. Extra small This section has 10 px spacings from both top and bottom. Rules First section appearing in a group of sections is always default. Following sections of the same color are small. Following sections of a different color are always default. Background-primary, background-secondary, background-contrast, background-accent, background-accent1-blog, and background-accent2-blog sections have these rules applied automatically without specifying the section's size. Breaking the rules Spacing rules can be broken using section--default and section--small classNames. Spacing problems and solutions 1. Last element Problem: If there is just one element at the end of the section and this element has its own bottom spacing defined, these spaces would add up and we would lose spacing consistency. <p> {Et irure sit ut deserunt irure quis enim amet mollit. Adipisicing ullamco adipisicing.} </p> Button Solution: 1. remove last element spacing <p> {Et irure sit ut deserunt irure quis enim amet mollit. Adipisicing ullamco adipisicing.} </p> {\"Button\"} 2. Stacking elements Problem: There are multiple elements in row at the end of a section and they define their own bottom spacing (p in this case, uses default medium margin), because they need to stack on smaller devices. The space of the section and elements would add up and we would lose spacing consistency. export const cols1 = [5, 2, 3, 4].map( (count) => Lorem ipsum dolor sit amet, consectetur adipiscing elit. ${count}, ); {cols1.map((content, index, arr) => ( <p>{content}</p> ))} Solution: Use Grid row gap {cols1.map((content, index, arr) => ( <p>{content}</p> ))} 3. Dynamic visibility of a last element Problem If there is a possibility of last element of a section (<button> in this case) to disappear, spacing of elements above this element would collide with a section spacing and we would lose spacing consistency. export const cols2 = [1, 2, 3, 4, 5, 6, 7, 8].map( (count) => Lorem ipsum dolor sit amet, consectetur adipiscing elit. ${count}, ); {cols2.map((content, index, arr) => ( <p>{content}</p> ))} {\"Show more\"} Solution: 1. Use Grid row gap 2. Add additional spacing between grid and button and remove this spacing after showing hidden element Example: {cols2.map((content, index, arr) => ( = arr.length / 2, })} > <p>{content}</p> ))} <span>Show more</span> API React Props | Name | Type | Default | Description | | -------------------- | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | color | SectionColor | - | Background color of section. Options: \"background-secondary\", \"background-contrast\", \"background-accent\", \"background-accent1-blog\", \"background-accent2-blog\", \"background-none\", \"surface-subtle\". | | spacing | \"default\" \\| \"small\" \\| \"xsmall\" | - | Spacing between sections. If two sections with different color meet use default (larger) spacing, if two section have same color use small spacing on second one. Use xsmall for specific cases e.g. as part of Megamenu. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Section content. | | containerClassName | string | - | Additional classes passed to the container. |"
-  },
-  {
-    "href": "/components/skeleton",
-    "content": "Skeleton Basic loading indicator used as placeholder of the loaded component Usage Feel free to adjust the size of the skeleton with Grid component. <h2 className=\"bold\"> </h2> To simulate the structure of the component being loaded, mix up some skeletons {[1, 2, 3].map((item) => ( {[1, 2, 3, 4, 5, 6, 7].map((item) => ( ))} ))} Accessibility You should announce the loading state using aria-busy in the appropriate live region API React Props | Name | Type | Default | Description | | ----------- | -------- | ------- | ------------------------------------------------ | | className | string | - | Additional CSS classes for styling the skeleton. |"
-  },
-  {
-    "href": "/components/social-button",
-    "content": "Social Button Simple button component for social media actions. Supports both button and anchor elements with brand-specific hover colors. Default (Button) As Link Accessibility - Buttons are keyboard accessible (Enter/Space to activate) - Anchors can be used for navigation with proper href attribute - Use title or aria-label for additional context if needed API React Props | Prop | Type | Default | Description | | ----------- | ------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | | name | SocialName | Required | Social media platform: x, facebook-2, linkedin, instagram-2, pinterest, snapchat, tiktok, whatsapp, youtube, email | | href | string | - | When provided, renders as an anchor element instead of button | | className | string | - | Additional CSS classes |"
-  },
-  {
-    "href": "/components/stepbar",
-    "content": "Stepbar Stepped navigation for multi step processes. Step links Previous step links must point to a related part of the stepped process, ideally the first interactive element. <input type=\"text\" id=\"form-element\" placeholder=\"stepped form input\" /> Responsive behaviour On small viewports, steps are displayed as rectangles without titles. As the width of screen increases, the title of the active element is shown, and arrows are added. Finnaly titles of non-active steps can be shown using the responsive --wide-[md/lg/xl] modifier. - xs: item titles are hidden, only numbers are visible. - sm: current item title is visible - md and larger: optionally show all step titles API React Props | Name | Type | Default | Description | | ---------------- | ---------------------- | ------------ | -------------------------------------------------------------------------------------------------- | | label | string | \"krok\" | Aria label of nav element. | | showTitlesFrom | \"md\" \\| \"lg\" \\| \"xl\" | - | Titles of non-current steps are visible from this breakpoint. | | steps | StepbarStep[] | required | Array of step objects. Each step has: href (string), isCurrent (boolean), title (ReactNode). | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/sticker",
-    "content": "Sticker Some content inside Variants Colors Default sticker Black sticker Orange sticker Sizes Default sticker Small sticker Accessibility Make sure the information in the sticker is presented in logical order with other conent (e.g. if it shows price, make sure it's before the buy button). API React Props | Name | Type | Default | Description | | ----------- | --------------------- | ------- | ----------------------- | | color | \"black\" \\| \"orange\" | - | Sticker color. | | size | \"small\" | - | Sticker size. | | children | React.ReactNode | - | Sticker content. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/table",
-    "content": "export const defaultProps = { headers, rows, }; Table Random data</h2>} /> With footer Random data and footer</h3>} {...defaultProps} footers={footer} /> Striped Random data with striped rows</h3>} isStriped /> Shrink / fill cells Shrink cells to their minimum width</h3>} /> Fill cells to take maximum avialble space</h3> } /> Scrollable Scrollable tables can get wider than their container and scroll horizontally. How to enable horizontal scrolling: - Wrap the table in a <div class=\"table-scrollable\" role=\"group\" />. This enables the scrolling itself. - Put data-table attribute on the <table /> element. This initializes Table.static.js. It observes the table width and makes the wrapping div focusable, when the table width exceeds the wrapping div width and becomes horizontally scrollable. This enables keyboard navigation support. - Add a table caption and reference it as label from the wrapping div by adding aria-labelledby=\"caption-id\". This enables screenreader support. Scrollable on all viewports</h3>} isScrollable /> Sortable Sortable tables only provide necessary (accessible) markup and styles. The sorting functionality itself and changing appropriate attributes and text labels must be managed by application authors. The following example shows three example states of sorting by date. Random unsorted data</h3>} headers={unsortedHeaders} rows={sortableRows} /> Random sorted data (ascending by Date)</h3>} headers={ascendingHeaders} rows={ascendingRowsByDate} /> Random sorted data (descending by Date)</h3>} headers={descendingHeaders} rows={descendingRowsByDate} /> Expandable rows Expandable rows functionality is automatically initialised, on tables with data-table attribute for button elements with data-subrow-toggle attribute present. Clicking a button expands all rows referenced in aria-controls and switches it's aria-expanded attribute. Random data</h3>} headers={headers} rows={expandableTableRows} /> Responsive tables Built-in responsive card layout Use the isResponsive prop to enable a responsive card layout below the md breakpoint (768px). This transforms the table into a more accessible card-based layout for mobile devices. Responsive table - resize to see card layout</h3> } /> The isResponsive prop automatically: - Applies data-table=\"responsive\" attribute to maintain accessibility - Transforms table into card layout on mobile devices - Preserves all table semantics with proper ARIA roles - Shows column labels for each data cell in mobile view Custom responsive tables When building custom responsive tables that change CSS display properties, apply data-table=\"responsive\" attribute to the <table /> element. Table.static.js takes over and sets appropriate role attributes. This is necessary because browsers tend to destroy semantics on tables that have their CSS display properties altered. - table gets role=\"table\" - thead, tbody and tfoot gets role=\"rowgroup\" - tr gets role=\"row\" - td gets role=\"cell\" - th gets role=\"columnheader\" - th[scope=row] gets role=\"rowheader\" API React Props | Name | Type | Default | Description | | ------------------------ | ------------------------ | ------------ | -------------------------------------------------------------------------------------------------------------------------- | | caption | React.ReactNode | - | Caption helps users with screen readers to find a table and understand what it's about and decide if they want to read it. | | expandableRowsCaptions | ExpandableRowsCaptions | - | Captions for expandable rows accessibility. | | footers | TableRow[] | - | Foot element for table. | | headers | TableHeader[] | required | Labels for headers in the table. Value of the key in headers match with the key name in rows. | | isCompact | boolean | false | Compact table only takes space needed to display its content. | | isResponsive | boolean | false | Enable responsive card layout below md breakpoint for better accessibility. | | isScrollable | boolean | false | If table has horizontal scrollbar. | | isStriped | boolean | false | Different colors for even and odd rows. | | rows | TableRow[] | required | Rows to print out in the table. | | className | string | - | Additional CSS classes. | JS module reference Default Config | Property | Type | Default | Description | | ----------------------------- | -------- | ------------------------------- | ---------------------------------------------------- | | expandButtonSelector | string | \"[data-subrow-toggle]\" | Selector for expand/collapse buttons. | | scrollableContainerSelector | string | \".table-scrollable\" | Selector for scrollable container. | | responsiveTableSelector | string | \"[data-table=\\\"responsive\\\"]\" | Selector for responsive tables that need ARIA roles. | Methods | Method | Description | | ----------------- | ----------------------------------------------------------- | | destroy() | Removes event listeners and cleans up the table instance. | | update() | Re-initializes the table with current configuration. | | getInstance(el) | Static method to get the Table instance from a DOM element. |"
-  },
-  {
-    "href": "/components/tabs",
-    "content": "import React from \"react\"; Tabs Navigate sections of content in a tabbed interface. ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Tabs - links Tabs can be also use as group of links. {[1, 2, 3, 4].map((item) => ( ))} Light tabs ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Full width container ... ... ... ... ... ... ... ... </> } > {[\"standard\", \"light\"].map((tab) => ( {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} ))} Equal width tabs ... ... ... ... ... ... ... ... </> } > {[\"standard\", \"light\"].map((tab) => ( {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} ))} Custom tab content Only use inline elements as children of the tab titles. The tabs are <button> elements which do not allow using block elements inside themselves. <span className=\"h3 mb-xsmall\">Large tab 1</span> description </React.Fragment> } > <p>{loremIpsum({ count: 5 })}</p> <span className=\"h3 mb-xsmall\">Large tab 2</span> description </React.Fragment> } > <p>{loremIpsum({ count: 5 })}</p> Accessibility Tabs are implemented according to WAI-ARIA authoring practices - Example 2 Tabs with manual activation Notes: - Optional keyboard interaction (Home, End, Shift + 10, Delete) is not implemented. - Tabpanel elements lack aria-labelledby attributes due to a bug in VoiceOver, which reads the label instead of the content of the tabpanel. API React Props | Name | Type | Default | Description | | ------------------ | ------------------------------------- | ------------ | -------------------------------------------------------- | | activeTabIndex | number | 0 | Active Tab index. | | classesTabNav | string | - | Additional classes for tabs header. | | hasEqualTabWidth | boolean | false | All tabs have equal width inside a full-width container. | | isFullWidth | boolean | false | Full-width container. | | isLink | boolean | false | Tabs behave as links rather than tabs. | | variant | \"standard\" \\| \"light\" | \"standard\" | Visual variant of the tabs. | | children | React.ReactElement[] | required | Tab panels as children. | JS module reference Default Config | Property | Type | Default | Description | | ------------- | -------- | ---------------- | --------------------- | | tabSelector | string | '[role=\"tab\"]' | Tab element selector. | Methods | Method | Description | | ----------------------- | ---------------------------------------------------------- | | destroy() | Removes event listeners and cleans up the tabs instance. | | update() | Re-initializes the tabs with current configuration. | | activateNthTab(index) | Activates the tab at the specified index. | | getInstance(el) | Static method to get the Tabs instance from a DOM element. |"
-  },
-  {
-    "href": "/components/tag",
-    "content": "Tag Tags are small, compact components used to categorize, label, or filter content. They help users quickly identify and organize information. Basic Usage Default Tag Colors Tags support various color variants to convey different meanings or match your design system. <ul className=\"list-unstyled\"> <li> default </li> <li> {\"orange\"} </li> <li> {\"black\"} </li> <li> {\"yellow\"} </li> <li> {\"green\"} </li> <li> {\"blue\"} </li> <li> {\"success\"} </li> <li> {\"danger\"} </li> <li> {\"info\"} </li> <li> {\"warning\"} </li> </ul> Transparent color variant The transparent variant is a standalone color variant and cannot be applied to other color variants. This means not all colored Tags can be made transparent. <ul className=\"list-unstyled\"> <li> {\"transparent\"} </li> </ul> Sizes Tags come in different sizes to fit various use cases. <ul className=\"list-unstyled\"> <li> {\"Small Tag\"} </li> <li> Default Tag </li> <li> {\"Large Tag\"} </li> </ul> Interactive Tags Tags can be interactive in different ways: as clickable buttons or as navigational links. Clickable Tags Link Tags Tags can function as links by providing an href prop, rendering as anchor elements for navigation. Link to Button Component {\"External Link\"} {\"Large Link Tag\"} Transparent Interactive Tags Examples with transparent color variant for both clickable and link functionality: Tags with Action Buttons Tags can include action buttons (like close/remove buttons) for more complex interactions. }> {\"Label with Action\"} }> {\"Label with Action\"} }> {\"Label with Action\"} Accessibility - Tags should have clear, descriptive text that conveys their purpose - Interactive tags (both clickable and link tags) must be keyboard accessible and provide appropriate focus states - When using color to convey meaning, ensure sufficient color contrast ratios - Action buttons within tags should have appropriate aria-labels for screen readers - Disabled tags should be properly indicated to assistive technologies - Link tags should have descriptive text or additional context for screen readers when the link purpose isn't clear from the text alone - External links should indicate they open in a new window/tab when applicable API React Props | Name | Type | Default | Description | | -------------- | ------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | color | TagColor | - | Tag color. Options: \"black\", \"orange\", \"yellow\", \"green\", \"blue\", \"success\", \"info\", \"warning\", \"danger\", \"transparent\". | | size | \"small\" \\| \"large\" | - | Tag size. | | isDisabled | boolean | false | Whether the tag is disabled. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Tag content. | | actionButton | React.ReactElement | - | Action button (close/remove button) within the tag. | | onClick | React.MouseEventHandler | - | Click handler (makes tag render as button). | | href | string | - | URL (makes tag render as link). |"
-  },
-  {
-    "href": "/components/testimonial",
-    "content": "Testimonial Wraps text in quotation marks to display customer testimonials, quotes, or highlighted text content. Example {Esse velit magna mollit ex duis esse cupidatat eu qui anim minim in. Deserunt minim ut laboris nulla. Adipisicing do incididunt laboris commodo tempor cillum consequat qui occaecat.} Colors Orange {\"I'm orange testimonial text that stands out from the default styling.\"} HTML Element In some cases, when you have multiple children elements, you can use a div instead of a p tag as the wrapper element. <p> {Esse velit magna mollit ex duis esse cupidatat eu qui anim minim in. Deserunt minim ut laboris nulla. Adipisicing do incididunt laboris commodo tempor cillum consequat qui occaecat.} </p> <p className=\"align-right\">Albert Einstein (probably)</p> Usage Testimonials are ideal for: - Customer testimonials and reviews - Highlighting important quotes or statements - Drawing attention to key messages - Adding social proof to your content Make sure the testimonial content is meaningful and adds value to the user experience. API React Props | Name | Type | Default | Description | | ----------- | ----------------------- | ----------- | ------------------------------- | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Testimonial content. | | color | \"default\" \\| \"orange\" | \"default\" | Testimonial color. | | isDiv | boolean | false | Render as div instead of p tag. |"
-  },
-  {
-    "href": "/components/tile",
-    "content": "Tile Tile fills container and allows us to set background image, icon or to align children. Used mostly in Carousel or Grid components. Basic Usage <h3 className=\"h5 bold\">Basic Tile</h3> <p>This is a basic tile with content.</p> With Block Actions Tiles work well with Block Actions to create clickable card-like interfaces. Use the hasBorderOnHover prop to add a border to the tile on hover. {[\"device-tablet\", \"device-tv\", \"device-smart-phone\", \"device-tablet\"].map( (icon, index) => ( {\"Paušály\"} ), )} Vertical Alignment Tiles support different vertical alignment options with vAlign prop. {[\"device-tablet\", \"device-tv\", \"device-smart-phone\", \"device-tablet\"].map( (icon, index) => ( {\"Faktúry a platby\"} ), )} Action Variant Tiles can use the action variant for simple interactive elements. {[\"device-tablet\", \"device-tv\", \"device-smart-phone\", \"device-tablet\"].map( (icon, index) => ( {\"Ostatné možnosti dobitia\"} ), )} Colors Tiles support various background colors using global surface and background utility classes. These colors work consistently across the design system. <h3 className=\"h5 bold\">Default</h3> <p>No background color applied</p> <h3 className=\"h5 bold\">Surface Primary</h3> <p>White surface color</p> <h3 className=\"h5 bold\">Surface Subtle</h3> <p>Subtle gray surface</p> <h3 className=\"h5 bold\">Surface Contrast</h3> <p>Dark background with white text</p> Background Images Tiles can display background images with content overlaid. Use the backgroundImage prop with variant=\"image\". <h3 className=\"bold\">Background Image</h3> <p> {Volajte doma aj v zahraničí s paušálom aj bez viazanosti presne tak, ako to potrebujete.} </p> <h3 className=\"bold\">Telefóny a zariadenia</h3> <h3 className=\"bold\">Výhodné balíčky</h3> <p> {Internet, TV a paušál dokopy vám poskytnú skvelé výhody pre celú rodinu s balíkmi Love.} </p> Content Alignment Content within tiles can be aligned using hAlign and vAlign props for flexible positioning. {\"Default \"} <br /> {\" (left)\"} Center vertical Center horizontal End <p>Space</p> <p>between</p> {\"Center center alignment\"} <p>Center</p> <p>space-between</p> With Block Actions and Overrides Complex tiles can include primary actions and override buttons for more sophisticated interactions. <h3 className=\"bold\"> {\"Block heading\"} </h3> <p>Lorem Ipsum</p> Override button Usage Tiles are versatile containers that work well in: - Product grids and carousels - Feature showcases with icons - Navigation cards - Image galleries with overlaid content - Interactive dashboards When using tiles with Block Actions, ensure that the primary action (BlockActionControl) is clearly indicated and any override actions (BlockActionOverride) don't conflict with the main interaction. API React Props | Name | Type | Default | Description | | ----------------- | -------------------------------------- | ------- | ----------------------------------------------------------------------------------- | | color | TileColor | - | Tile color. Options: \"surface-primary\", \"surface-subtle\", \"surface-contrast\". | | hAlign | \"center\" | - | Horizontal alignment of the tile content. | | vAlign | \"center\" \\| \"end\" \\| \"space-between\" | - | Vertical alignment of the tile content. | | variant | \"image\" \\| \"action\" | - | Tile variant. | | backgroundImage | React.ComponentProps<typeof Image> | - | Alt and src attributes are required. | | space | \"small\" | - | Use small spacing. | | children | React.ReactNode | - | Tile content. | | className | string | - | Additional CSS classes. |"
-  },
-  {
-    "href": "/components/tooltip",
-    "content": "Tooltip Tooltip describes an interactive (trigger) element with rich text. A tooltip is displayed when a user hovers/taps/focuses the trigger element. A tooltip is closed when user moves their mouse outside the trigger and tooltip dialog elements, taps elsewhere or focuses another element. {\"This is not clear enough\"} Variants Placement {\"I will show you on the right\"} Rich content in tooltip dialog Tooltip content can be formatted using HTML, but cannot contain interactive elements (hyperlinks, buttons, ...). Interactive elements are not allowed because the tooltip dialog never receives focus and therefore would not be operable by keyboard users. <p>This is already done.</p> } > {\"This is not clear enough\"} Trigger element In order to make triggers operable by keyboard, the trigger element must be focusable. It's OK to place tooltips on hyperlinks, buttons and other interactvie elements. Non-interactive elements must receive tabindex=\"0\" to make them focusable. Always test your custom triggers with screenreaders. Info Tooltip Look here for more information Tooltip No wrap data-tooltip-keep-with-text is for InfoTooltip component to be auto wrapped with last word in the text. Iterates through previous sibling of trigger element with attribute data-tooltip-trigger. Next, it finds all text and slice last word. Then puts previous sibling and tirgger button into span wrapper with classname text-nowrap. It will not work if sibling text is wrapped in another element. E.g. <b />. <h2 className=\"bold\">How it works?</h2> <p className=\"h5\"> {\" \"} {+ 1 tematický balík v&nbsp;cene + 1 tematický balík v&nbsp;cene} {Z ponuky 3 tematických balíkov si vyberte 1 kus, ktorý máte v cene paušálu TV Veľká.} </p> Methods Accessibility The tooltip component is implemented by the incomplete WAI-ARIA authoring practice and Heydon Pickering's tooltip component. Notes: - The tooltip trigger element uses aria-owns attribute to help NVDA speak the description text. - Tooltips with triggers of presentaion role do not announce dialog content in some screenreaders. API React Props | Name | Type | Default | Description | | --------------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dialog | React.ReactNode | - | Tooltip dialog content. | | id | string | - | Tooltip ID. | | placement | TooltipPlacement | \"top\" | Preferred placement, if there is enough room. Options: \"auto\", \"top\", \"top-start\", \"top-end\", \"bottom\", \"bottom-start\", \"bottom-end\", \"right\", \"right-start\", \"right-end\", \"left\", \"left-start\", \"left-end\". | | renderTrigger | (props) => React.ReactNode | - | Custom trigger renderer. Passes required aria attributes and children in an object as argument. | | renderDialog | (props) => React.ReactNode | - | Custom dialog renderer. Passes required attributes in an object as argument. | | children | React.ReactNode | - | Trigger element content. | JS module reference Default Config | Property | Type | Default | Description | | ----------------------- | --------------- | ------------------ | ---------------------------------------------------------------- | | rootContainerSelector | string | \"#root-tooltips\" | Selector for the root container where tooltips will be appended. | | removeDialogOnDestroy | boolean | false | Whether to remove the dialog element from DOM on destroy. | | popperOptions | PopperOptions | See below | Popper.js configuration options. | Default Popper Options - placement: \"bottom\" - Initial placement of the tooltip - strategy: \"absolute\" - Positioning strategy - modifiers: Array of Popper.js modifiers including arrow, eventListeners, flip, and offset Methods | Method | Description | | ----------------- | ------------------------------------------------------------- | | show() | Shows the tooltip. | | hide() | Hides the tooltip. | | update() | Forces a popper update to recalculate position. | | destroy() | Removes event listeners and cleans up the tooltip instance. | | getInstance(el) | Static method to get the Tooltip instance from a DOM element. |"
-  },
-  {
-    "href": "/copy/cta",
-    "content": "Call to Action Špecifické CTA buttony Informácie CTA znamená Call-to-action, teda Výzva-k-akcii. Akciou rozumieme sloveso v neurčitku, ktoré je základom tlačidla. Toto sloveso z hľadiska používateľa označuje, čo chce ísť používateľ urobiť.Vyhýbame sa zvratným slovesám (Vrátiť sa), pretože prirodzene vyžadujú ďalšie predložkové alebo iné vetné väzby, ktoré by nás v texte zdržiavali od predmetu akcie. Zároveň musí tlačidlo čo najlepšie označovať, čo sa stane „za klikom“ – typicky podstatné meno. Čo môže používateľ očakávať po akcii? Čo sa zobrazí, kam sa dostane, čo sa tam bude dať robiť? Za špecifické CTA považujeme také, ktoré odráža obe tieto informácie a spolupracuje s konkrétnymi informáciami okolo konkrétneho obsahu. Príklady Vybrať nový telefón <br /> Pozrieť paušály <br /> Vybrať zariadenie Spolupráca CTA s predošlými informáciami CTA sa nachádza na konci informačnej reťaze. Prichádza do hry v momente, keď sa používateľ na základe predošlých informácií kvalifikovane rozhoduje, ako chce pokračovať v používaní stránky. Ako vieme, používatelia stránku sledujú v tvare písmena F, resp. Z, pričom sa orientujú podľa výrazných elementov na tejto trase, akými sú nadpisy. Keďže je CTA zvyčajne výrazným elementom na konci tohto vzoru, treba počítať s alternatívou, že si používateľ prečíta len nadpis a tlačidlo a na základe ich sumára sa rozhoduje, ako ďalej. Nadpis a nasledujúce CTA preto musia na seba logicky nadväzovať. Nadpis by mal tému nastoľovať – navrhovať alebo ponúkať niečo. CTA na to má odpovedať z pozície používateľa, ktorý sa rozhodol výzvu alebo ponuku prijať. V ideálnom prípade by mali používať to isté sloveso (Výber – Vybrať) aj podstatné meno (Paušály – Paušály). Všade, kde je to len trochu možné, sa snažíme používať špecifické CTA. Príklady Generické CTA buttony Informácie Za generické tlačidlo považujeme také, ktoré okrem slovesa neobsahuje ďalší konkrétny obsah, podstatné meno. Informačne nadväzuje na predošlý obsah, ale konkrétne ho nemenuje. V takom prípade sa snažíme držať text tlačidla čo najkratší, typicky jednoslovný (sloveso). V prípade, že sloveso nestačí (Načítať), môžeme pridať neutrálne slovo imitujúce úlohu predmetu vo vete (Zobraziť viac, Zobraziť ďalšie). Pri generickom tlačidle sa musíme významne spoliehať na priestorový a časový kontext (čo používateľ videl doteraz) a „dúfať“, že si používateľ informácie sám správne spojí. Toto je pomerne ambiciózne, ak mu s tým čo najviac nepomôžeme. Preto všade, kde je to len trochu možné, sa snažíme používať špecifické CTA. Príklady Pokračovať <br /> Zobraziť viac <br /> Upraviť <br /> Späť"
-  },
-  {
-    "href": "/copy/form-labels",
-    "content": "Form Labels Informačná štruktúra Label znamená popisok, štítok alebo označenie. Jeho hlavnou úlohou teda je opisovať, aký údaj má v konkrétnej kolónke byť. Fieldset, legend Ak niekoľko po sebe nasledujúcich položiek formulára tvorí logický celok (tu Dátum povstania ako skupina 3 údajov), je vhodné ich skupinovo pomenovať, aby sme ujasnili, nad akým typom informácií má používateľ uvažovať. Skupinové pomenovanie je dôležité aj kôli prístupnosti, kedy čítač obrazovky oznamuje názvy skupiny polí (Fakturačná adresa, Ulica) Inštrukcia Pri jednotlivých prvkoch formulára za bežných okolností neuvádzame inštrukciu „zadajte/vyplňte/vyberte“ apod. Počítame s tým, že vzhľad prvkov formulára (inputu, datepickera, checkboxu...) sám osebe komunikuje potrebu/inštrukciu niečo zadať alebo vyplniť, teda sám svojím vzhľadom používateľovi „podáva ruku“. Tiež môžeme rozumne predpokladať, že celkový postup po obrazovkách a informačná reťaz (napr. eshop – produkt – do košíka – checkout) by mal používateľovi odkomunikovať, že má niečo vyplniť. Ak si myslíme, že by v danom kontexte nebolo používateľovi jasné, že a prečo má niečo vyplniť, pretože to neočakával, uvedieme vysvetlenie a inštrukciu do nadpisu alebo subheadingu formulára, nie k jednotlivým položkám. Slovná zásoba, sémantika Labely sa snažíme držať čo najkratšie, ideálne jednoslovné (Kuriérom, Dátum doručenia, Číslo občianskeho preukazu). Základom labelu je podstatné meno, ktoré pomenúva údaj. V labeli sa nesnažíme simulovať vetu. Label je vo svojej podstate technická, „tabuľková“ informácia. Snažíme sa používať strohý rozsah preto, aby sme znížili objem písma na obrazovke a uľahčili/urýchlili používateľovi vypĺňanie formulára. Label existuje v kontexte, ktorý sa snažíme využívať. Každý label treba vnímať tak, že si prečítame predošlý statický text a skúmame, či na seba môžu logicky nadviazať. Ak je to možné, neopakujeme slová v po sebe nasledujúcich labeloch, ale pracujeme s nimi v nadväznosti. Doručenie – kuriérom. Kuriérom – dátum doručenia. Dátum doručenia – Adresa."
-  },
-  {
-    "href": "/copy/form-validation",
-    "content": "Form Validation Informácie Chybová hláška má vo všeobecnosti obsahovať 3 kľúčové informácie: 1. že nastala chyba (niečo nie je v poriadku), 1. aká chyba to je (čo je v neporiadku), 1. inštrukciu, čo má používateľ urobiť (ako to dať do poriadku). Pre potreby microcopy sa zaoberáme len bodmi 2. a 3., keďže informácia č. 1 je vyjadrená vizuálne (farba + ikona). Formát Keďže komunikujeme 2 odlišné informácie nasledujúce za sebou, používame celú formu vety. Veľké písmeno na začiatku. Bodka na konci. Slovná zásoba, sémantika Chybová hláška musí sémanticky ladiť s informáciami, ktoré jej predchádzajú (heading nad input fieldom, subheading), pretože spolu tvoria jednu informačnú reťaz. Nemusí opakovať kľúčové slová, ale mala by na ne logicky nadväzovať. Inštrukcia na konci je v podstate variáciou na pôvodné použitie poľa, ktoré vygenerovalo chybu. Nesmie preto pôsobiť rovnako, aby neviedlo opäť k chybe. Musí sa od nej líšiť do tej miery, aby opísalo konkrétnejší usecase, podalo presnejšie zadanie. Tu napr. Zadajte iný (dátum) na rozdiel od pôvodného Zadajte dátum (ktoré nemáme na obrazovke, ale predpokladáme ho ako prvý intuitívny usecase). Tonalita Chybová hláška je v princípe negatívnou správou o tom, že sa niečo neudialo tak, ako používateľ zamýšľal, častokrát preto, že používateľ niečo neurobil „správne“. Je preto dôležité byť delikátny, slušný, nepôsobiť vyčítavo smerom k používateľovi a ak je to nutné, radšej situáciu zaobaliť tak, aby sme chybu nepripísali ani priamo používateľovi (neúctivé), ani „sami sebe“ (trpiteľské), ale tretej strane. Napr. Dátum (on) je nesprávny namiesto Zadali ste (vy) nesprávny dátum. Ak to rozsah dovoľuje, v inštrukcii, ako z chyby von, používateľa poprosme, aby niečo urobil inak. Labels Informačná štruktúra Label znamená popisok, štítok alebo označenie. Jeho hlavnou úlohou teda je opisovať, aký údaj má v konkrétnej kolónke byť. Fieldset, legend Ak niekoľko po sebe nasledujúcich položiek formulára tvorí logický celok (tu Dátum povstania ako skupina 3 údajov), je vhodné ich skupinovo pomenovať, aby sme ujasnili, nad akým typom informácií má používateľ uvažovať. Skupinové pomenovanie je dôležité aj kôli prístupnosti, kedy čítač obrazovky oznamuje názvy skupiny polí (Fakturačná adresa, Ulica) Inštrukcia Pri jednotlivých prvkoch formulára za bežných okolností neuvádzame inštrukciu „zadajte/vyplňte/vyberte“ apod. Počítame s tým, že vzhľad prvkov formulára (inputu, datepickera, checkboxu...) sám osebe komunikuje potrebu/inštrukciu niečo zadať alebo vyplniť, teda sám svojím vzhľadom používateľovi „podáva ruku“. Tiež môžeme rozumne predpokladať, že celkový postup po obrazovkách a informačná reťaz (napr. eshop – produkt – do košíka – checkout) by mal používateľovi odkomunikovať, že má niečo vyplniť. Ak si myslíme, že by v danom kontexte nebolo používateľovi jasné, že a prečo má niečo vyplniť, pretože to neočakával, uvedieme vysvetlenie a inštrukciu do nadpisu alebo subheadingu formulára, nie k jednotlivým položkám. Slovná zásoba, sémantika Labely sa snažíme držať čo najkratšie, ideálne jednoslovné (Kuriérom, Dátum doručenia, Číslo občianskeho preukazu). Základom labelu je podstatné meno, ktoré pomenúva údaj. V labeli sa nesnažíme simulovať vetu. Label je vo svojej podstate technická, „tabuľková“ informácia. Snažíme sa používať strohý rozsah preto, aby sme znížili objem písma na obrazovke a uľahčili/urýchlili používateľovi vypĺňanie formulára. Label existuje v kontexte, ktorý sa snažíme využívať. Každý label treba vnímať tak, že si prečítame predošlý statický text a skúmame, či na seba môžu logicky nadviazať. Ak je to možné, neopakujeme slová v po sebe nasledujúcich labeloch, ale pracujeme s nimi v nadväznosti. Doručenie – kuriérom. Kuriérom – dátum doručenia. Dátum doručenia – Adresa."
-  },
-  {
-    "href": "/copy/tone-of-voice",
-    "content": "Tvorba textov Brand voice Každá značka má vlastný brand voice. Brand voice je štýl jazyka, akým značka komunikuje so svojím publikum. Pre každú značku je špecifický a vďaka nemu sa na trhu tvorí “osobnosť” značky. Aký je Orange? - Priateľský - Rodinný - Pozitívny - Profesionálny - Zrozumiteľný pre každého - Starostlivý - Entuziastický - Otvorený Ide o výber slov, tonalitu prejavu a hodnoty značky, ktoré chceme adresovať nášmu publiku cez rôzne médiá. > Tvoria ho 2 základné veci: > > - Čo chceme povedať (content) > - Ako to chceme povedať (tone of voice) Ako písať texty na web - Píšeme jednoducho, stručne a jasne. Ľudia väčšinou scanujú text očami, musia zachytiť hlavný message už z nadpisov - Používame krátke a zrozumiteľné vety. Myslíme aj na zobrazovanie textov v mobile, kde sú krátke texty nutnosť - Hovoríme aktívne a priamo k používateľovi. Používame “my” a “vy” namiesto pasívneho “klienti” a “Orange”. Chceme pôsobiť dojmom, že používateľa poznáme - Vždy sa snažíme splniť to, čo sľúbime. - Z nášho prejavu musí byť zrejmé, že sme pripravení pomôcť. Ak sa vyskytne problém, s používateľom ho proaktívne riešime - Píšeme v pozitívnom duchu. Vyhýbame sa negatívnym formuláciám - Humor používame v rozumnej miere. Radi vyvoláme úsmev, no nie sme nasilu vtipní - Dbáme na to, aby text znel prirodzene - čítame si po sebe, čo napíšeme, aby to znelo dobre a pochopiteľne už pre nás - Ľudia by mali mať z nás pocit: \"Hovoria mojou rečou, ako keby mi to hovoril starší brat. Starajú sa o mňa a cítim, že som v dobrých rukách.\" - Vžďy hľadáme riešenia, ktoré sú prínosné pre obe strany - Orange píšeme vždy s veľkým O (výnimka je logo a URL adresa) - Vety v odrážkach začíname vždy veľkým písmenom a nekončíme bodkou - Cena a mena sa píše S medzerou<br /> <strong className=\"h5 text-accent\">1 EUR, 1 €</strong> - Cena za časové obdobie sa píše BEZ medzery<br /> <strong className=\"h5 text-accent\">1 EUR/mesiac, 1 €/mes</strong> Ako nepísať texty na web - Vyhýbame sa slangu, cudzím slovám a anglickým výrazom (s výnimkou prípadov, keď píšeme pre cieľovku, ktorá ho pozná) - Nikdy nepoužívame KAPITÁLKY ani italic - Nepíšeme dlhé súvetia a veľa opisu - namiesto toho používame krátke vety a prechádzame priamo k veci (jasne, stručne, výstižne). Používateľa nezahlcujeme zbytočnými informáciami. - Nepíšeme prehnane priateľsky - mali by sme znieť prívetivo, no zároveň profesionálne a slušne - Nechceme pôsobiť vtieravo ani nátlakovo. - Nesľubujeme to, čo nevieme splniť. Nezavádzame - Nepíšeme hard-sellovo - Dávame si pozor na gramatické chyby - Vyhýbame sa slovným vatám (pošlite krátku SMS – pošlite SMS) - Vyhýbame sa tomu, aby sa používateľ musel opakovať - Od používateľa neočakávame, že si bude všetko pamätať alebo že automaticky porozumie veciam, ktoré sú zrejmé nám"
-  },
-  {
-    "href": "/fundamentals/accessibility",
-    "content": "Accessibility We aim to provide the best possible experience for all users without regard to their permanent or current abilities. We achieve that by following WCAG 2.1 level AA standard when designing, coding and writing content. Lime components are built with accessibility in mind. You'll find accessibility documentation bundled with applicable components - whether they follows WAI-ARIA authoring practices or not (and why), what to keep your eye on and whether it's been tested. When writing your own components or building larger chunks - patterns or whole screens - start by making sure that you follow the Four Principles of Accessibility. Colors and contrast Users use their devices in non ideal conditions all the time. To ensure readability in direct sunlight, on a dim screen or for a person with not exactly 20/20 vision, the text must be in contrast with the background. WCAG level AA requires at a contrast ratio of at least 4.5:1 for default font sizes and 3:1 for large sizes (19px bold and 24px regular). Lime primary buttons currently do not meet minimum contrast requirements as a visual design decision. Lime accessible color combinations Success Criterion 1.4.3: Contrast (Minimum) Read more about colours and contrast Use native HTML5 elements No ARIA is better than wrong ARIA. Whenever you can, use native HTML5 elements - when used correctly, you get accessibility for free. A quick note on buttons and links: buttons do stuff, while links (anchor elements) take you somewhere. If the href attribute equals #, you should probably use a <button>. How to use ARIA in HTML Keyboard navigation Each interactive element must be reachable and operable by keyboard. Be careful when creating clickable variants of non-interactive components. Although they might look similar, the markup has to be different. When creating interactive widgets, head straight to https://www.w3.org/TR/wai-aria-practices-1.1/ - when none of the suggested design patterns match your needs, you should probably consult with designers. Consistency is key and users probably won't be able to use your custom widget, as they haven't used it before. Beware of copying the authoring practices to the point. Some of their specifications for interactive widgets, such as menubar or window splitter are meant for acomplex (desktop) pps, not websites. Focus rings If you can click it, put a ring on it! Focus rings identify elements which are currently in focus. This is tremendously important for keyboard users - they don't have a mouse cursor and rely on it heavily. While setting outline: 0 globally is considered blasphemy, designers and clients often demand this. As compromise, we implement :focus-visible which only shows the focus ring when keyboard input is expected. For example buttons do not expect keyboard input when they are focused using a mouse, but they do when they are focused using keyboard. A textarea always expects keyboard input on focus, as users focus them whey they want to fill something in. Structuring content HTML5's outlining algorithm was supposed to support using any heading level in sectioning elements (section, article, aside, nav…). In reality, there are currently no known native implementations of the outline algorithm in browsers or assistive technologies. Therefore, always use correct heading ranks (h1-h6) to convey document structure. Creating an outline Each document should have a main section, usually declared as <main role=\"main\">, for better support in browsers and assistive technologies. In addition, a <header role=\"banner\"> is recognised as the \"header\" area of the website, usually consisting of a logo, navigation, and sometimes additional features such as search. Take care when creating sectioning components. The <section> element has its own semantic meaning, and should not be misused for presentational purposes. Each sectioning element (section, article, aside, nav) should be labeled with a heading or aria-label. Headings and sections Testing for accessibility Disconnect your mouse, dim your screen (turn it off completely) or set zoom level to 200%. Then try to navigate and operate what you just built. Not so easy heh? Keyboard operation Check if you can interact with the website. Pressing the Tab key should highlight the first interactive element in order. If you can't determine your position, you are either missing focus rings or there is a visually hidden element, which can be interacted with using a keyboard. Interactive widgets are often operated with arrow keys (tabs, menus, etc.). Check the https://www.w3.org/TR/wai-aria-practices-1.1/ if your widget behaves the way it should. Pressing ESC should close any open dialogs, tooltips, dropdowns, or any other elements that overlay a portion of the website. Screenreader testing A screenreader reads everything aloud, allowing users to navigate the website without the need of a display device. You should test whether screenreaders understand your markup and convey meaningful information to users. - On Mac OS, Voice Over (Mac OS) can be launched visiting System Preferences -> Accessibility -> Voice Over. Voice Over works best in Safari. - Windows users can download a trial version of JAWS or the open source NVDA screen reader from https://www.nvaccess.org/ - Android users can, turn on TalkBack - iOS users can use VoiceOver and further accessibility features https://support.apple.com/en-us/HT204390 If screenreader accessibility is key to the success of your site/app, you should test with as many screen readers as possible. Automated testing Automated tools can reveal issues with color contrast, missing labels, incorrect document outline and many more. We alread check for many accessibility issues when linting, but can't cover everytthing. Lime includes automated accessiblity tests for each component using axe-core. Keep in mind that automated tests can only find 57% issues automatically. Pick your favorite tool - for example WAVE, Lighthouse or Accessibility Insights and let technology do the work. You'll have to fix the issues manually though."
-  },
-  {
-    "href": "/fundamentals/breakpoints",
-    "content": "import Code from \"@/components/Code\"; import breakpoints from \"@/styles/export/breakpoint.js\"; export const breakpointsTableData = { headers: [ { key: \"name\", label: \"Name\", }, { key: \"width\", label: \"Min. viewport width\", }, ], rows: Object.keys(breakpoints).map((item, index) => ({ name: item + (index === 0 ? \" (default)\" : \"\"), width: breakpoints[item], })), }; Breakpoints ODS uses mobile-first breakpoints to adjust layout and content across different screen sizes. SCSS get() mixin The get() mixin helps writing media queries without the need to specify the exact viewport width. Call it with @include and write any breakpoint specific styles. The mixin also accepts a parameter, specifying how to apply the media query. Javascript Breakpoints are exported as CSS modules. export const breakpointNames = Object.keys(breakpoints); {import breakpoint from '@orangesk/orange-design-system/src/styles/export/breakpoint.js'; console.log(breakpoint); // { ${breakpointNames.map((name) => // ${name}: \"${breakpoints[name]}\").join(\",\\n\")} // }}"
-  },
-  {
-    "href": "/fundamentals/color-palette",
-    "content": "import Code from \"@/components/Code\"; Color Palette & Theme System Our design system uses a comprehensive color token system that automatically adapts to light and dark themes. All colors are defined as CSS variables, making theme switching seamless and efficient. Design Token Philosophy Every color in our system is defined as a semantic token rather than a literal color value. This means colors have meaningful names like text-default and surface-primary instead of black or white. This approach enables: - Theme flexibility: Colors automatically adapt to light/dark modes - Semantic clarity: Color names describe their purpose, not their appearance - Maintainability: Centralized color definitions that can be updated globally - Consistency: Guaranteed color harmony across all components Light and Dark Theme Support Interactive Theme Demo Try switching between light and dark themes using the theme toggle in the preview below: <div className=\"background-primary text-default\"> <h2 className=\"display-3 mb-medium\">{\"Automatic Theme Adaptation\"}</h2> <p className=\"text-secondary mb-large\"> {\"This content automatically adapts to the selected theme using semantic color tokens.\"} </p> <div className=\"mb-large\"> <h4 className=\"h3 text-default mb-small\">{\"Subtle Surface\"}</h4> <div className=\"surface-subtle mb-small\"> <p className=\"text-secondary\">{\"Secondary text on subtle background\"}</p> </div> <h4 className=\"h3 text-default mb-small\">{\"Moderate Surface\"}</h4> <div className=\"surface-moderate\"> <p className=\"text-secondary\">{\"Secondary text on moderate background\"}</p> </div> </div> </div> Theme Classes Our color system uses CSS custom properties that change based on theme classes: - .is-light - Light theme (default) - .is-dark - Dark theme <div className=\"mb-large\"> <div className=\"surface-primary mb-medium\"> <h4 className=\"h3 text-default mb-small\">{\"Headline (Default)\"}</h4> <p className=\"text-secondary mb-medium\">{\"Paragraph\"}</p> <div className=\"surface-secondary text-inverse\"> {\"Brand orange surface\"} </div> </div> </div> How Theme Switching Works The theme system works by applying different CSS variable values based on the presence of .is-light or .is-dark classes: {// Light theme (default) :root, .is-light { --color-text-default: #000000; --color-background-primary: #ffffff; --color-surface-secondary: #ff7900; } // Dark theme .is-dark { --color-text-default: #ffffff; --color-background-primary: #141414; --color-surface-secondary: #ff7900; }} Theme Override Hierarchy You can override themes at any level of your HTML structure: <div className=\"background-primary text-default\"> <h3 className=\"h2 text-default mb-medium\">{\"Dark Theme Container\"}</h3> <p className=\"text-secondary mb-large\"> {This entire section uses dark theme colors} </p> <div className=\"is-light background-primary text-default mb-medium\"> <h4 className=\"h3 text-default mb-small\">{\"Light Override Component\"}</h4> <p className=\"text-secondary mb-medium\"> {This component forces light theme despite being inside a dark container} </p> {Light Button} </div> {Dark Button} {Fill Button} </div> Color Categories For a complete reference of all color utility classes with examples, see our Color Utilities documentation. Quick Preview Here's a quick overview of our main color categories: <div className=\"mb-large\"> <h4 className=\"h3 mb-small\">{\"Text Colors\"}</h4> <p className=\"text-default mb-small\">{\"text-default - Primary text\"}</p> <p className=\"text-secondary mb-small\">{\"text-secondary - Secondary text\"}</p> <p className=\"text-disabled mb-small\">{\"text-disabled - Disabled text\"}</p> <p className=\"text-accent mb-small\">{\"text-accent - Accent text\"}</p> </div> <div className=\"mb-large\"> <h4 className=\"h3 mb-small\">{\"Surface Colors\"}</h4> <div className=\"surface-primary mb-small\"> <p>{\".surface-primary\"}</p> </div> <div className=\"surface-secondary mb-small\"> <p className=\"text-inverse\">{\".surface-secondary\"}</p> </div> <div className=\"surface-tertiary mb-small\"> <p className=\"text-inverse\">{\".surface-tertiary\"}</p> </div> <div className=\"surface-subtle mb-small\"> <p>{\".surface-subtle\"}</p> </div> </div> <div className=\"mb-large\"> <h4 className=\"h3 mb-small\">{\"Semantic Fill Colors\"}</h4> <div className=\"fill-information mb-small\"> {\"Information\"} </div> <div className=\"fill-positive mb-small\"> {\"Success\"} </div> <div className=\"fill-warning mb-small\"> {\"Warning\"} </div> <div className=\"fill-negative\"> {\"Error\"} </div> </div> For detailed color utility classes and complete examples, visit our Color Utilities reference guide. CSS Variables Reference All color utilities use CSS custom properties that you can reference directly in your custom styles. See the CSS Variables Reference in our utilities guide for the complete list. Using Colors in Your Components For detailed implementation examples and a complete reference of utility classes, see our Color Utilities guide. Accessibility Considerations Color Contrast All color combinations in our system meet WCAG 2.1 AA standards: - Text colors have minimum 4.5:1 contrast ratio with their backgrounds - Large text (18pt+ or 14pt+ bold) has minimum 3:1 contrast ratio - Interactive elements maintain contrast in all states Color Independence Never rely solely on color to convey information: ✅ Good: Use color + icons + text labels ❌ Bad: Color only Migration from Legacy Colors If you're migrating from the legacy color system, see our Color Utilities - Migration Guide for complete mapping between old and new class names. Best Practices 1. Use semantic names: Choose color classes based on their purpose, not appearance 2. Theme-first mindset: Always consider how your design works in both light and dark themes 3. Test both themes: Verify your components look good in both .is-light and .is-dark modes 4. Leverage inheritance: Apply theme classes at the highest appropriate level 5. Use CSS variables: Reference var(--color-) variables in custom CSS for theme consistency 6. Override sparingly: Only override theme at component level when truly necessary 7. Maintain contrast**: Always verify text/background combinations meet accessibility standards Related Documentation - Color Utilities - Complete reference of all color utility classes - Design Tokens - Overview of the token system - Accessibility - Guidelines for accessible color usage"
-  },
-  {
-    "href": "/fundamentals/spacing-and-layout/choose-the-right-spacing-value",
-    "content": "import SpacePreview from \"@/docs/utils/SpacePreview\"; How to choose the right spacing value 1. Less space between small or functionally related elements 2. More space between bigger or less related elements Space improves text readability and scannability. If elements don’t have enough spacing, it gets difficult to see their hierarchy correctly. Related elements should be visually grouped together and the unrelated ones should have more space to “breathe”. --- <h3 className=\"bold\">Navyše získate</h3> --- Example of a list of named Icons with a CTA button – smaller, functionally related elements. Spacing between the Icon, text and below the whole item is small(10px). --- <h2 className=\"display-2\"> Vylepšili sme pre vás vybrané Go <br className=\"show-sm\" /> paušály dátami a službami navyše </h2> {benefitsItems.map(({ icon, title, content }) => ( <h3 className=\"bold\">{title}</h3> <p className=\"mb-none\">{content}</p> ))} --- Example of a section used to describe benefits of some service. Spacing below the Icon and the title is medium(20px) (bigger as in previous example), since the elements are bigger, however, it is still possible to recognize that they are related to each other. Spacing below the main title and below each item is the same - xlarge(60px), since it keeps the whole section balanced and scanable (also on smaller screen sizes). --- <h2 className=\"display-3\">Ako to funguje?</h2> {nextStepsItems.map(({ icon, content }, index) => ( {index + 1} <p className=\"mb-xlarge\">{content}</p> ))} Vybrať paušál --- Example of a section used to describe benefits of some service. Spacing values between elements in a particular group (each of the steps) is smaller than the one below it, since the bottom spacing is used to separate on step from another. This keeps the content hierarchy easy to spot. The main title and the primary button also have enough space to “breathe”. Space is evenly distributed among the whole section."
-  },
-  {
-    "href": "/fundamentals/spacing-and-layout/general-rules",
-    "content": "import SpacePreview from \"@/docs/utils/SpacePreview\"; Spacing and layout Use space to improve the text's readability and scannability. Apply consistent space rules to keep uniformity and quality of UI. General space rules Predefined spacing values Space is created with paddings (\"inner space\") or margins (\"outer space\") - depends on the type of the element and case of the use. In designs, margins are marked in orange and paddings in green color. <p className=\"bold mb-none\"> { \"Use predefined values for creating spaces in components, patterns and screens:\" } </p> <table className=\"mb-medium\"> <tbody> {spaces.map(([name, size]) => ( <tr key={name}> <td>- {name}:</td> <td>{size}</td> </tr> ))} </tbody> </table> --- --- Spacing values for margins and paddings Tailored spacing Orange Design System component library is built mobile first. We aim to serve small screens first and progressively enhance for larger viewports. To achieve great content hierarchy and group related information, a different viewport might need different spacing. The rule of thumb is to minimise vertical scrolling on small screens, and give content (and especially unrelated sections of content) a bit more space to breathe on larger desktop displays. Usually large(30px) spaces are adjusted to xlarge(60px) on large and larger viewports. Find more details in How to choose the right spacing value and Sections. Exceptions Sometimes a component isn't built with predefined spacing values. It occurs mainly in simple components with text centered inside them (such as Badges or Buttons). These components might be coming from Orange Digital Guidelines or had been used for several years already and work well so there wasn't a real reason to change (update) them. So it's possible to use different as predefined value in new component definition occasionally, however it is necessary to consult it with Product Owner of Orange design system. --- Tag --- Example of a Tag component Horizontal padding is small(10px), however vertical is just 3px, which is not a predefined value. Steps to follow when applying spacing values 1.<br /> When creating a new section or an entire page, firstly check the already defined components and patterns. There may already exist something that fits your needs. 2.<br /> If you have checked those and are sure you need to create something new, apply the following rules to your proposal. If your questions about spacing aren't answered after reading these rules, try to at least draw inspiration from examples in the documentation and particular components or patterns."
-  },
-  {
-    "href": "/fundamentals/spacing-and-layout/rule-of-3-cs",
-    "content": "import SpacePreview from \"@/docs/utils/SpacePreview\"; Rule of 3 Cs № 1: Containers Containers are elements that contain other elements. Typical examples of these are cards, modals, etc. Use padding on all sides for the container's content - like matte in framed photos (common examples could be Cards or Alerts). Remove margin-bottom of the bottom-most element in the container stack. It would only add up to the padding property of the container. We want to keep spacing predictable so we want to prevent adding-up like that. --- --- Basic example of a Card with simple content. Container padding is set to medium(20px) - a frequently used standard value. № 2: Contents Inside of the container is called content. Content usually includes headings, paragraphs, lists, tables, etc. Content is stacked vertically using mainly margin-bottom property Don't forget to reset the last element's bottom margin. In CSS, this is usually done on the container element. --- --- Basic example of a Card with simple content. Space is created by margin-bottom property of each element and the last button doesn't have any, according to rules. № 3: Components Components are basic building blocks that can be combined into larger, more complex elements. There are two types: block or inline. Block components Block components occupy the full width of the container. These components should have a medium(20px) margin-bottom (common examples could be Cards or Alerts). --- --- Basic example of a Card with simple content. We usually use margin-bottom of medium(20px) as a standard. Example card is placed into a Grid and occupies space of several Columns which is why it doesn't look like a full-width element. Inline components Inline components are arranged in one horizontal line next to each other (e.g. Buttons, Icons, Badges...). --- {\"Button Primary\"} {\"Button\"} {\"Last button without a side margin\"} --- Example of a group of buttons. In this case, margin-right is small(10px) - we usually use small(10px) spacing for a separation of smaller elements. Optical adjustment Sometimes it's necessary to use optical adjustment - judge by eye to keep the visual pleasant and balanced instead of piling up different rules. So it's allowed to bend rules a little. However, there always has to be a reasonable argument for doing this. --- ( <div data-space-preview-margin className=\"large bold mb-none\"> {Ste náš zákazník? Prihláste sa, aby sme vám mohli zobraziť služby šité na mieru.} </div> )} /> --- Example of info alerts with various text lengths and container widths. A problem with alerts occurs when the text is several rows long. Since the first line is always vertically-centered with an Icon, the text visually appears to have bigger spacing on top than on the bottom. An alert is a container with some content inside - according to the rules in the Containers section, the last element shoudn't have any margin-bottom, so space is created just with inner padding of the container. --- ( <div data-space-preview-margin className=\"large bold\"> {Ste náš zákazník? Prihláste sa, aby sme vám mohli zobraziť služby šité na mieru.} </div> )} /> --- Manually adding a xsmall(5px) margin-bottom on the text makes up for the extra space above the text (brought by the Icon) and makes the content appear vertically-centered within the container, even with longer text or on smaller screens. Sources Space in Design Systems A framework for creating a predictable & harmonious spacing system for faster design-dev handoff"
-  },
-  {
-    "href": "/fundamentals/spacing-and-layout/sections",
-    "content": "import SpacePreview from \"@/docs/utils/SpacePreview\"; Sections Functionally related elements are usually placed in sections which create uniform space across a whole webpage. A section occupies full width of the screen and sets background color to it. It is possible to set black, white or light gray(gray-300) as a background. Feel free to use white and black (<a href=\"https://design.orange.com/wp-content/uploads/2018/06/Digital-Colour-Palettes-Guideline-v2.pdf\" target=\"blank\">main Orange colors</a>), gray should be used just when none of them is suitable. Spacing within a Section is usually created by vertical paddings of size xlarge(60px) (with some exceptions). Read more about Sections in the component documentation - you can also find out how outer spacing of components inside the Sections should be set and how to solve some edge cases. --- <h4 className=\"display-3\"> Chcete si vymeniť starý paušál a objednať nový telefón? </h4> Prejsť k výmene --- Example of a simple Section with gray background. Vertical spacing is creating by Section's default padding of xlarge(60px).**"
-  },
-  {
-    "href": "/fundamentals/tokens",
-    "content": "import base from \"@/styles/export/base.js\"; import breakpoint from \"@/styles/export/breakpoint.js\"; import color from \"@/styles/export/color.js\"; import space from \"@/styles/export/space.js\"; import TokenTable from \"@/docs/utils/TokenTable\"; import Swatch from \"@/docs/utils/Swatch\"; Design Tokens A Design token is a piece of UI information used throughout apps to ensure visual consistency and brand identity. We use them instead of fixed values to maintain a scalable and consistent visual system for developing interfaces. Design tokens are available for both scss and js environments. Design tokens are defined in src/styles/tokens/[token-category].scss and exported as css modules from src/styles/export/[token-category].scss. Base In scss @use 'src/styles/tokens/base'; In JS import 'src/styles/export/base.scss'; ({ name: item, value: base[item], scss: base.$${item}, js: base.${item}, }))} /> Breakpoint In scss @use 'src/styles/tokens/breakpoint'; In JS import 'src/styles/export/breakpoint.scss'; ({ name: item, value: breakpoint[item], scss: @include breakpoint.get('${item}');, js: breakpoint.${item}, }))} /> learn more about breakpoints > Color Colors are defined as CSS custom properties that automatically adapt to light and dark themes. Use CSS variables in your styles instead of fixed color values. CSS Variables var(--color-text-default), var(--color-surface-primary), etc. Our semantic color tokens automatically adapt based on the .is-light or .is-dark theme applied to the page. Color names describe their purpose rather than their appearance, enabling flexible theming and maintainability. item.startsWith(\"light-\")) .map((item) => { const name = item.replace(\"light-\", \"\"); const lightKey = light-${name}; const darkKey = dark-${name}; return { name: name, value: ( <> /{\" \"} </> ), css: var(--color-${name}), }; })} /> learn more about colors > Space In scss @use 'src/styles/tokens/space'; In JS import 'src/styles/export/space.scss'; ({ name: item, value: space[item], scss: @include space.get('${item}');, js: space.${item}, }))} />"
-  },
-  {
-    "href": "/fundamentals/typography/bodycopy",
-    "content": "Body copy Use class names .small, .large to scale inline text. <p className=\"small\">This is small text</p> <p>This is default text</p> <p className=\"large\">This is large text</p> .small</code>, }, property: \"font-size\", value: \"14px\", }, { property: \"line-height\", value: \"18px\", }, { selector: { tag: \"th\", scope: \"row\", rowSpan: \"2\", value: <code>*</code>, }, property: \"font-size\", value: \"16px\", }, { property: \"line-height\", value: \"20px\", }, { selector: { tag: \"th\", scope: \"row\", rowSpan: \"2\", value: <code>.large</code>, }, property: \"font-size\", value: \"18px\", }, { property: \"line-height\", value: \"22px\", }, ]} /> Line length Line lengths should be managed to represent the correct look of text. Limit the extent of line lengths. Shorter line lengths are on brand and more readable. 1. Up to 40 characters per line for short lines of text or short paragraphs. 2. Up to 55 characters per line for body text. 3. More than 80 characters is too long. Default length is set to 30em, which equals roughly to 55 characters. This can be adjusted with text line length and wrapping utilities <p> {Digital services are a key enabler for today's social and economic development. Orange is a key player in this progress by providing telecoms infrastructure in more than 220 countries and territories around the world.} </p>"
-  },
-  {
-    "href": "/fundamentals/typography/caption",
-    "content": "Caption Caption classes are used for image captions and related descriptive text. They provide three size variants with appropriate font sizing and line height for optimal readability. Usage Caption utilities can be applied to any text element, but are most commonly used with <p>, <figcaption>, or <span> tags to describe images, graphics, or other visual content. <figure> <figcaption className=\"caption--small\"> {\"This is a small caption (14px)\"} </figcaption> <figcaption className=\"caption\"> {\"This is a default caption (16px)\"} </figcaption> <figcaption className=\"caption--large\"> {\"This is a large caption (18px)\"} </figcaption> </figure> Sizes .caption--small</code>, }, { variant: \"Default\", fontSize: \"16px\", lineHeight: \"18px\", className: <code>.caption</code>, }, { variant: \"Large\", fontSize: \"18px\", lineHeight: \"20px\", className: <code>.caption--large</code>, }, ]} /> Best practices - Use semantic HTML: prefer <figure> and <figcaption> for images with captions - Keep captions concise and descriptive - Use the appropriate size for visual hierarchy - Combine with color and spacing utilities for clarity - Ensure sufficient color contrast for accessibility"
-  },
-  {
-    "href": "/fundamentals/typography/displayheadings",
-    "content": "Display headings Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. {[1, 2, 3, 4, \"hero\"].map((headingLevel) => { const displayClass = display-${headingLevel}; return ( <h1 key={displayClass} className={displayClass}> .{displayClass}: 401 Koní bežalo vôkol mäsového kombinátu </h1> ); })} <table className=\"table\"> <caption> Display headings font sizes and line heights. Displayed values are calculated from relative units when default font size is set to 16px. </caption> <thead> <tr> <th rowSpan=\"2\">Selector</th> <th rowSpan=\"2\">Property</th> <th colSpan=\"2\">Viewport size</th> </tr> <tr> <th>default</th> <th>md</th> <th>xl</th> </tr> </thead> <tbody> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-1</code> </th> <td>font-size</td> <td>30px</td> <td>50px</td> <td>60px</td> </tr> <tr> <td>line-height</td> <td>33px</td> <td>55px</td> <td>66px</td> </tr> <tr> <td>max-width</td> <td>520px</td> <td>700px</td> <td>950px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-2</code> </th> <td>font-size</td> <td>28px</td> <td>40px</td> <td>50px</td> </tr> <tr> <td>line-height</td> <td>31px</td> <td>44px</td> <td>55px</td> </tr> <tr> <td>max-width</td> <td>520px</td> <td>650px</td> <td>850px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-3</code> </th> <td>font-size</td> <td>26px</td> <td>34px</td> <td>40px</td> </tr> <tr> <td>line-height</td> <td>29px</td> <td>37px</td> <td>44px</td> </tr> <tr> <td>max-width</td> <td>480px</td> <td>580px</td> <td>750px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-4</code> </th> <td>font-size</td> <td>24px</td> <td>30px</td> <td>34px</td> </tr> <tr> <td>line-height</td> <td>26px</td> <td>33px</td> <td>37px</td> </tr> <tr> <td>max-width</td> <td>480px</td> <td>520px</td> <td>700px</td> </tr> </tbody> </table> Text utilities If you need change style, alignment, color or wrapping of text use text utilities."
-  },
-  {
-    "href": "/fundamentals/typography/headings",
-    "content": "Headings {[1, 2, 3, 4, 5, 6].map((headingLevel) => { const HEADINGTAG = h${headingLevel}; return ( {HEADINGTAG}: 401 Koní bežalo vôkol mäsového kombinátu ); })} .h1 through .h6 classes are available to match the desired font styling of a heading and maintain proper document structure. {[1, 2, 3, 4, 5, 6].map((headingLevel) => { const headingClass = h${headingLevel}; return ( <p className={headingClass} key={headingClass}> .{headingClass}: 401 Koní bežalo vôkol mäsového kombinátu </p> ); })} <table className=\"table\"> <caption> h1 - h6 font sizes and line heights. Displayed values are calculated from relative units when default font size is set to 16px. </caption> <thead> <tr> <th rowSpan=\"2\">Selector</th> <th rowSpan=\"2\">Property</th> <th colSpan=\"2\">Viewport size</th> </tr> <tr> <th>default</th> <th>md</th> </tr> </thead> <tbody> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>h1</code>, <code>.h1</code> </th> <td>font-size</td> <td>34px</td> <td>40px</td> </tr> <tr> <td>line-height</td> <td>40px</td> <td>46px</td> </tr> <tr> <td>max-width</td> <td>580px</td> <td>700px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>h2</code>, <code>.h2</code> </th> <td>font-size</td> <td>28px</td> <td>34px</td> </tr> <tr> <td>line-height</td> <td>32px</td> <td>40px</td> </tr> <tr> <td>max-width</td> <td>520px</td> <td>650px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>h3</code>, <code>.h3</code> </th> <td>font-size</td> <td>24px</td> <td>28px</td> </tr> <tr> <td>line-height</td> <td>28px</td> <td>32px</td> </tr> <tr> <td>max-width</td> <td>480px</td> <td>580px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>h4</code>, <code>.h4</code> </th> <td>font-size</td> <td>18px</td> <td>24px</td> </tr> <tr> <td>line-height</td> <td>22px</td> <td>28px</td> </tr> <tr> <td>max-width</td> <td>450px</td> <td>520px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>h5</code>, <code>.h5</code> </th> <td>font-size</td> <td>16px</td> <td>18px</td> </tr> <tr> <td>line-height</td> <td>20px</td> <td>22px</td> </tr> <tr> <td>max-width</td> <td>420px</td> <td>480px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>h6</code>, <code>.h6</code> </th> <td>font-size</td> <td>18px</td> <td>18px</td> </tr> <tr> <td>line-height</td> <td>26px</td> <td>26px</td> </tr> <tr> <td>max-width</td> <td>420px</td> <td>450px</td> </tr> </tbody> </table> Text utilities If you need change style, alignment, color or wrapping of text use text utilities. Resources - <h1>-<h6>: The HTML Section Heading elements"
-  },
-  {
-    "href": "/fundamentals/typography/lists",
-    "content": "Lists Unordered <ul> <li> <strong>List unordered</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> </ul> Ordered <ol> <li> <strong>List ordered</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> </ol> Circle <ul className=\"list-circle\"> <li> <strong>List circle</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> <li>Labore deserunt</li> </ul> Square <ul> <li> Default square list. <ul className=\"list-square\"> <li>circle overriden with class .list-square</li> </ul> </li> </ul> Nested <ul> <li> item 1 - default <ul> <li>nested item 1</li> <ul> <li>nested item 2</li> </ul> </ul> </li> </ul> <ul className=\"list-circle\"> <li> item 1 - with class .list-circle <ul> <li>nested item 1 </li> <ul> <li>nested item 2 </li> </ul> </ul> </li> </ul> No offset Bullets sit flush to the left. Beware when using this on ordered list, as the double digit numbers might overflow the container. <ul className=\"list-no-offset\"> <li> <strong>List no offset</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> <li>Labore deserunt</li> </ul> Condensed Reduced vertical spacing <ul className=\"list-condensed\"> <li> <strong>List condensed</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> <li>Labore deserunt</li> </ul> Colored bullets Changes the color of list item bullets. The available colors are black (default) and orange. <ul className=\"list--marker-orange\"> <li> <strong>List unordered</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> </ul> Description Lists <dl> <dt> <strong>Term 1</strong> </dt> <dd>Definition for term 1</dd> <dt> <strong>Term 2</strong> </dt> <dd>Definition for term 2</dd> <dt> <strong>Term 3</strong> </dt> <dd>Definition for term 3 with more detailed explanation</dd> </dl> Readability Default We setup default readable text width on list element. <ul> <li> <strong> {List unordered Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem dolorem autem quasi, exercitationem asperiores commodi quod, ea amet doloremque necessitatibus dolore nam, facere esse aperiam mollitia modi dolor eos aliquid!} </strong> </li> <li> {Ad dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat impedit, voluptatem quisquam voluptates consectetur unde, accusantium facilis recusandae cumque fugit ea. Nihil esse delectus repellat, impedit vitae repellendus quasi vel.} </li> <li> {Ad dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat impedit, voluptatem quisquam voluptates consectetur unde, accusantium facilis recusandae cumque fugit ea. Nihil esse delectus repellat, impedit vitae repellendus quasi vel.} </li> </ul> Custom lengths If you need to overwrite it use custom Line length and wrapping utils like this. <ul className=\"text-fullwidth\"> <li className=\"text-narrow\"> <strong> {List unordered Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem dolorem autem quasi, exercitationem asperiores commodi quod, ea amet doloremque necessitatibus dolore nam, facere esse aperiam mollitia modi dolor eos aliquid!} </strong> </li> <li className=\"text-readable\"> {Ad dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat impedit, voluptatem quisquam voluptates consectetur unde, accusantium facilis recusandae cumque fugit ea. Nihil esse delectus repellat, impedit vitae repellendus quasi vel.} </li> <li> {Ad dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat impedit, voluptatem quisquam voluptates consectetur unde, accusantium facilis recusandae cumque fugit ea. Nihil esse delectus repellat, impedit vitae repellendus quasi vel.} </li> </ul> Inline <ul className=\"list-inline\"> <li> <strong>List inline</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> <li>Labore deserunt</li> </ul> Unstyled Reset any bullet and spacing styles. Great for enumerating over rich content using other layout components rendered as lists and items (e.g. Bar, Grid...). <ul className=\"list-unstyled\"> <li> <strong>List unstyled</strong> </li> <li>Ad dolor</li> <li>Aliqua anim</li> <li>Est sit</li> </ul>"
-  },
-  {
-    "href": "/fundamentals/typography/typeface",
-    "content": "Typeface The Orange identity is defined by a bold distinctive typographic style. Typography should always be simple and clear, avoiding unnecessary detail or fuss. Being rigorous about our typography application is a key part of maintaining a strong, consistent brand identity. Our brand typeface is Helvetica Neue, available in three weights: - Helvetica Neue Bold (75) - Used for headings, titles, and UI labels - Helvetica Neue Roman (55) - Used for body copy and tabular data - Helvetica Neue Light (45) - Also used for headings, titles, and UI labels Use sentence case with standard, local grammar and punctuation rules. Never use all-caps. Download files Helvetica Neue is used when embedding fonts for web browsing. Web fonts are available at the brand site. Using Helvetica Neue with ODS ODS does not include @font-face rules in the main stylesheet to avoid imposing file structures on your app. Instead, you should create your own @font-face rules using the woff2 font files. The ODS package includes font files in @orangesk/orange-design-system/public/fonts/: - HelveticaNeue-Bold.woff2 - HelveticaNeue-Roman.woff2 - HelveticaNeue-Light.woff2 A sample fonts.css file is available at build/lib/fonts.css that you can use as a reference. Font family declaration When declaring the font family in your CSS, use a minimal fallback stack to ensure consistent rendering across platforms: Important: Avoid including system font keywords like -apple-system, BlinkMacSystemFont, or \"Segoe UI\" before the generic fallbacks. These can interfere with custom font loading and cause inconsistent rendering across platforms. The fallback order should prioritize similar fonts (Arial, Helvetica Neue) that match the weight and proportions of Helvetica Neue. Font display strategy Use font-display: swap in your @font-face declarations to ensure text remains visible during font loading:"
-  },
-  {
-    "href": "/getting-started/dev",
-    "content": "Getting started as a developer ODS Lime can be used as library of React components or as a platform independent CSS/JS UI framework. The only purpose of using React is to enable the use of JSX as a templating laguage. All interactions are implemented in plain JavaScript, which manipulates the DOM outsite React environment. This approach helps us to rapidly deliver HTML prototypes. Component documentation provides both HTML and JSX code examples. Conventions Mobile first All CSS is mobile first - default styles are applied for any screen size and overriden using a media query only when they need to be different on a larger viewport. BEM & utilities We use BEM for naming components. Component CSS should apply all styles needed to render it's default state and all possible variants. Components should never require utility classes to achieve their designs. This rule can be broken for complex components/widgets, which contain other components (e.g. removing bottom margin from a button inside an accordion with advanced layout) CSS Layers ODS uses CSS layers to organize and manage cascade and specificity. The three main layers are: - base - Reset styles, global typography, and foundational element styles - components - Component-specific styles following the BEM methodology - utilities - Utility classes for common styling patterns and overrides This layering ensures that styles cascade predictably, with components providing default styling and utilities available for special cases without specificity conflicts. JSFiddle playground For a quick ODS playground/demo area, you can run and edit a fiddle. The fiddle runs the latest release candidate. Installation / usage Npm and a module bundler Although Lime components are written in React, you don't need React to use their styles and interaction javascript. Install the package: npm install @orangesk/orange-design-system. Then, import the CSS and JS layers you need. A typical setup includes all three layers: Manual download Copy the CSS and JS files from the @orangesk/orange-design-system/build/lib/ folder to your project and include them in your HTML: Fonts You'll need to supply your own @font-face rules and provide a path to HelvNeueOrange typeface. Samples and best practices for font-family declaration are available in Typeface docs. Quick setup: Use a simple fallback stack without system font keywords: Required HTML document structure If you do not intend to use Modal and Tooltip, you can skip this part. Modal and Tooltip javascript requires that your HTML document is structured in a certain way. This enables Tooltips to overflow their scrollable containers and prevents Modal overscroll. To achieve this, there are three container divs: 1. #root - holds all markup 2. #root-tooltips - all tooltip dialogs are moved here on init 3. #root-modals - all modal dialogs are moved here on init Examlpe:"
-  },
-  {
-    "href": "/getting-started",
-    "content": "export const routes = [ // { // title: 'Design', // emoji: '🎨', // path: 'design', // description: 'Figma library, brand guidelines and UI kit', // }, { title: \"Develop\", emoji: \"⌨️\", path: \"dev\", description: \"How to use component library and CSS aproach\", }, // { // title: 'Write', // emoji: '📣', // path: 'copy', // description: '', // }, { title: \"Resources\", emoji: \"🗄\", path: \"resources\", description: \"Handy links for quick reference\", }, { title: \"Support\", emoji: \"🧯\", path: \"support\", description: \"How to get support, report bugs and request new features\", }, ]; Getting started {routes.map(({ title, emoji, path, description }) => ( {emoji} <h2 className=\"h3 bold mb-small\"> {title} </h2> <p>{description}</p> ))}"
-  },
-  {
-    "href": "/getting-started/resources",
-    "content": "Resources Codebase - NPM package - Github repo HTML prototypes - Web - Eshop - Ecare Figma - Figma library - components - Figma library - shared styles - Figma library - patterns Group - Brand website - Group Desgin website - Group Design System"
-  },
-  {
-    "href": "/getting-started/support",
-    "content": "Get support - Write your question to #ods on Slack - Contact the team members directly either on slack or via email - Use the request form"
-  },
-  {
-    "href": "/javascript/modules",
-    "content": "Javascript modules Some ODS components require javascript to enable user interaction. Each interactive component is available as a CommonJS module. The build package also contains a main file that includes and initializes all modules with their default config. Main file Include build/static.js at the bottom of your page, just before the closing body tag. This will include and init all interaction javascript on DOMContentLoaded and dispatch ODSLoaded CustomEvent to window. CommonJS modules Import just the stuff you need and initialize manually. Requires your own build step. Access modules and their instances through window.ODS When using the main file, references to all modules and ther instances are stored in window.ODS. All modules are stored in window.ODS.modules. All instances are stored in window.ODS.instances Access instance through element Each module creates a property on the element it is initialized on. The property name always starts with ODS followed by the module name (e.g. ODSAccordion). List of interactive JS modules - Accordion - Autocomplete - Datepicker - Dropdown - Expander - BlockAction - Carousel - CarouselPromotions - InputStepper - FeatureAccordion - File - Loader - Modal - RangeSlider - SameHeight - Table - Tabs - Toggle - Tooltip"
-  },
-  {
-    "href": "/javascript/same-height",
-    "content": "// Same height Iterates through direct children of element with attribute data-same-height. Next, it finds elements with attribute data-same-height-child within these children (only 1 element per child). Then it assigns height of the tallest element to every element with data-same-height-child in same row. Rows are based on offset from top of page, so only elements with equal offsetTop will have same height. Height of element with data-same-height-child is updated on resize of screen. export const titles = [ \"Short title\", \"Looooooooooot, but I mean a looooooot longer title, but not that long\", \"Next title will be even longer\", \"Loooooooooot, but I mean really long title. Maybe not the longest title you have ever seen, but definitely longer that average title. It's even made out of multiple sentences.\", \"Last short title\", ]; <h2 className=\"bold\">How it works?</h2> {titles.map((title, index) => ( <h3 data-same-height-child> {index + 1} {title} </h3> <p>Short description</p> ))} Multiple Same Height Groups You can now use multiple data-same-height-child elements within a single column. Elements at the same vertical position will have their heights equalized. If you need to create separate groups of height-matched elements, use the data-same-height-group attribute to specify which group an element belongs to: <h3 data-same-height-child data-same-height-group=\"titles\"> {\"Title 1\"} </h3> <p data-same-height-child data-same-height-group=\"descriptions\"> {\"Short description\"} </p> <div data-same-height-child data-same-height-group=\"buttons\"> Action </div> <h3 data-same-height-child data-same-height-group=\"titles\"> {\"A much longer title that spans multiple lines\"} </h3> <p data-same-height-child data-same-height-group=\"descriptions\"> {A much longer description with more content. This will be matched in height with other elements in the same group that appear at the same vertical position.} </p> <div data-same-height-child data-same-height-group=\"buttons\"> Action Another Action </div> Complex Layout data-same-height won't solve every issue with more complex layout, for example in cards. More ofter than not, besides using .cardsection--fill, you will have to use vertical bar layout combined with classes like .justify-content-. <h3 className=\"bold\">Short title</h3> Text <p> {\"this section has\"} <b>justify-content-space-between</b> </p> I'm at bottom <h3 className=\"bold\"> {Loooooooooot, but I mean a looooooot longer title, but not thaaat long... And this card has no icon!} </h3> Text <p className=\"mb-small\"> {\"this section has\"} <b>justify-content-space-between</b> </p> <p className=\"mb-small\">and multiple paragraphs</p> <p>so space in first card is visible</p> I'm at bottom <h3 className=\"bold\"> {This title is little bit shorter but quite a lot longer than first title} </h3> <p className=\"mb-xsmall\"> {\"this section has\"} <b>justify-content-end</b> </p> I'm still at bottom Within Carousel data-same-height now works with carousels! Add data-same-height to the carousel element and use data-same-height-child with data-same-height-group on elements inside the carousel items. Each group will equalize heights within visible slides, and heights are recalculated when the carousel slides to new items. ( <h3 className=\"h3\">{card.title}</h3> <p>{card.description}</p> <p className=\"h1 bold normal mb-large\"> {card.price} <span className=\"large bold\"> €</span> </p> Aktivovať Podrobné informácie ))} /> JS module reference All elements with [data-same-height] attribute are initialized automatically. Custom initialisation Methods"
-  },
-  {
-    "href": "/javascript/toggle",
-    "content": "import Button from \"@/docs/utils/ToggleButton\"; Toggle Toggle is a handy module used for toggling attribute values, class names, text content and icons on any element with a click. To start toggling, you need a trigger and a target (or multiple targets). Settings are passed into data-toggle attribute of the trigger element as an array of objects. Each setting object holds information about how to find targets, which attribute should be toggled and a new value. Toggle attributes Class name Specified class name is added/removed to/from the target element. The example toggles .bold utility class on the example target <p id=\"class-toggle-example\">example</p> {\"Toggle class\"} Accessible expand button This is a standard show/hide (expand) situation when you need to show/hide elements on click. This method utilizes aria-controls and aria-expanded and hidden attributes to provide meaningful information for screenreader users. Button setup - set aria-controls attribute to element ids separated by a space - example: (aria-controls=\"id1 id2 id3\") - set aria-expanded attribute - example: (aria-expanded=\"true|false\" depending on elements visibility) Elements setup - hide elements with hidden attribute export const IconButton = (props) => ( ); {\"More info below\"} <p id=\"to-be-expanded-1\" hidden> {\"expanded 1\"} </p> <p id=\"to-be-expanded-2\" hidden> {\"expanded 2\"} </p> <p id=\"to-be-expanded-3\" hidden> {\"expanded 3\"} </p> Text Text content of the target element is being switched between the original and that defined in value. <p id=\"text-toggle-target\">Toggle off</p> {\"Toggle text\"} It might be necessary only to toggle a portion of the target element, especially if it contains other descendants (e.g. icons). This is solved by wrapping the text content inside a span with [data-toggle-text-target] attribute. <p id=\"text-toggle-target-2\"> <span data-toggle-text-target>Toggle off</span> </p> {\"Toggle text\"} Icon Switches xlink:href attribute of the first found <use> element inside the target element. <p> </p> {\"Toggle icon\"} Attribute value Switches the specified attribute value. <p id=\"title-toggle-target\" title=\"toggle off\"> {\"Title attribute toggle target\"} </p> {\"Toggle title attribute\"} Boolean value attribute Switches between boolean values on the specified value. Notice the omited value in data-toggle config. <p id=\"aria-expanded-toggle-target\" aria-expanded=\"false\"> {\"aria-expanded attribute toggle target\"} </p> {\"Toggle aria-expanded\"} Multiple attributes Each settings object only controls one attribute. To toggle multiple attributes, simply use several settings objects for the same target <p id=\"multiple-attributes-toggle-target\"> <span data-toggle-text-target>Toggle off</span> </p> {\"Toggle text, icon and class\"} Toggle actions Click Trigger a click on the specified target {\"Trigger click on the Toggle class button below\"} , <p key=\"2\" id=\"click-toggle-example-target\"> {\"example\"} </p>, {\"Toggle class\"} , ]} > {\"Trigger click on the Toggle class button below\"} <p id=\"click-toggle-example-target\">example</p> {\"Toggle class\"} Focus Focus the toggle target {\"Focus the target\"} , // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex <span key=\"2\" tabIndex=\"0\" id=\"focus-toggle-example\"> {\"example\"} </span>, ]} > {\"Focus the target\"} <span tabIndex=\"0\" id=\"focus-toggle-example\"> {\"example\"} </span> Toggle targets Selector Passing a selector (or comma delimited list of selectors) searches for all matches in the DOM. <p data-selector-based-toggle-target>Toggle off</p> {\"Toggle text\"} Self Self targets the trigger element itself. {\"Toggle off\"} Previous Previous targets the previous sibbling element. <p>Toggle off</p> {\"Toggle previous element\"} Next Next targets the next sibbling element. {\"Toggle next element\"} <p>Toggle off</p> Parent Parent targets the target's parent element. The example toggles .align-right utility class on the parent element. <div> {\"Toggle parent\"} </div> Multiple toggle targets Since data-toggle is an array of objects, it accepts multiple settings objects, which can specify multiple targets. The target property can query for multiple comma delimited declarations. To get Toggle module works properly, it is important to keep right order of specific targets, because targets are triggered one by one. <p> </p> {\"Toggle all targets\"} {\"Click to show with me hiding\"} <div className=\"hide\"> <p>I am hidden</p> {\"Reset\"} </div>"
-  },
-  {
-    "href": "/page.mdx",
-    "content": "import Container from \"@/components/Container\"; :wave: Lime: OSK Design System Lime is vault with manuals and resources for Designers, Developers, Marketers and people buildling digital experiences for Orange. The purpose of Lime is to unite user interfaces across Orange digital services and products. Read more about Lime. 📚 Resources {\"Getting started\"} {\"Design tokens\"} {\"Tone of voice\"} {\"Accessibility\"} {\"Spacing and layout\"}"
-  },
-  {
-    "href": "/utilities/aspect-ratio",
-    "content": "import Code from \"@/components/Code\"; Aspect ratio utilities Utility classes for setting up the aspect ratio of elements. Aspect ratio classes .aspect-ratio- In case of <img > element, maximum width is set by width atrribute, or by width of image, in case of unset width attribute. When container is smaller than width attribute/image width, element fills the container and height is changed, so the aspect ratio is kept. .aspect-ratio-1-1 <br /> <img alt=\"1 : 1\" width=\"400\" height=\"400\" className=\"aspect-ratio-1-1\" src=\"https://placehold.co/400x400\" /> <hr /> .aspect-ratio-4-3 <br /> <img alt=\"4 : 3\" width=\"400\" height=\"300\" className=\"aspect-ratio-4-3\" src=\"https://placehold.co/400x300\" /> <hr /> .aspect-ratio-3-2 <br /> <img alt=\"3 : 2\" width=\"400\" height=\"267\" className=\"aspect-ratio-3-2\" src=\"https://placehold.co/400x267\" /> <hr /> .aspect-ratio-16-9 <br /> <img alt=\"16 : 9\" width=\"480\" height=\"270\" className=\"aspect-ratio-16-9\" src=\"https://placehold.co/480x270\" /> <hr /> .aspect-ratio-21-9 <br /> <img alt=\"21 : 9\" width=\"630\" height=\"270\" className=\"aspect-ratio-21-9\" src=\"https://placehold.co/630x270\" /> Width and height atrributes <img > attributes. Is recommended to set at least width atrribute, because unset attribute could cause layout shift caused by change in dimensions when image is loaded. Height attribute is overriden by aspect-ratio. unset width and height <br /> <img alt=\"unset width and height\" src=\"https://placehold.co/250x250\" className=\"aspect-ratio-16-9\" /> <hr /> width set <br /> <img alt=\"width set\" src=\"https://placehold.co/250x250\" width=\"400\" className=\"aspect-ratio-16-9\" /> <hr /> width and height set <br /> <img alt=\"width and height set\" src=\"https://placehold.co/250x250\" width=\"400\" height=\"300\" className=\"aspect-ratio-16-9\" /> <iframe > atrributes. In this case is better to keep height attribute unset, because it isn't overriden by aspect-ratio like in case of <img >, and therefore height stays constant. unset width and height <br /> <iframe src=\"https://www.youtube.com/embed/sX5nov1YZ0\" title=\"video-0\" frameBorder=\"0\" allowFullScreen className=\"aspect-ratio-21-9\" /> <hr /> width set <br /> <iframe width=\"400\" src=\"https://www.youtube.com/embed/uoK7BR-Z-V8\" title=\"video-1\" frameBorder=\"0\" allowFullScreen className=\"aspect-ratio-21-9\" /> <hr /> width and height set (height isn't overriden by aspect-ratio) <br /> <iframe width=\"400\" height=\"300\" src=\"https://www.youtube.com/embed/GfT5CqrWJW0\" title=\"video-2\" frameBorder=\"0\" allowFullScreen className=\"aspect-ratio-21-9\" /> Full width and height classes .fullwidth and .fullheight Also can be used together with .aspect-ratio-* classes, for example if you want to fill up the whole container. .fullheight <br /> {\"Image fills height\"} <img alt=\"filling whole height\" className=\"aspect-ratio-21-9 fullheight\" src=\"https://placehold.co/300x100\" /> <br /> .aspect-ratio-21-9 + .fullwidth <br /> <img alt=\"21 : 9\" className=\"aspect-ratio-21-9 fullwidth\" src=\"https://placehold.co/630x270\" />"
-  },
-  {
-    "href": "/utilities/border",
-    "content": "Border <div className=\"card border\"> <div className=\"cardsection\">Default border.</div> </div> <div className=\"card border border--gray\"> <div className=\"cardsection\">Gray border thanks to .border--gray</div> </div> <div className=\"card border border--orange\"> <div className=\"cardsection\">Orange border thanks to .border--orange</div> </div> <div className=\"card border border--gray is-invalid\"> <div className=\"cardsection\">Combination of .border and .is-invalid</div> </div> Hover state Hover state for .border--gray can be added using class .border-hover or .is-indicating. <div className=\"card border border--gray border-hover\"> <div className=\"cardsection\">Gray border with hover state</div> </div> <div className=\"card border border--gray border-hover\"> <div className=\"cardsection\"> Control <p>Gray border with hover state</p> </div> </div> Border radius <div className=\"card border border-radius--medium\"> <div className=\"card__section\"> Border has radius thanks to class .border-radius--medium </div> </div>"
-  },
-  {
-    "href": "/utilities/color",
-    "content": "import Code from \"@/components/Code\"; Color Utilities Utility classes for applying colors based on our semantic design tokens. These classes automatically adapt to light and dark themes. 📖 For complete color system documentation, including theme switching and color philosophy, see our Color Palette & Theme System guide. ⚠️ Always check that your color combinations meet WCAG accessibility guidelines. Token-Based Utility Classes Our color utilities are automatically generated from semantic design tokens. Every class supports both light and dark themes through our .is-light and .is-dark system. Theme Switching Examples All color utilities work with our .is-light and .is-dark theme classes: <div className=\"is-light background-primary text-default p-4 border border-subtle rounded mb-4\"> <h4 className=\"bold\">Light Theme Section</h4> <p className=\"text-secondary\">Secondary text in light theme</p> <button className=\"surface-secondary text-inverse px-3 py-2 rounded\"> Orange Button </button> </div> <div className=\"is-dark background-primary text-default p-4 border border-subtle rounded\"> <h4 className=\"bold\">Dark Theme Section</h4> <p className=\"text-secondary\">Secondary text in dark theme</p> <button className=\"surface-secondary text-inverse px-3 py-2 rounded\"> Orange Button </button> </div> Text Color Utilities Use these classes to apply text colors: - .text-default - Default text color (black in light mode, white in dark mode) - .text-secondary - Secondary text color for less prominent content - .text-disabled - Disabled text color - .text-inverse - Inverse text color (white in light mode, black in dark mode) - .text-accent - Brand accent color (orange) - .text-information - Information/blue text - .text-positive - Success/green text - .text-warning - Warning/yellow text - .text-negative - Error/red text <p className=\"text-default\">Default text color</p> <p className=\"text-secondary\">Secondary text color</p> <p className=\"text-disabled\">Disabled text color</p> <p className=\"background-contrast text-inverse\"> {\"Inverse text color on dark background\"} </p> <p className=\"text-accent\">Accent text color</p> <p className=\"text-information\">Information text color</p> <p className=\"text-positive\">Success text color</p> <p className=\"text-warning\">Warning text color</p> <p className=\"text-negative\">Error text color</p> Icon Color Utilities Use these classes to apply colors to icons: - .icon-default - Default icon color - .icon-inverse - Inverse icon color - .icon-brand - Brand orange color - .icon-accent - Accent color variation - .icon-disabled - Disabled icon color - .icon-information - Information/blue color - .icon-positive - Success/green color - .icon-warning - Warning/yellow color - .icon-negative - Error/red color <span className=\"icon-default\"> </span> <span className=\"icon-inverse\"> </span> <span className=\"icon-brand\"> </span> <span className=\"icon-information\"> </span> <span className=\"icon-positive\"> </span> <span className=\"icon-warning\"> </span> <span className=\"icon-negative\"> </span> Background Utilities Primary Backgrounds - .background-primary - Primary background (white in light mode, dark in dark mode) - .background-secondary - Secondary background for subtle contrast - .background-contrast - High contrast background - .background-accent - Accent background for special content - .background-accent1-blog - Blog accent 1 background - .background-accent2-blog - Blog accent 2 background <p className=\"background-primary\">Primary background</p> <p className=\"background-secondary\">Secondary background</p> <p className=\"background-contrast text-inverse\">Contrast background</p> <p className=\"background-accent\">Accent background</p> <p className=\"background-accent1-blog\">Accent 1 Blog background</p> <p className=\"background-accent2-blog\">Accent 2 Blog background</p> Surface Utilities - .surface-primary - Primary surface - .surface-secondary - Brand orange surface - .surface-tertiary - Dark orange surface - .surface-subtle - Subtle surface for grouping - .surface-moderate - Moderate surface - .surface-contrast - High contrast surface - .surface-accent - Accent surface <p className=\"surface-primary\">Primary surface</p> <p className=\"surface-secondary text-inverse\">Secondary surface</p> <p className=\"surface-tertiary text-inverse\">Tertiary surface</p> <p className=\"surface-subtle\">Subtle surface</p> <p className=\"surface-moderate\">Moderate surface</p> <p className=\"surface-contrast text-inverse\">Contrast surface</p> <p className=\"surface-accent\">Accent surface</p> Fill Utilities - .fill-primary - Primary fill color - .fill-secondary - Secondary fill color (brand orange) - .fill-tertiary - Tertiary fill color (dark orange) - .fill-subtle - Subtle fill color - .fill-moderate - Moderate fill color - .fill-disabled - Disabled fill color - .fill-contrast - Contrast fill color - .fill-accent1 - Blue accent fill - .fill-accent2 - Green accent fill - .fill-accent3 - Pink accent fill - .fill-accent4 - Violet accent fill - .fill-accent5 - Yellow accent fill - .fill-information - Information background - .fill-positive - Success background - .fill-warning - Warning background - .fill-negative - Error background <p className=\"fill-primary\">Primary fill</p> <p className=\"fill-secondary text-inverse\">Secondary fill</p> <p className=\"fill-tertiary text-inverse\">Tertiary fill</p> <p className=\"fill-subtle\">Subtle fill</p> <p className=\"fill-moderate\">Moderate fill</p> <p className=\"fill-disabled\">Disabled fill</p> <p className=\"fill-contrast text-inverse\">Contrast fill</p> <p className=\"fill-accent1 text-inverse\">Blue accent fill</p> <p className=\"fill-accent2 text-inverse\">Green accent fill</p> <p className=\"fill-accent3 text-inverse\">Pink accent fill</p> <p className=\"fill-accent4 text-inverse\">Violet accent fill</p> <p className=\"fill-accent5 text-inverse\">Yellow accent fill</p> <p className=\"fill-information\">Information background</p> <p className=\"fill-positive\">Success background</p> <p className=\"fill-warning\">Warning background</p> <p className=\"fill-negative\">Error background</p> Border Utilities Use these classes to apply border colors: - .border-subtle - Subtle border - .border-strong - Strong border - .border-contrast - High contrast border - .border-accent - Brand accent border - .border-information - Information border - .border-positive - Success border - .border-warning - Warning border - .border-negative - Error border <div className=\"border border-subtle p-4 mb-small\">Subtle border</div> <div className=\"border border-strong p-4 mb-small\">Strong border</div> <div className=\"border border-contrast p-4 mb-small\">Contrast border</div> <div className=\"border border-accent p-4 mb-small\">Accent border</div> <div className=\"border border-information p-4 mb-small\"> Information border </div> <div className=\"border border-positive p-4 mb-small\">Success border</div> <div className=\"border border-warning p-4 mb-small\">Warning border</div> <div className=\"border border-negative p-4\">Error border</div> Legacy Classes (Deprecated) ⚠️ These classes are deprecated and will be removed in future versions. Please use the new token-based classes above. Legacy Text Colors These classes still work but will show deprecation warnings: .color-black → Use .text-default <p>Default text color is black</p> <p className=\"color-black\"> {\"But can be enforced with \"} <code>.color-black</code> {\" if needed. (Deprecated - use .text-default)\"} </p> .color-orange → Use .text-accent <p className=\"color-orange large bold\"> {\"Orange text (Deprecated - use .text-accent)\"} </p> .color-white → Use .text-inverse <p className=\"bg-black color-white\"> {\"White text (Deprecated - use .text-inverse)\"} </p> .color-gray → Use .text-secondary <p className=\"color-gray\">Gray text (Deprecated - use .text-secondary)</p> .color-blue → Use .icon-information <p className=\"color-blue\">Blue text (Deprecated - use .icon-information)</p> .color-danger → Use .icon-negative <p className=\"color-danger\">Danger text (Deprecated - use .icon-negative)</p> Legacy Background Colors These classes still work but will show deprecation warnings: .bg-white → Use .background-primary <p className=\"bg-white\"> {\"Default background (Deprecated - use .background-primary)\"} </p> .bg-black → Use .background-contrast <p className=\"bg-black\"> {\"Black background (Deprecated - use .background-contrast)\"} </p> .bg-orange → Use .surface-secondary <p className=\"bg-orange\"> {\"Orange background (Deprecated - use .surface-secondary)\"} </p> .bg-orange-dark → Use .surface-tertiary <p className=\"bg-orange-dark text-inverse\"> {\"Dark orange background (Deprecated - use .surface-tertiary)\"} </p> .bg-gray → Use .surface-subtle <p className=\"bg-gray\">Gray background (Deprecated - use .surface-subtle)</p> .bg-gray-lighter → Use .background-secondary <p className=\"bg-gray-lighter\"> {\"Light gray background (Deprecated - use .background-secondary)\"} </p> Accent Colors → Use .background- or .fill- <p className=\"bg-accent\"> {\"Accent background (Deprecated - use .background-accent)\"} </p> <p className=\"bg-accent1-blog\"> {\"Accent1 blog (Deprecated - use .background-accent1-blog)\"} </p> <p className=\"bg-accent2-blog\"> {\"Accent2 blog (Deprecated - use .background-accent2-blog)\"} </p> Supporting Colors → Use .fill-accent <p className=\"bg-blue\">Blue background (Deprecated - use .fill-accent1)</p> <p className=\"bg-green\">Green background (Deprecated - use .fill-accent2)</p> <p className=\"bg-pink\">Pink background (Deprecated - use .fill-accent3)</p> <p className=\"bg-violet\"> {\"Violet background (Deprecated - use .fill-accent4)\"} </p> <p className=\"bg-yellow\"> {\"Yellow background (Deprecated - use .fill-accent5)\"} </p> <p className=\"bg-red\">Red background (Deprecated - use .fill-negative)</p> Migration Guide When updating your code, use this mapping: Text Colors - .color-black → .text-default - .color-orange → .text-accent - .color-white → .text-inverse - .color-gray → .text-secondary - .color-blue → .icon-information - .color-danger → .icon-negative Background Colors - .bg-white → .background-primary - .bg-black → .background-contrast - .bg-orange → .surface-secondary - .bg-orange-dark → .surface-tertiary - .bg-gray → .surface-subtle - .bg-gray-lighter → .background-secondary - .bg-blue → .fill-accent1 - .bg-green → .fill-accent2 - .bg-pink → .fill-accent3 - .bg-violet → .fill-accent4 - .bg-yellow → .fill-accent5 - .bg-red → .fill-negative - .bg-accent → .background-accent - .bg-none → .background-none .bg-none → Use .background-none <p className=\"bg-none\">No background (Deprecated - use .background-none)</p> Special Utilities - .background-none - Removes background Best Practices 1. Use semantic names: Choose classes based on meaning rather than visual appearance 2. Consider theme compatibility: All token-based classes automatically adapt to light/dark themes 3. Test accessibility: Always verify color contrast meets WCAG guidelines 4. Migrate gradually: Legacy classes still work but show warnings to help with migration 5. Use border utilities: Apply consistent border colors using the new .border- classes 📖 For detailed guidance on theme switching, CSS variables, and color system architecture, see our Color Palette & Theme System documentation. Related Documentation - Color Palette & Theme System - Complete color system guide - Design Tokens - Token system overview - Accessibility - Color accessibility guidelines"
-  },
-  {
-    "href": "/utilities/flex-alignment",
-    "content": "import React from \"react\"; import \"@/styles/base/styleguide.scss\"; export const containerAlignment = { horizontal: [\"start\", \"end\", \"center\", \"space-around\", \"space-between\"], vertical: [\"start\", \"end\", \"center\"], }; export const childrenAlignment = { horizontal: [\"left\", \"center\", \"right\"], vertical: [\"top\", \"middle\", \"bottom\"], }; Flex alignment utilities <p className=\"mb-none\"> <b>Flexbox containers only</b> {\"Flex alignment works only in flexbox (\"} <code>display: flex</code> {) containers. Make sure you are in a correct container, otherwise these won't work.} </p> These examples are using the Grid component as a base container. Other examples could be Bar, Card, List just to name a few. Container alignment Use .justify-content- and .align-items- on container to align its children as a group. When flex-direction is set to row (default) justify flex-represents horizontal alignment and flex-align vertical alignment. With exception of Tile, all components have default (row) direction. Justify Used for horizontal alignment in most components. export const ContainerHorizontal = () => ( {containerAlignment.horizontal.map((position, index) => { const isFirst = index === 0; const positionClass = justify-content-${position}; return ( {!isFirst && <hr />} <code>{.${positionClass}${isFirst ? \" (default)\" : \"\"}}</code> <code>Lorem ipsum</code> <code>Lorem ipsum</code> </React.Fragment> ); })} ); Align Used for vertical alignment in most components. export const ContainerVertical = () => ( {containerAlignment.vertical.map((position, index) => { const isFirst = index === 0; const positionClass = align-items-${position}; return ( {!isFirst && <hr />} <code>{.${positionClass}${isFirst ? \" (default)\" : \"\"}}</code> <code> { \"Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.\" } </code> <code>Lorem ipsum</code> </React.Fragment> ); })} ); Children alignment Use .align-self- on a child element to align it separately. Horizontal export const ColumnHorizontal = () => ( {childrenAlignment.horizontal.map((position, index) => { const isFirst = index === 0; const positionClass = align-self-${position}; return ( {!isFirst && <hr />} <code>{.${positionClass}${isFirst ? \" (default)\" : \"\"}}</code> </React.Fragment> ); })} ); Vertical export const ColumnVertical = () => ( <code> {\"Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.\"} </code> {childrenAlignment.vertical.map((position, index) => { const isFirst = index === 0; const positionClass = align-self-${position}; return ( <code>{.${positionClass}${isFirst ? \" (default)\" : \"\"}}</code> ); })} ); Order .align-self-last and .align-self-last-[breakpoint] moves a flexbox child to the end of the container. 🚨 Potential accessibility risk**: This utility should only be used when the order of elements does not matter. Re-ordering elements can break natural flow for keyboard and assistive technology users. <code>Column 1 aligned to the end</code> <code>Column 2</code> Responsive modifiers You can use responsive modifiers to apply alignment classes at different breakpoints. For example, use .justify-content-start--md to apply the justify-content-start class at the md breakpoint and above. The same applies to vertical alignment classes like .align-self-top--md and text alignment classes like .align-middle--md. <code>Column centered on medium screens and above</code>"
-  },
-  {
-    "href": "/utilities/horizontal-scroll",
-    "content": "Horizontal scroll Enable/disable horizontal scrolling on per-breakpoint basis to create a carousel-like experience with slide snapping and styled scrollbars. Works with flexbox layout components such as Grid and Bar. {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => ( <code>{${i}}</code> ))} Responsive behavior Add .horizontal-scroll--[breakpoint] to enable and .horizontal-scroll--[breakpoint]-disable to disable. The following preview has scrolling enabled on viewports larger than md, disabled on xl and enabled again on xxl. {[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ].map((i) => ( <code>{${i}}</code> ))} Recommendations & known bugs The scroll area should always display a portion of the next item. This behavior is essential for basic usability, especially on small viewports, as it provides users with a visual cue of what to expect next. To implement this, developers should ensure that the scroll area is designed to show at least a quarter of the subsequent slide, as it is in Carousel. This will help guide users as they navigate through the content. Additionally, since iOS hides the scrollbar when there is no interaction and does not support custom scrollbar styles, having a visible indication of the next slide can enhance user experience and encourage interaction."
-  },
-  {
-    "href": "/utilities/layout",
-    "content": "Layout utilities Display Change an element's default display value - .d-block - applies display: block; - .d-inline-block - applies display: inline-block; - .d-inline - applies display: inline; - .d-flex - applies display: flex; - .d-inline-flex - applies display: inline-flex; Flexbox Direction Control the direction of flex items - .flex-column - applies flex-direction: column; to arrange flex items vertically Width - .fullwidth - applies width: 100%; - .fullwidth-xs-only - applies width: 100%; on extra small screens only Height - .fullheight - applies height: 100%; Alignment - center-block - applies margin-left: auto; margin-right: auto; Position - .relative - applies position: relative; - .absolute - applies position: absolute;"
-  },
-  {
-    "href": "/utilities/ordering",
-    "content": "import breakpoint from \"@/styles/export/breakpoint.js\"; export const breakpointNames = Object.keys(breakpoint); export const breakpointsLength = breakpointNames.length; export const breakpointFirst = breakpointNames[0]; export const breakpointLast = breakpointNames[breakpointsLength - 1]; Ordering utilities Use ordering utility classes to control the visual order of flex/grid items responsively. These classes set the CSS order property for a given breakpoint, allowing you to rearrange elements for different screen sizes. At the moment, only the order values 0-2 are supported. <ul> <li> <code>.order-1-{\"{breakpoint}\"}</code> sets <code>order: 1</code> from the specified breakpoint and up </li> <li> <code>.order-2-{\"{breakpoint}\"}</code> sets <code>order: 2</code> from the specified breakpoint and up </li> <li> <code>.order-1-{\"{breakpoint}\"}-only</code> sets <code>order: 1</code>{\" \"} only at the specified breakpoint </li> <li> <code>.order-2-{\"{breakpoint}\"}-only</code> sets <code>order: 2</code>{\" \"} only at the specified breakpoint </li> </ul> <p className=\"mb-none\">First, but unordered</p> <p className=\"mb-none\">Second, but last</p> <p className=\"mb-none\">Third, but first</p> Responsive ordering classes You can programmatically change the order of elements for specific breakpoints: - <code>.order-1</code> and <code>.order-2</code> apply <code>order: 1</code> and <code>order: 2</code> by default (for the smallest breakpoint <b>xs</b> and up). - <code>.order-1-[breakpoint]</code> and <code>.order-2-[breakpoint]</code> apply the order for the specified breakpoint and up (e.g., <code>.order-1-md</code> applies from <b>md</b> and larger). - <code>.order-1-[breakpoint]-only</code> and <code>.order-2-[breakpoint]-only</code> apply the order only for the specified breakpoint (e.g., <code>.order-2-lg-only</code> applies only at <b>lg</b>). <b>Note:</b> There are no <code>.order-1-xs</code> or <code>.order-2-xs</code> classes. For the smallest breakpoint, use <code>.order-1</code> or <code>.order-2</code> without a suffix. {breakpointNames.map((bp) => ( <div className=\"l-debug mb\"> <strong>{bp === 'xs' ? 'Default (xs)' : bp.toUpperCase()} breakpoint</strong> </div> Unordered example: <p className=\"mb-none\">1st</p> <p className=\"mb-none\">2nd</p> <br/> Ordered example: <p className=\"mb-none\"> 1st <code>order-2-lg</code> </p> <p className=\"mb-none\"> 2nd </p> <br/> Ordered only at breakpoint <b>LG</b> <p className=\"mb-none\"> 1st <code>order-2-lg-only</code> </p> <p className=\"mb-none\"> 2nd </p> ))}"
-  },
-  {
-    "href": "/utilities/skip-link",
-    "content": "Skip link Provides keyboard users to skip parts of a webpage. Usually a skip link is used as a first element of a page and points to main content. This allows users to skip main navigation and dive into subject matter of the requested page. The link is visually hidden until it's focused by keyboard. Example <div id=\"example-skip-link-target\">Skip link target element</div>"
-  },
-  {
-    "href": "/utilities/spacing",
-    "content": "import space from \"@/styles/export/space.js\"; import breakpoint from \"@/styles/export/breakpoint.js\"; import SpacePreview from \"@/docs/utils/SpacePreview\"; export const spaceNames = Object.keys(space).filter((name) => name !== \"none\"); export const tableHeaders = [ { key: \"name\", label: \"Name\", }, { key: \"size\", label: \"Size\", }, { key: \"visual\", label: \"Visual\", }, ]; export const tableRows = spaceNames.map((name) => ({ name, size: space[name], visual: <div className={mb-${name}} />, })); Spacing utilities Sizes Orange uses these default sizes for space distribution. <div className=\"mb-large\"> </div> Bottom margin There is only one way to create additional space and that is by adding bottom margin to elements. Bottom margin utility classes help offset elements vertically. Components have their default margins set, so use these only in special cases, when there is no other way around it. {spaceNames.map((name) => ( <div className={l-debug mb-${name}}> <strong>.mb-{name}</strong> <br />({space[name]} margin) </div> <div className=\"l-debug\">next element</div> ))} Responsive margin Use .mb-[breapoint]-[size] to set different margin size for every breakpoint. Don't use .mb-xs-[size]. It doesn't exist. Use .mb-[size] instead. It is used as default margin for XS viewports. <div className=\"h4 mb-none\"> Current breakpoint:{\" \"} {Object.keys(breakpoint).map((bp) => ( <span key={bp} className={show-${bp}-only}> {bp.toUpperCase()} </span> ))} </div> (Change viewport size to see the changes) {Object.keys(breakpoint).map((bp) => { const viewport = bp === \"xs\" ? \"\" : -${bp}; return ( <div key={bp} className={l-debug mb-large${viewport ? mb${viewport}-xlarge : \"\"}} > <strong>.mb-large{viewport && .mb${viewport}-xlarge}</strong> (large margin as default {viewport && , xlarge margin for ${bp.toUpperCase()} and bigger viewports} ) </div> ); })} Resets Resets remove existing padding/margin in the specified direction. Unlike with creating space, there is a possibility to remove space from all directions. As always, don't overuse this feature. Exception: Margin bottom can be used with breakpoints as responsive margins. - .mb-[breakpoint]-none removes bottom margin from specific [breakpoint] export const directions = [\"top\", \"right\", \"bottom\", \"left\"]; export const spacings = [\"padding\", \"margin\"]; {spacings.map((spacing) => ( <ul key={spacing}> {directions.map((direction) => ( <li key={direction}> <code>{.${spacing[0]}${direction[0]}-none}</code> removes{\" \"} {direction} {spacing} </li> ))} </ul> ))}"
-  },
-  {
-    "href": "/utilities/text",
-    "content": "import React from \"react\"; import breakpoints from \"@/styles/export/breakpoint.js\"; Text utilities Utility classes provides basic functionality such as style, color, alignment, line length or wrapping of texts. Style <b>HTML semantics</b> Always consider using semantic HTML when styling text (strong, em). <p>This is a normal text</p> <p className=\"bold\">This is a bold text</p> <p className=\"italic\">This is a italic text</p> Alignment Typography must always be left aligned. This provides consistent anchoring of the content and a uniform layout. Right alignment can be specified per breakpoint. There are some exceptions when centred text may be used. 1. Text used in stickers. 2. Labels below circular category illustrations. 3. Labels for buttons and tabs. 4. Labels below icons. 5. Right aligned images. <div className=\"align-left\">This is left alignment at its best</div> <div className=\"align-center\">Let me center this</div> {Object.keys(breakpoints).map((breakpoint) => ( <div key={breakpoint} className={align-${breakpoint}-center}> {\"Centered on viewports larger than\"} <code>{breakpoint}</code> </div> ))} <div className=\"align-right\">This is all right</div> {Object.keys(breakpoints).map((breakpoint) => ( <div key={breakpoint} className={align-${breakpoint}-right}> {\"Align right on viewports larger than\"} <code>{breakpoint}</code> </div> ))} Vertical alignment <p> {\"Align element to \"} <span className=\"h3 mb-0 align-middle\">Middle</span> </p> <p> {\"Align element to \"} <span className=\"h3 mb-0 align-top\">Top</span> </p> <p> {\"Align element to \"} <span className=\"h3 mb-0 align-bottom\">Bottom</span> </p> <p> {\"Align element to \"} <span className=\"h3 mb-0 align-baseline\">Baseline</span> </p> Text Decoration Control the underline decoration of text elements and links. <div> <p> {\"This is a normal paragraph with \"} <a href=\"/\">a link that is underlined by default</a> {\".\"} </p> <p className=\"underline\"> {\"This paragraph has the \"} <code>.underline</code> {\" class applied, forcing\"} {\" underline on all text.\"} </p> <p> {\"This is a link \"} <a href=\"/\" className=\"no-underline\"> {\"without any underline\"} </a>{\" \"} {\"using the \"} <code>.no-underline</code> {\" class.\"} </p> <h3 className=\"bold\"> <a href=\"/\" className=\"underline-hover\"> {\"Article Title - underline only on hover\"} </a> </h3> <p className=\"text-small\"> {\"The \"} <code>.underline-hover</code> { class is useful for card headings and article thumbnails where you want no underline by default but show underline on hover.} </p> </div> Reset If you struggle how to reset weight, size or decoration of the text, it's really easy. You can use .reset-font-weight, .reset-font-size or .reset-text-decoration. export const headers = [ { key: \"col1\", label: \"Produkt\", cellProps: { className: \"bold\", }, }, { key: \"col2\", label: \"Mesačne\", headCellProps: { className: \"align-right\", }, cellProps: { className: \"bold align-right\", }, }, ]; export const rows = [ { col1: ( <div className=\"reset-font-weight\">Paušál</div> <div>Go 40</div> </React.Fragment> ), col2: \"40 €\", }, { col1: \"Zľava na paušál\", col2: \"-40 €\", }, { col1: ( <div className=\"reset-font-weight\">Zariadenie</div> <div>Kalkulačka</div> </React.Fragment> ), col2: \"4 €\", }, { col1: \"Zľava za odvahu\", col2: \"-2 €\", }, ]; Line length and wrapping If you need to change width of the contained text, we have classes for that. You can use .text-narrow, .text-fullwidth, .text-nowrap or .text-ellipsis on element. When needed you can also use .text-wrap from child elements whose parent have class .text-nowrap. <p> {Default paragraph width is set to 30em (roughly 55 characters). After this width is exceeded, text starts to wrap.} </p> <p className=\"text-narrow\"> <strong>Narrow</strong> { paragraph width is set to 22em (roughly 40 characters). After this width is exceeded, text starts to wrap.} </p> <p className=\"text-fullwidth\"> <strong>Full width</strong> { paragraph has no maximum width and so it can be as long as container in which it resides. There are no limits if you don't need them.} </p> <p className=\"text-nowrap\"> {\"If you \"} <strong>don't want to wrap</strong> { you can use something like this. Text wrapping of this paragraph is not allowed.} </p> <p className=\"text-ellipsis\"> {\"Use \"} <strong>ellipsis</strong> { if you need to hide longer sentences which are overlapping the maximum width of the container.} </p>"
-  },
-  {
-    "href": "/utilities/visibility",
-    "content": "import breakpoint from \"@/styles/export/breakpoint.js\"; export const breakpointNames = Object.keys(breakpoint); export const breakpointsLength = breakpointNames.length; export const breakpointFirst = breakpointNames[0]; export const breakpointLast = breakpointNames[breakpointsLength - 1]; Visibility utilities If we need to change the visibility of an element, we can do that with these utilities. Ideally, we want to use it just for special use cases, where there is no other way of implementing this behavior. <ul> <li> <code>.hide</code> {\" hides the element with \"} <code>display: none !important</code> </li> <li> <code>.invisible</code> {\" hides the element with \"} <code>visibility: hidden</code> </li> <li> <code>.visually-hidden, .sr-only</code> { hides the element from view, but remains accessible by screen readers} </li> </ul> Responsive visibility classes Programatically show or hide elements for specific breakpoints. - .show/hide-[breakpoint]-only shows/hides the element only for the specified breakpoint - .show/hide-[breakpoint] shows/hides the element for the specified breakpoint AND larger <b>className's availability</b> <ul className=\"mb-none\"> <li className=\"mb\"> <code>{.hide-${breakpointFirst}, .show-${breakpointFirst}}</code> { are not available, as } {breakpointFirst.toUpperCase()} { is the default breakpoint. To hide an element completely, use } <code>.hide</code> </li> <li className=\"mb-none\"> <code>{.show-${breakpointLast}-only, .hide-${breakpointLast}-only}</code>{\" \"} {\"are not available, as \"} {breakpointLast.toUpperCase()} { is the largest breakpoint. The same can be accomplished using } <code>{.show-${breakpointLast}, .hide-${breakpointLast}}</code> </li> </ul> <div className=\"l-debug mb\"> {\"Active breakpoint: \"} {breakpointNames.map((name) => ( <strong key={name} className={show-${name}-only}> {name.toUpperCase()} </strong> ))} </div> {breakpointNames.map((bp, index) => ( <strong className=\"h5 align-right\">{bp.toUpperCase()}</strong> {index > 0 && ( <div className={show-${bp}}> <code>{.show-${bp}}</code> {\" Your screen is \"} <strong>{bp.toUpperCase()}</strong> {\" or larger\"} </div> )} {index + 1 < breakpointsLength && ( <div className={show-${bp}-only}> <code>{.show-${bp}-only}</code> {\" Your screen is larger than \"} <strong>{bp.toUpperCase()}</strong> {\" and smaller than \"} <strong>{breakpointNames[index + 1].toUpperCase()}</strong> </div> )} {index > 0 && ( <div className={hide-${bp}}> <code>{.hide-${bp}}</code> {\" Your screen is smaller than \"} <strong>{bp.toUpperCase()}</strong> </div> )} {index + 1 < breakpointsLength && ( <div className={hide-${bp}-only}> <code>{.hide-${bp}-only}</code> {\" Your screen is \"} {index > 0 && ( <span> {\"either smaller than \"} <strong>{bp.toUpperCase()}</strong> or{\" \"} </span> )} {\"larger than \"} <strong>{breakpointNames[index + 1].toUpperCase()}</strong> </div> )} ))}"
-  }
-]