Components

Component Status What Ready, Draft and Deprecated mean, and the current status of every component. AccordionDraft <nbhd-accordion> Accordion organizes collapsible Accordion Item components, providing consistent layout, styling, and accessibility for… Accordion ItemDraft <nbhd-accordion-item> An Accordion Item is a single expandable section with its own header and content, used within an Accordion. Autosuggest <nbhd-autosuggest> The Autosuggest component enhances the search experience by dynamically presenting relevant suggestions in a flyout… Badge <nbhd-badge> A small label for short status or highlight text, with optional prefix and suffix content. Breadcrumb <nbhd-breadcrumb> A navigation component that displays the current page's location in a hierarchical structure, allowing users to navigate… Button <nbhd-button> A button component with multiple variants (primary, secondary, tertiary, icon, unstyled) and form integration support. Card <nbhd-card> A card displays related information in a concise, visually grouped container. Card List <nbhd-card-list> Collection of card items that can contain a brief description, an image, and a call to action. CarouselDraft <nbhd-carousel> A carousel allows users to browse through a series of content items one at a time with navigation controls and optional… Carousel ItemDraft <nbhd-carousel-item> A carousel item component that displays individual slides within a carousel container, supporting content-based layouts… Checkbox <nbhd-checkbox> A checkbox component that lets users select or deselect an option. Container <nbhd-container> Container is a layout wrapper component that provides max-width constraint and padding. Content BlockDraft <nbhd-content-block> Content Block is a layout container that wraps content within a constrained container and provides slots for an eyebrow… CTA <nbhd-cta> Call to Action feature on a component that links to another page or section. DialogDraft <nbhd-dialog> A modal dialog for presenting focused content, confirmation flows, and action panels with keyboard focus trapping… Filters <nbhd-filters> Filters component provides a user-friendly interface for refining search or data results. Finish <nbhd-finish> A visual component for displaying color swatches. Flex <nbhd-flex> A flexible layout component for arranging child elements with customizable spacing and alignment options. Headline Content <nbhd-headline-content> Headline Content is a designed to contain brief introductory content that is centered aligned by default. Hero Split <nbhd-hero-split> Component that contains either a video or image as a visual complement to the content. Humongotron <nbhd-humongotron> Main featurette component with attention grabbing features. Image <nbhd-image> Image component that utilizes Widen APIs for formatting and optimization. Input <nbhd-input> A customizable text input component for collecting user data with support for various input types, validation, and… Jumbotron <nbhd-jumbotron> Main featurette component with attention grabbing features Link <nbhd-link> Basic link component with no additional styling. List <nbhd-list> A simple list component. Minitron <nbhd-minitron> Minitron is a feature component that shares many of the same features as Jumbotron, just in a miniature presentation. Navbar <nbhd-navbar> in progress... Pagination <nbhd-pagination> The Pagination component enables users to navigate through large sets of data by dividing content into discrete pages. Pagination Search <nbhd-pagination-search> A pagination component with additional search sorting functionality. Product Card <nbhd-product-card> Product Card is a compact tile of information about a product. Radio <nbhd-radio> A radio button component that allows users to select one option from a group of mutually exclusive choices. Radio Group <nbhd-radio-group> Groups radio buttons into a single choice with one tab stop and arrow-key navigation. Range <nbhd-range> A slider control that allows users to select a value within a specified range. Search <nbhd-search> A search input component that allows users to enter and submit search queries. Select <nbhd-select> A customizable dropdown component that allows users to select one or more options from a list. Spinner <nbhd-spinner> Spinner is used to indicate that a process is ongoing, such as loading data or performing an action. It provides visual… Text <nbhd-text> Text component for rendering various text styles and HTML tags. UploadDraft <nbhd-upload> A file upload field with drag and drop, file type and size limits, and a list of selected files. Video <nbhd-video> Video element component. This component only supports video from Widen. Video Player <nbhd-video-player> A simple video player component that can contain contextual content below the video. Visually HiddenDraft <nbhd-visually-hidden> Visually Hidden hides content on screen while keeping it available to screen readers and other assistive technology. Use…