Explore Patterns
DisplayOnDeviceUse to select if an element should be loaded in a specific device. Especially helpful to avoid too much data being loaded in mobile devices.
Usage
Set up the content of the pattern and then change the devices where it will be displayed.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
No
MoveOnDeviceDefine the target container for several elements in different devices without duplicating them, i.e. place a search bar on Desktop header but for Tablet and Phone, display on the offcanvas menu.
Usage
Place your content on the placeholder and configure where will it be dispayed on tablet and phone.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
LoadOnVisibleLoads the content only when it is close to be displayed on the viewport, a good method to prevent high loading times before the page is ready.
Usage
Place this Web Block on your Web Screen and fill it with your content.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
No
ResponsiveImagesLoad different images depending on the current device, perfect to change to high DPI images in modern devices.
Usage
Just drop each image in the corresponding device placeholder, this pattern will only load the image for the current device.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
No
ResponsiveTableRecordsMakes table rows stack on top of each other in phone.
Usage
Add this Web Block to the screen and place a table records in the placeholder.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
ToggleOnDeviceCan hide content for specific devices and creates a link to expand it.
Description
Bring the content in the placeholder and then set in which devices it will be hidden. If the content is hidden, there will be a link to show it.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
No
VISIT OUR FORUM
POST FEEDBACK
REPORT ISSUE
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.
Click here to see your activities