Explore Patterns
AccordionArrange the content by having vertically stacked tabs that expand when clicked. This is an effective way to display aditional information.
Usage
Add the Accordion Web Block on your Web Screen and as many AccordionItems as you need inside the Accordion. There are also Accordions ready for 3, 4 and 5 items that only need to be placed on the screen. To add content simply use the title and content placeholders.
Browser Support
Modern Browsers
IE8+
Modern Devices 
Offline Support  
Yes
AlertAlert messages give feedback after different types of actions like: Success, Warning, Error or Info.
Usage
Write the message on the placeholder and set the alert type in the Web Block properties.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
BalloonSet up a Balloon to show additional content after clicking or hovering an element of your choice.
Usage
Add the content to be displayed inside the Balloon placeholder, then, configure the element and the event that will trigger the Balloon in the Web Block properties.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
BalloonFooterSet up a Balloon with a small footer to show additional content after clicking or hovering an element of your choice.
Usage
Add the content to be displayed inside the Balloon placeholder, then, configure the element and the event that will trigger the Balloon in the Web Block properties.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
BlankSlateA simple box to be presented as an empty state to the user and providing direction. Has placeholder for an Icon, text and an action button. Works great for user onboarding.
Usage
Write down your message and add an action button. To configure the Icon to be displayed, change the parameter in the Web Block properties.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
BoxDisplay content within a simple box with a customizable background color.
Usage
Place this Web Block on your Web Screen and change the content. Then, select a color from the color list, in the Web Block properties.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
BulletsAutomatically create a bullet list by filling in their placeholders.
Usage
Add text to the placeholders, the ones that remain empty will not be displayed in the browser.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
ButtonsAreaA button container that places them close to each end. Comes in handy for some action areas or footers.
Usage
Place some buttons in the placeholders for each side.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
CardBackgroundCard with a background image and placeholder for content with input parameters to configure the style of the card.
Usage
Place your content in the placeholder and set the background image parameter. You can define a custom padding, apply text shadow and choose to remove the default card style. Text_white or other color classes are useful to achieve the desired contrast between the background and the text.
Browser Support 
Modern Browsers
IE9+
Modern Devices 
Offline Support   
Yes
CardLeftImageA Card with an image on the left side and your content on the right side.
Usage
Fill in the placeholders, you can insert an image, a title and text.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
CardSimpleA simple Card with title, text and action button placeholders.
Usage
Fill in the placeholders, you can write title, some text and add action buttons.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
CardSimpleImageA simple Card with an image, text and action button placeholders horizontally aligned.
Usage
Fill in the placeholders, insert an image, text and action buttons.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
CarouselA Carousel with responsive behavior that can display multiple images or other items in any device and highly customizable.
Usage
Items on the first level after the placeholder will be separated in different items. You can have multiple containers with text and images and each container will be a carousel item. The placeholder can also have a list item providing dynamic content. You can set up how many items to be shown for each device and turn on autoplay on a slow, medium or fast pace.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
InfoA simple Tooltip displayed over an information icon.
Usage
Simply change the Tooltip text and position.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
ModalA Modal box with custom content that is displayed as an overlay in the page.
Usage
Add content to the placeholders. To trigger the modal, call a new screen action through a button with Ajax submit and use the toggleModal action to either open or close it.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
No
PanelUsed to isolate and highlight content with a title, content and optional footer inside a webscreen.
Usage
Add content on the placeholders. There is an option to add a footer and also add padding to the content by changing the ShowFooter and UseContentPadding parameters.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
PostQuickly create a conversation like interface for your users with the Post pattern.
Usage
Change the placeholders content, you can add an image and/or icon, title and text. The parameters allow the usage of a date that can be a function like CurrDateTime()
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
SectionUse it to segment and arrange blocks of content on a page. It also allows to create a Section index if you are using both patterns in the same page.
Usage
Fill in the title, actions and content placeholders. It is possible to configure a label to use with the SectionIndex pattern.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
SectionExpandableThe same features as the Section, but can be expanded when clicked.
Usage
Set up the title, actions and content placeholders. It is possible to configure a label to use with the SectionIndex pattern and set up if the Section is expanded by default when loading a new page.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
SeparatorAllows to split information with a horizontal line.
Usage
Simply drag the pattern into your screen.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
TooltipDynamic tooltip displaying simple text.
Usage
Place the Web Block next to an element, then, configure the Tooltip options to bind the element ID and the event that will trigger the Tooltip. You will also have to set up the Message to be diplayed.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
TooltipClassDynamic tooltip displaying the name of the elements with a specific class.
Usage
Place the Web Block next to the elements that will trigger it and configure the Tooltip parameters to specify the element class and the event to trigger the tooltip. The message is the the element's name.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
TooltipContainerDynamic tooltip displaying custom content from a placeholder.
Usage
Place the Web Block next to an element, then, configure the Tooltip options to bind the element ID and the event that will trigger the Tooltip. The message is set up on the content placeholder and allows for more complex information like images and/or icons.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
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