# OutSystems UI Patterns Reference Verified HTML structures scraped from the official [OutSystems UI Style Guide](https://outsystemsui.outsystems.com/StyleGuidePreview/Patterns). Notation: `tag.class1.class2` for elements, `[Block.Name]` for OutSystems block wrappers (use `data-block` attribute or just omit in visual HTML). Indentation = nesting. Content after `:` = text content. --- ## Adaptive ### Columns 2 ```html
Column 1
Column 2
``` ### Columns 3 ```html
Column 1
Column 2
Column 3
``` ### Columns 4 ```html
Column 1
Column 2
Column 3
Column 4
``` ### Columns 5 ```html
...
``` ### Columns 6 ```html
...
``` ### Columns Medium Left ```html
Wider left
Narrower right
``` ### Columns Medium Right ```html
Narrower left
Wider right
``` ### Columns Small Left ```html
Small left
Large right
``` ### Columns Small Right ```html
Large left
Small right
``` ### Column Break Variants Combine `tablet-break-*` and `phone-break-*` independently: ```html
Sidebar (full-width on phone)
Main
Aside
Card 1
Card 2
Card 3
Card 4
Main
Secondary
Full-width footer row
``` ### Display On Device Show/hide content per breakpoint. ```html
Desktop only content
Tablet only content
Phone only content
``` ### Gallery Grid gallery with auto-flowing items. ```html
Item 1
Item 2
Item 3
``` ### Master Detail Split-screen list + detail layout. ```html
``` --- ## Content ### Accordion ```html
Title
Content
Title 2
Content 2
``` ### Alert ```html ``` Variants: `alert-success`, `alert-warning`, `alert-info`, `alert-error`. ### Blank Slate Empty state placeholder. ```html
No records have been added yet
``` ### Card ```html
Content goes here
``` ### Card Background ```html
``` ### Card Item Horizontal card with left/center/right zones. ```html
Title
Subtitle
``` ### Card Sectioned ```html
Title
Description
``` ### Chat Message ```html
Scott Richie
Message text here
``` Use `chat right` for the other speaker. Add `.margin-top-m` for spacing between messages. ### Flip Content ```html
``` ### Floating Content Overlay content positioned over an image/container. ```html
``` Positions: `floating-content-top`, `floating-content-bottom`. ### List Item Content ```html
Title
Subtitle
``` ### Section ```html
Section Title
Content here
``` ### Section Group Groups multiple sections with sticky scrolling. ```html
Summary
...
Details
...
``` ### Tag ```html
Label
``` Variants: `background-primary`, `background-red`, `background-teal`, `background-green`. Shape: `border-radius-rounded` for pill shape. ### Tooltip ```html
Hover me
``` ### User Avatar ```html ``` Shape: `border-radius-rounded` for circle. --- ## Interaction ### Action Sheet Bottom sheet with action buttons (mobile pattern). ```html
``` ### Animate Entrance animations. ```html
Content that animates in
``` Variants: `bottom-to-top`, `top-to-bottom`, `left-to-right`, `right-to-left`, `fade-in`, `scale-up`. ### Animated Label Label that floats up when input is focused. ```html
``` ### Carousel Image carousel (uses Splide library). ```html
``` ### Date Picker ```html
``` ### Date Picker Range Range variant of the Date Picker (flatpickr `range` mode). Same `.osui-datepicker` wrapper with two inputs: ```html
``` ### Month Picker ```html
``` ### Time Picker ```html
``` ### Dropdown Search Searchable dropdown (uses VirtualSelect library). ```html
Select...
``` ### Dropdown Tags Multi-select with tag chips. ```html
Select...
``` ### Floating Actions FAB (Floating Action Button) with expandable items. ```html
Member
Note
``` ### Input With Icon ```html
``` Icon position: `input-with-icon-right` (icon left, default) or `input-with-icon-left`. ### Lightbox Image Clickable thumbnail that opens full-size overlay. ```html
Caption
``` ### Notification Toast notification banner. ```html
You have a new message
``` Position: `osui-notification--is-top`, `osui-notification--is-bottom`. ### Range Slider ```html
``` ### Range Slider Interval Same as Range Slider but with two handles: ```html
``` ### Scrollable Area Horizontal or vertical scrollable content. ```html
``` ### Search ```html
``` ### Sidebar Slide-in panel overlay. ```html ``` Direction: `osui-sidebar--is-right`, `osui-sidebar--is-left`. ### Stacked Cards Swipeable card stack. ```html
Card Title
Card description...
Urgent
``` ### Video ```html ``` --- ## Navigation ### Bottom Bar Item Mobile bottom navigation. ```html
Recents
Files
``` ### Breadcrumbs ```html ``` ### Overflow Menu Contextual dropdown menu triggered by ellipsis button. ```html
``` ### Pagination ```html ``` ### Section Index Anchor navigation for page sections. ```html
Personal Details Job Details Team Details
``` ### Submenu ```html
Folders
All mail Trash
``` ### Tabs ```html
Tab 1 content
Tab 2 content
Tab 3 content
``` ### Timeline Item ```html
2019
Pending Approval
This request requires your approval.
``` ### Wizard ```html
1
Personal Details
2
Address Details
``` States: `past` (completed), `active` (current), `next` (upcoming). --- ## Numbers ### Badge ```html
1
``` ### Counter ```html
26
Completed Requests
``` ### Icon Badge Icon with notification badge. ```html
1
``` ### Progress Bar ```html
``` ### Progress Circle ```html
50
``` ### Rating ```html
Rating
``` --- ## Utilities ### Align Center Vertically aligns children. ```html
SR
Scott Ritchie
``` ### Button Loading ```html ``` ### Center Content Vertically centers content with optional header/footer. ```html
``` ### Inline SVG ```html
``` ### Margin Container Adds horizontal margins to constrain content width. ```html
``` ### Separator ```html
``` Vertical: `separator-vertical`. ### Mouse Events JavaScript-driven hover-tracking pattern — attaches `mouseenter`/`mouseleave` listeners and fires platform callbacks (OnMouseEnter/OnMouseLeave). **No visual markup of its own**; wrap any content in a plain container. Cannot be replicated in static prototypes: ```html
``` ### Swipe Events JavaScript-driven gesture pattern — listens for `touchstart`/`touchmove` and fires OnSwipeLeft/Right/Up/Down callbacks. **No visual markup**; wrap content in a plain container. Not reproducible in static prototypes: ```html
``` ### Touch Events JavaScript-driven pattern — tracks `touchstart`/`touchmove`/`touchend` on an element and fires start/move/end callbacks. **No visual markup**; wrap content in a plain container. Not reproducible in static prototypes: ```html
``` --- ## Widgets ### Button ```html ``` Variants: `btn-primary`, `btn-secondary`, `btn-success`, `btn-error`. Add icon: `` before text. ### Button Group ```html
``` ### Checkbox ```html ``` ### Dropdown ```html
Selected value
``` ### Feedback Message Triggered by button clicks, styled as toast notifications. ```html ``` ### Form ```html
``` ### Input ```html ``` Input type wrappers: `input-text`, `input-email`, `input-password`, `input-search`. ### Link ```html Link text ``` ### List ```html
``` ### Popover Contextual overlay triggered by user action. ```html
``` ### Popup Modal dialog. ```html ``` ### Radio Group ```html
``` ### Switch ```html ``` ### Table ```html
Name
Job Position
Patricia Wesley Sales Manager
``` ### TextArea ```html ``` ### Upload ```html ``` --- ## Advanced ### DropdownServerSide Server-side rendered dropdown — no preview available (requires server interaction).