Home
Templates
Samples
Patterns
How it works
How it Works
Browse the
Patterns
Explore our pre-built patterns, which implement common UI patterns and
components that can be configured in any template.
Learn how to use our amazing Patterns in 1 minute!
66 Mobile Patterns
Components and UI patterns especially designed to address
common application use cases.
VIEW ALL
76 Web Patterns
UI patterns that serve as a starting point to create amazing
websites or landing pages.
VIEW ALL
Mobile Patterns
Adaptive
11
Columns2
Columns3
Columns4
Columns5
Columns6
ColumnsSmallLeft
ColumnsSmallRight
DisplayOnDevice
Gallery
MasterDetail
SplitScreen
Content
17
Alert
BlankSlate
Card
CardAction
CardBackground
CardItem
CardSectioned
ChatMessage
FlipContent
FloatingContent
ListItemContent
Section
SectionExpandable
SectionGroup
Tag
Tooltip
UserAvatar
Interaction
15
ActionSheet
Animate
AnimatedLabel
Calendar
Carousel
FloatingActions
HorizontalScroll
LightBoxItem
Notification
RangeSlider
RangeSliderInterval
Search
SideBar
StackedCards
Video
Navigation
6
BottomBarItem
SubMenu
Tabs
TimelineItem
Wizard
WizardItem
Numbers
6
Badge
Counter
IconBadge
ProgressBar
ProgressCircle
ProgressCircleFraction
Utilities
6
CenterContent
MarginContainer
Separator
SwipeEvents
TouchEvents
VerticalAlign
System
10
Background Colors
Buttons
Feedback Message
Form
Form Controls
Image Styles
Text Classes
Text Colors
Typography
Utility Classes
NEW
Components
6
Drag and Drop
Elasticsearch
In-App Chat
In-App Notifications
Input Masks Mobile
Pin Code
Downloads
MOBILE CHEAT SHEET
MOBILE STYLEGUIDE
DESIGN ASSETS (SKETCH)
Web Patterns
Content
22
Accordion
Alert
Balloon
BalloonFooter
BlankSlate
Box
Bullets
ButtonsArea
CardBackground
CardLeftImage
CardSimple
CardSimpleImage
Carousel
Info
LightBox
Modal
Panel
Post
Section
SectionExpandable
Separator
Tooltip
Controls
13
Buttons
ButtonDropdown
ButtonGroup
Calendar
FileUpload
IconDropdown
InlineDropdown
InputWithIcon
RangeSlider
Search
Select2
ToggleButton
Video
Data
8
Badge
Counter
IconBadge
ProgressBar
TileIcon
TileIconText
TileNumber
UserInitials
Email
3
Email3Rows
EmailSection
LayoutEmail
Layout
2
LayoutLogin
LayoutPopup
Navigation
5
BreadCrumbs
NavigationBar
SectionIndex
Tabs
Wizard
Responsive
6
DisplayOnDevice
LoadOnVisible
MoveOnDevice
ResponsiveImages
ResponsiveTableRecords
ToggleOnDevice
Structure
10
Columns2
Columns3
Columns4
Columns5
Columns6
MediumLeftColumn
MediumRightColumn
SmallLeftColumn
SmallRightColumn
Gallery
Utilities
7
CharacterCount
Fieldset
FlipContent
Iframe
ScrollToElement
StackedIcon
VerticalAlign
UsefulClasses
5
Background Colors
Image Style
System
Text
Text Colors
NEW
Components
3
Elasticsearch
In-App Chat
In-App Notifications
Downloads
WEB CHEAT SHEET
WEB STYLEGUIDE
DESIGN ASSETS (SKETCH)
Close
Device Emulation
Preview
silkui.outsystems.com
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.
Loading
Click here to see your activities