Browse the
 Patterns
Find out how to Leverage Sample Pages...
All
Mobile
Web
Mobile
Web
No patterns found...
Searching...
Beautiful pre-built blocks, which implement common application patterns,
to be used easily by drag-and-drop and configuration in any of the respective templates
61Mobile Patterns
VIEW ALL
74Web Patterns
VIEW ALL
Design patterns that serve as basic UI elements to use in your applications.
Mobile Patterns
Adaptive
 11
Content
 17
Interaction
 15
Navigation
 6
Numbers
 6
Utilities
 6
System
 10
Web Patterns
Content
 21
Controls
 13
Data
 8
Email
 3
Layout
 2
Navigation
 5
Responsive
 6
Structure
 10
Utilities
 7
UsefulClasses
 5
Featured
Adaptive
Content
Interaction
Navigation
Numbers
Utilities
System
StackedCards
Stacked cards for mutiple swipeable items that can be dragged to the left, right or top, firing different events.
How to use
Similar to a Carousel, add multiple containers or a List of items inside the Content placeholder. Use the Block Events to perform different actions depending on different swipe positions.
When to Use
Ideal for creating a message board or display multiple items with approve, deny and archive options.
Parameters
Aliases
ActionSheet
Option menu, which slides from the bottom, triggered by an user action.
How to use
Add the Block inside the Content placeholder in the screen layout.
When to Use
Commonly used for contextual actions or to confirm destructive user actions.
Parameters
Aliases
LightBoxItem
Display a thumbnail image and, when tapped, opens the larger image in a lightbox.
If items are configured as belonging to the same group (configured in the parameter), they become browsable by swiping.
How to use
Add the full sized and thumbnail images to the corresponding placeholders and configure if it will have Sharing Options enabled and the Group name. Items in the same group can be swiped between them.
When to Use
Highlight and view in detail images with large resolution.
Parameters
Aliases
SplitScreen
In a tablet, splits the screen vertically in two independent panels. The width of the left panel can be configured in percentage of screen. Adapts gracefully to a phone layout by showing only one panel at each time. 
How to use
Define the percentage that the left side will take of the screen and bind a variable to handle the state of the right area on mobile phones (open and close). You can also bind your own logic to the DetailClose event.
When to Use
Common tablet pattern, where the right panel displays the details of the selected item on the left.
Parameters
Aliases
Carousel
A Carousel with mutiple items in an horizontal scroll.
How to use
Elements inside the placeholder will be split in different items. For dynamic content, use a List directly inside the placeholder, and the List Items will be Carousel Items by default.
When to Use
Ideal to create horizontal slideshows in smaller screens.
Parameters
Aliases
ProgressCircle
Displays a circular progress bar, based on a percentage, with an animation (if so configured).
How to use
If the Text is not defined, the Progress Circle will display the progress percentage. Circle styles and text color are customizable with input parameters.
When to Use
Visually display the progress of an activity.
Parameters
Aliases
Loading circle
Tabs
Set of Tabs with placeholders for Title and Content.
How to use
Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered.
When to Use
Used to display large sets of information which can be split into different areas, whilst always remaining a click away.
Parameters
Aliases
ChatMessage
Block with Chat Message content, such as user photo, text, images, delivery time and status.
How to use
After adding the user picture and message content, configure the Time and Status of the message in the Input Parameters.
When to Use
Use to create chat screens or a feed of user posts.
Parameters
Aliases
Columns2
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
Columns3
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
Columns4
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
Columns5
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
Columns6
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
ColumnsSmallLeft
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
ColumnsSmallRight
Split content in multiple columns.
How to use
Configure the behavior in the input parameters to define how columns will stack in different devices.
When to Use
Ideal to improve the way information is displayed fits different devices.
Parameters
Aliases
DisplayOnDevice
Adaptive block which reacts to the runtime device. If running in a phone, the Phone placeholder content is displayed. If running in a tablet, the Tablet placeholder content is displayed.
Note: Replicate this functionality by using the GetDeviceType, IsPhone or IsTablet client-side actions.
How to use
When to Use
Display different content on different devices to better answer differences in use cases.
Parameters
Aliases
Gallery
Display content (like cards) to be displayed in a specific set of columns, which are configurable per device type and orientation.
How to use
Use static data or a List widget inside this block to display items in a gallery pattern.
When to Use
Used to display a List of elements side by side, with different number of items per row on different devices.
Parameters
Aliases
MasterDetail
Similar to the Split Screen, but receives an item list for the left panel.
How to use
Bind a List to the ItemList parameter and leverage the Block events to change the content placeholder.
When to Use
Use in tablet apps, to display the detail of a list of main items.
Parameters
Aliases
SplitScreen
In a tablet, splits the screen vertically in two independent panels. The width of the left panel can be configured in percentage of screen. Adapts gracefully to a phone layout by showing only one panel at each time. 
How to use
Define the percentage that the left side will take of the screen and bind a variable to handle the state of the right area on mobile phones (open and close). You can also bind your own logic to the DetailClose event.
When to Use
Common tablet pattern, where the right panel displays the details of the selected item on the left.
Parameters
Aliases
Alert
Alert box with a placeholder for custom content, which can be displayed as Success, Danger, Warning and Info.
How to use
Change the input parameter to define the alert type to be displayed.
When to Use
Used to highlight important information inline, on the screen.
Parameters
Aliases
BlankSlate
Filler for an empty state, which informs and directs the user.
How to use
Add the Block inside the Content placeholder in the screen layout. It can be configured to be occupy the full screen height.
When to Use
Perfect moment to educate the user on what is expected at that area of the application and invite his/her action.
Parameters
Aliases
Card
Card with a placeholder for custom content.
How to use
Add the Block inside the Content placeholder in the screen layout. It can be configured to be occupy the full screen height.
When to Use
Used to highlight content.
Parameters
Aliases
CardAction
Card with placeholders for Title, Content, Footer and Action. When Action is triggered, the content apears. Title and Footer placeholders are not displayed if they are empty.
How to use
Add the Block inside the Content placeholder in the screen layout. It can be configured to be occupy the full screen height.
When to Use
Perfect to display and highlight additional information on top of the front side of a Card.
Parameters
Aliases
CardBackground
Card with a background image, GIF or video.
How to use
Add an image or video element inside the background placeholder and select the color to overlay the card.
When to Use
Used to apply a background image that fills in the entire container.
Parameters
Aliases
CardItem
Card with the usual list item layout, with placeholders for an image or icon to the left, an action on the right and a title, supported by a description.
How to use
Change the input parameter to define is the Card has padding in the content.
When to Use
Used to highlight content.
Parameters
Aliases
CardSectioned
Card with placeholders for Title, Content and Footer. The Title and Footer placeholders are not displayed if empty.
How to use
Change the input parameter to define is the Card has padding in the content.
When to Use
Used to highlight content.
Parameters
Aliases
ChatMessage
Block with Chat Message content, such as user photo, text, images, delivery time and status.
How to use
After adding the user picture and message content, configure the Time and Status of the message in the Input Parameters.
When to Use
Use to create chat screens or a feed of user posts.
Parameters
Aliases
FlipContent
Flip between the content in the two placeholders. Use it with cards or other content with the same height.
How to use
Use IsFlipped parameter to control the content which is initially visible.
When FlipSelf is true, the element will react to a user tap by flipping. If false, the flip will only be triggered by the variable in IsFlipped. 
When to Use
Used to display more information of an element without navigating to a different screen.
Parameters
Aliases
FloatingContent
Panel that floats over content (like a map or an image), docked to a screen corner or direction.
How to use
Block needs to be placed inside the Content placeholder in the screen layout. On mobile phones, it will collapse automatically.
When to Use
To display content on top of other screen elements, like a Map with navigation instructions.
Parameters
Aliases
ListItemContent
Used inside a List Item widget to layout content in the three usual columns, usually with an image or icon on the left and an action on the right.
How to use
When to Use
Subdivide List Items with placeholders for title, text and left/right placeholders.
Parameters
Aliases
Section
Split long content by sections, with an optional title.
How to use
When to Use
Split content to reduce cognitive load for users.
Parameters
Aliases
SectionExpandable
Section with content which can collapsed or expanded below its title.
How to use
When to Use
Simplify initial view of a screen by hiding some of the less relevant content.
Parameters
Aliases
SectionGroup
Place Section blocks inside a SectionGroup to stick the headers to the top of the content area when scrolling.
How to use
When to Use
Parameters
Aliases
Tag
Display text in a colored tag layout.
How to use
When to Use
Parameters
Aliases
Tooltip
Dynamic tooltip displaying simple content.
How to use
Drag the Block to the screen, add your content and then add the tooltip text in the placeholders
When to Use
Use to have additional information related to a screen element
Parameters
Aliases
UserAvatar
Display the picture or initials of a user.
How to use
Bind the name and picture of the user to the input parameters of the Block. If no picture exists, the user initials will be used by default.
When to Use
Ideal to display information of the currently logged user.
Parameters
Aliases
ActionSheet
Option menu, which slides from the bottom, triggered by an user action.
How to use
Add the Block inside the Content placeholder in the screen layout.
When to Use
Commonly used for contextual actions or to confirm destructive user actions.
Parameters
Aliases
Animate
Create animations on elements inside the placeholder of this Block.
How to use
Drag the content inside the placeholder and configure the animation type of the Block. It's also possible to change the ammout of time to wait before the animation start and how long will it take to end.
When to Use
Used to easily add default animations to emphasise elements as they come on screen.
Parameters
Aliases
AnimatedLabel
Labels for input fields which animate to the top when the user focus the input.
How to use
Add the Block inside the Content placeholder in the screen layout.
When to Use
Allow users to fill in input fields without losing context.
Parameters
Aliases
Calendar
Date and time picker with a flat UI to be displayed inline on the screen. It can receive lists of dates with events and selection within a range of days. 
How to use
Configure the Input Parameters with the options needed. Disabled dates and events requires a List of DateTime records. To use the selected day, add an Action to the OnSelect event.
When to Use
Ideal to display a flat agenda with disabled dates and/or events.
Parameters
Aliases
Carousel
A Carousel with mutiple items in an horizontal scroll.
How to use
Elements inside the placeholder will be split in different items. For dynamic content, use a List directly inside the placeholder, and the List Items will be Carousel Items by default.
When to Use
Ideal to create horizontal slideshows in smaller screens.
Parameters
Aliases
FloatingActions
Action that floats on the bottom right of the screen, providing access to a set of additional actions. 
How to use
Add the Block inside the Content placeholder in the screen layout or inside the Bottom Bar.
Use the placeholder visible setting in the block (dots that appear on block selection) to hide the placeholders, if there are overlapping the remainder of the screen.
When to Use
Display additional actions or links inside the Bottom Bar or on the Screen Content area, inside an animated menu.
Parameters
Aliases
HorizontalScroll
Simple horizontally scrollable Block with a placeholder for content.
How to use
Block needs to be placed inside the Content placeholder in the screen layout. On mobile phones, it will collapse automatically.
When to Use
Ideal to display multiple elements in a single, scrollable row
Parameters
Aliases
LightBoxItem
Display a thumbnail image and, when tapped, opens the larger image in a lightbox.
If items are configured as belonging to the same group (configured in the parameter), they become browsable by swiping.
How to use
Add the full sized and thumbnail images to the corresponding placeholders and configure if it will have Sharing Options enabled and the Group name. Items in the same group can be swiped between them.
When to Use
Highlight and view in detail images with large resolution.
Parameters
Aliases
Notification
Simple notification Block displayed on top of the screen. Has a placeholder for content and can be used to call user actions.
How to use
Drag to the screen, add the notificaction content and bind the variable to control the visibility of the message.
When to Use
Ideal to create a native looking notification message.
Parameters
Aliases
RangeSlider
Range slider control to a set a value by dragging an handle within a configured range.
How to use
Bind your variable to the InitialValue input and use the OnChange event to add your logic to handle value changes.
When to Use
Used to control a variable value with simple and interactive user input.
Parameters
Aliases
RangeSliderInterval
Range slider control to a set an interval by dragging two handles.
How to use
Bind your variables to the InitialIntervalStart and InitialIntervalEnd inputs and use the OnChange event to add your logic to handle value changes
When to Use
Used to control of an interval value with simple and interactive user input.
Parameters
Aliases
Search
Search input which can be used in the Actions, HeaderContent or Content placeholders in the layout.
How to use
Place the search input in different locations depending on its importance for the user and search scope.
When to Use
To display a search input with custom styles for different screen areas.
Parameters
Aliases
SideBar
Sidebar for additional content on the side of the screen.
How to use
Bind a variable to the IsOpen input to toggle the visibility of the Block.In Service Studio, use the placeholder visible setting in the block (dots that appear on block selection) to hide the placeholders if they are overlapping the remainder of the screen.
When to Use
Support the current screen with an off-canvas sidebar to the right. Commonly used for data filters, accessory content or features.
Parameters
Aliases
StackedCards
Stacked cards for mutiple swipeable items that can be dragged to the left, right or top, firing different events.
How to use
Similar to a Carousel, add multiple containers or a List of items inside the Content placeholder. Use the Block Events to perform different actions depending on different swipe positions.
When to Use
Ideal for creating a message board or display multiple items with approve, deny and archive options.
Parameters
Aliases
Video
A simple way to embed a native video player.
How to use
Drag the Block to the screen and define your source video file to be used. All other parameters such as controls or size are optional.
When to Use
Commonly used to display video files on the screen.
Parameters
Aliases
BottomBarItem
Used inside the BottomBar block as a menu item.
How to use
Add the Block inside the Bottom Bar on the layout and wrap the Block in a link referencing the desired destination screen.
When to Use
Used to add menu entries to the Bottom Bar.
Parameters
Aliases
SubMenu
Provides the ability to create 2nd level menu items in the app main menu.
In a phone, it will expand downwards. In a tablet, it will expand inwards.
How to use
Add the Block inside the Menu, in the Common Flow.
When to Use
Use in larger applications with deeper navigation.
Parameters
Aliases
Tabs
Set of Tabs with placeholders for Title and Content.
How to use
Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered.
When to Use
Used to display large sets of information which can be split into different areas, whilst always remaining a click away.
Parameters
Aliases
TimelineItem
Item to create a timeline of event information, with plceholders for icon, title text and actions. 
How to use
Drag the Block to the screen, add your content and set if the item is active or not active.
When to Use
Used to create sequence of chronologically related events.
Parameters
Aliases
Wizard
Container for WizardItem Blocks that create a visual indication of the progress of a given set of tasks.
How to use
Add this Block to the screen and then drag WizardItem Blocks inside the placeholder.
When to Use
Used to split larger tasks into more manageable steps.
Parameters
Aliases
WizardItem
One step of a Wizard Block.
How to use
Add the Block inside the Content placeholder in the Wizard Block.
When to Use
Used to split larger tasks into more manageable steps.
Parameters
Aliases
Badge
Typical badge with a number to inform user of new information or just some sort of count.
How to use
Change the input parameter to define the background color and add an expression with the value to display inside the placeholder.
When to Use
Can be used in button groups or tabs to highlight the number of records within.
Parameters
Aliases
Counter
Displays a number as an highlight. Commonly used as overview or in dashboards.
How to use
Change the input parameter to define is the Card has padding in the content.
When to Use
Display statistics in a big tile with custom color settings.
Parameters
Aliases
IconBadge
Icon with a Badge stacked on top of it.
How to use
Drag an Icon and Badge to their placeholders.
When to Use
Used to display notifications with numbers.
Parameters
Aliases
ProgressBar
Displays an horizontal progress bar, based on a percentage, with an animation (if so configured).
How to use
If the Text is not defined, the Progress Bar will display the progress percentage.
When to Use
Visually display the progress of an activity.
Parameters
Aliases
Loading bar 
ProgressCircle
Displays a circular progress bar, based on a percentage, with an animation (if so configured).
How to use
If the Text is not defined, the Progress Circle will display the progress percentage. Circle styles and text color are customizable with input parameters.
When to Use
Visually display the progress of an activity.
Parameters
Aliases
Loading circle
ProgressCircleFraction
Displays a circular progress bar, based on a percentage, with an animation (if so configured). Content inside is displayed as a counter (ex. 3 out of 5).
How to use
Set the numerator and Denominator and customize the progress and text colors with input parameters.
When to Use
Visually display the progress of an activity towards a number target.
Parameters
Aliases
CenterContent
Vertically aligns content to the middle of it's parent.
How to use
Place this block inside a container with a given height and add content to the placeholder, that content will be vercially centered.
When to Use
Ideal for full height screens without much content.
Parameters
Aliases
MarginContainer
Isolates content with a padding.
How to use
When to Use
Easily add simmetrical padding around a container.
Parameters
Aliases
Separator
Splits content with the usual horizontal gray line.
How to use
When to Use
Split content visually.
Parameters
Aliases
SwipeEvents
Enable swipe events on a specific widget.
How to use
When to Use
Parameters
Aliases
TouchEvents
Enables touch events on a specific widget.
How to use
When to Use
Parameters
Aliases
VerticalAlign
Place content to perfectly align it to the middle of its container.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Background Colors
Add these classes to set the background of an element.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Buttons
Add these classes to buttons to make them look like the examples.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Feedback Message
The default feedback message style.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Form
Input text fields and text areas and selects, enabled and disabled
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Form Controls
ButtonGroup Switch and Checkbox, enabled and disabled
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Image Styles
Add these classes to directly apply different styles to images.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Text Classes
Add these classes to format text in a webscreen.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Text Colors
Add these classes to set the color of a text.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Typography
Add these classes to set the typography.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Utility Classes
Add these classes to elements.
How to use
When to Use
Use when you're having trouble aligning elements visually in the same axis.
Parameters
Aliases
Preview in Tablet
Featured
Content
Controls
Data
Layout
Navigation
Responsive
Structure
Utilities
Useful Classes
Accordion
Arrange the content by having vertically stacked tabs that expand when clicked. This is an effective way to display aditional information.
Feed Jonny Herp
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Feed Andria Coups
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2CCollaboratively administrate empowered markets via plug-and-play networks

Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Feed Rovert think
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users afterI 
How to use
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.
Parameters
Aliases
Carousel
A Carousel with responsive behavior that can display multiple images or other items in any device and highly customizable.
Username
Username
Username
Username
Username
How to use
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.
Parameters
Aliases
Counter
Use counters to give feedback about the current count of several elements, very useful on dashboards or summary pages.
65
Internet
56
TV
10
Phone
How to use
Add content to the number and label placeholders, then, set up the color and size of the Web Block.
Parameters
Aliases
Select2
Enhanced Combo box usable in forms.
You can use Select2 with Combo Boxes
Select orientation:
You can use Select2 with List Boxes
Select color: 
How to use
Drag the pattern next to a Combo Box and bind the two in the WidgetId parameter or using a custom CSS class. You can also write a text to show if there are no results found.
Parameters
Aliases
Tabs
Used to display large sets of information which can be split into different areas, whilst always remaining a click away. The headers can have rich information like counters, badges or icons.
Statistics
Customers
Expenses
Administration
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
How to use
Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered. Specify the initial active tab and also if the tabs should be loaded on user selection or on page load. Avoid using it in large forms.
Parameters
Aliases
Wizard
Used to split larger tasks into more manageable steps. Usually supported by explicit button navigation to move forward and backward.
Step 01
Step 02
Step 03
Step 04
Step 05
How to use
Either use one of the Wizard patterns with pre-defined number of steps or use the generic Wizard and drag WizardStep's to its only placeholder. Inside each step, add a link to screen it should lead to. In smartphones, the wizard step labels are replaced with numbers.
Parameters
Aliases
Accordion
Arrange the content by having vertically stacked tabs that expand when clicked. This is an effective way to display aditional information.
Feed Jonny Herp
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Feed Andria Coups
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2CCollaboratively administrate empowered markets via plug-and-play networks

Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Feed Rovert think
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users afterI 
How to use
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.
Parameters
Aliases
Alert
Alert messages give feedback after different types of actions like: Success, Warning, Error or Info.
This is an info Alert
This is a success Alert
This is an error Alert
This is a warning Alert
How to use
Write the message on the placeholder and set the alert type in the Web Block properties.
Parameters
Aliases
Balloon
Use balloons to show aditional content on a desired area. Click the posts below to see it in action.
17:08
Kinks Harris
Going to Try!
17:08
Maria Lers
Collaboratively administrate empowered markets via plug-se
Posted at 12:34, from New York, USA
Posted at 12:34, in Chicago, USA
How to use
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.
Parameters
Aliases
BlankSlate
A 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.
Get started. Make some magic happen!
How to use
Write down your message and add an action button. To configure the Icon to be displayed, change the parameter in the Web Block properties.
Parameters
Aliases
Box
Display content within a simple box with a customizable background color.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without ROI.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state.
How to use
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.
Parameters
Aliases
Bullets
Automatically create a bullet list by filling in their placeholders.
  • Collaboratively administrate empowered markets via plug-and-play networks. 
  • Efficiently unleash cross-media information without cross-media value. 
  • Completely synergize resource sucking relationships via premier niche markets. 
  • Objectively innovate empowered manufactured products whereas parallel platforms. 
  • Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
  • Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
How to use
Add text to the placeholders, the ones that remain empty will not be displayed in the browser.
Parameters
Aliases
ButtonsArea
A button container that places them close to each end. Comes in handy for some action areas or footers.
View
Create
How to use
Place some buttons in the placeholders for each side.
Parameters
Aliases
CardBackground
Card with a background image and placeholder for content with input parameters to configure the style of the card.
 Interactively coordinate proactive e-commerce
How to use
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
Parameters
Aliases
CardLeftImage
A Card with an image on the left side and your content on the right side.
Also Available for hire!
How to use
Fill in the placeholders, you can insert an image, a title and text.
Parameters
Aliases
CardSimple
A simple Card with title, text and action button placeholders.
Hire our personal for small price
Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.
How to use
Fill in the placeholders, you can write title, some text and add action buttons.
Parameters
Aliases
CardSimpleImage
A simple Card with an image, text and action button placeholders horizontally aligned.
Seamlessly visualize quality intellectual capital
How to use
Fill in the placeholders, insert an image, text and action buttons.
Parameters
Aliases
Carousel
A Carousel with responsive behavior that can display multiple images or other items in any device and highly customizable.
Username
Username
Username
Username
Username
How to use
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.
Parameters
Aliases
Info
A simple Tooltip displayed over an information icon.
Name info (top)
Date info (right)
Post info (bottom)
How to use
Simply change the Tooltip text and position.
Parameters
Aliases
Modal
A Modal box with custom content that is displayed as an overlay in the page.
Collaboratively administrate empowered markets via plug-and-play networks.  
More Details
Modal
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate BC users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary RO.. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
How to use
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.
Parameters
Aliases
Panel
Used to isolate and highlight content with a title, content and optional footer inside a webscreen.
Panel
Panel
$25
eternity
  • Collaboratively administrate empowered markets via plug-and-play networks
  • Dynamically procrastinate B2C users after installed base benefits
  • Efficiently unleash cross-media information without cross-media value
Panel with footer
Panel with footer
$25
eternity
  • Collaboratively administrate empowered markets via plug-and-play networks
  • Dynamically procrastinate B2C users after installed base benefits
  • Efficiently unleash cross-media information without cross-media value
Free for 14 days
How to use
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.
Parameters
Aliases
Post
Quickly create a conversation like interface for your users with the Post pattern.
17:03
John Smith
Objectively innovate empowered manufactured products whereas parallel platforms?
17:05
Elena 
Holisticly predominate extensible testing procedures for reliable supply chains. lol
17:08
John Smith
Nah, dramatically engage top-line web services vis-a-vis cutting-edge deliverables.
How to use
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()
Parameters
Aliases
Section
This is actually a section. Use it to segment blocks of content on a page. 
Section Expandable 
This is a section as well. The difference from the previous section is its ability to expand / collapse its content.
How to use
Fill in the title, actions and content placeholders. It is possible to configure a label to use with the SectionIndex pattern.
Parameters
Aliases
Separator
Allows to split information with a horizontal line.
This is content separator. 
Allows to split information with an horizontal rule.
How to use
Simply drag the pattern into your screen.
Parameters
Aliases
Tooltip
Allows to split information with a horizontal line.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
How to use
Simply drag the pattern into your screen.
Parameters
Aliases
Buttons
Complete set of buttons to serve as primary, secondary and auxiliary actions, that can use both text and icons. They can be set to display a loading icon and prevent consequent clicks.
Save
Button Is_Default
View
Button
Cancel
Button Cancel
View
Button Small
Create
Button Success
Delete
Button Danger
Button Icon
This class won't work on platform buttons.
Gmail like buttons. Use the Richwidgets Icon webblock.
Link
Button Link
This class won't work on platform buttons.
Loading
Button Load
This class won't work on platform buttons.
Adding the class Load, avoids multiple user clicks while the request is being processed.
How to use
To create these custom buttons use links, instead of buttons, and add the provided classes - Button, along with Success, Cancel, Link, Danger, Icon or Small. To use icons within the custom button wrap the RichWidget’s Icon block with the link. To enable the Loading behaviour, which prevents consequent clicks while the request is undergoing, add the Load class.
Parameters
Aliases
ButtonDropdown
Button which triggers a dropdown of links.
ButtonDropdown
How to use
Fill in the label of the dropdown button and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.
Parameters
Aliases
ButtonGroup
A row of buttons grouped in single element. Available in groups of 2, 3, 4 or 5.
Normal Behaviour
Non Responsive Behaviour (enclose the ButtonGroup in a container with class .NoResponsive)
How to use
Add a label to each of the placeholders, along with a radio button. All radio buttons need to be bound to same variable. On smartphones, the button group becomes vertically stacked.
Parameters
Aliases
Calendar
Used to select a date or simply check the calendar and allows to be displayed on smartphones instead of reverting to the native picker.
Click to pick a date
How to use
Drag to the Web Screen and set up the parameters, the only mandatory one is the InputWidgetId which must reference an input widget to store the selected date.
Parameters
Aliases
FileUpload
Pattern to hold a file upload widget and a label, also allows file uploads from mobile devices.
Choose File
No files chosen
How to use
Drag your file upload widget and write your label for the file upload. After the widget is configured, create a button to save the file.
Parameters
Aliases
InputWithIcon
Customize an input with an Icon.
Can be aligned to the right
How to use
Just drag your input and choose the desired icon.
Parameters
Aliases
IconDropdown
Icon button with a dropdown menu. Commonly used with a "cog" icon to display more settings or actions.
IconDropdown
How to use
Fill in the label of the dropdown icon and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.
Parameters
Aliases
InlineDropdown
Similar to ButtonDropdown, but displayed as normal text, with a following caret.
InlineDropdown
How to use
Fill in the label of the dropdown button and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.
Parameters
Aliases
RangeSlider
Select a single value between two range values or select an interval with two sliders.
Single value selector
Two values selectors
How to use
Place the Web Block on your screen and drag an Input Widget on the Input Number placeholder. You may also drag a second Input on the other placeholder to select an interval. On the pattern properties, you have to select the min and max range values and optionally set a step to increment when sliding.
Parameters
Aliases
Search
Simple search form pattern with a search icon.
How to use
Drag an Input Widget inside the placeholder to use as a search input.
Parameters
Aliases
Select2
Enhanced Combo box usable in forms.
You can use Select2 with Combo Boxes
Select orientation:
You can use Select2 with List Boxes
Select color: 
How to use
Drag the pattern next to a Combo Box and bind the two in the WidgetId parameter or using a custom CSS class. You can also write a text to show if there are no results found.
Parameters
Aliases
ToggleButton
A mobile friendly pattern to switch between two states.
Remember Login?
How to use
After placing the Web Block on your Web Screen, drag a checkbox inside the placeholder and the pattern will automatically use it.
Parameters
Aliases
Video
A simple way to embed video content directly into your web pages without the need for a third-party plug-in.
How to use
Drag the pattern to the screen and set the SourceFile with the URL of the video. The URL must be of a direct video file, not a website like Vimeo or YouTube, those servers provide their own embed code already.
Parameters
Aliases
Badge
Displays a number or text notification, a nice way to notify a user about new messages or tasks.
Customer
Open Issues
James Person
12
Mary Jane Watson
1
John Doe
3
Joana Harrison
5
How to use
Simply set a number or text and a color in the Web Block properties. The number can be a local variable, function or any other Service Studio.
Parameters
Aliases
Counter
Use counters to give feedback about the current count of several elements, very useful on dashboards or summary pages.
65
Internet
56
TV
10
Phone
How to use
Add content to the number and label placeholders, then, set up the color and size of the Web Block.
Parameters
Aliases
IconBadge
Similar to the Badge pattern, but displays a number or text notification on top of a RichWidget Icon.
James Person
5
    
How to use
Set the icon, a number or text and a color in the Web Block properties. The number can be a local variable, function or any other Service Studio.
Parameters
Aliases
ProgressBar
Custom progress bar with indication of a current action in percentage values.
Process Progress:
76%
Upload status:
42%
GenderProgress
Male
0%
Female
10%
How to use
Simply configure the way the label is displayed and the variable that defines the percentage. You can also change the height of the ProgressBar.
Parameters
Aliases
TileIcon
Display quick information with an icon on top of a small caption.
Internet
How to use
Fill the text placeholder, then, change the icon, color and size. There is also an option to add a tooltip text automatically.
Parameters
Aliases
TileIconText
Display quick information with an icon on the left and small text on the right.
Collaboratively administrate empowered markets via plug-and-play networks.
How to use
Fill the text placeholder, then, change the icon, color and size. There is also an option to add a tooltip text automatically.
Parameters
Aliases
TileNumber
Display quick information with a number on top of a small caption.
10
Phone
How to use
Fill the text placeholder, then, change the number, color and size. There is also an option to add a tooltip text automatically.
Parameters
Aliases
UserInitials
Display initials of the user in a nice circular badge.
Small Size: 22px
AD
Medium Size: 40px
AC
Large Size: 80px
LB
How to use
Add the pattern to your screen and in the properties, provide the user name, set up color and size and it will display the user initials only.
Parameters
Aliases
LayoutLogin
A custom page Layout for the login screen that has a small login box centered in the screen.
How to use
On the login page, select the object tree and use the LayoutLogin instead of the current page Layout, then, add the input widgets to the correct placeholders. Silk UI Templates already have the login page using the new LayoutLogin by default.
Parameters
Aliases
LayoutPopup
The Layout for the RichWidgets Popup Editor in Silk UI based projects.
How to use
On the popup page, select the object tree and use the LayoutPopup instead of the current Layout, then, add your content inside the layout.
Parameters
Aliases
BreadCrumbs
Present the current user location in applications with a deep page hierarchy.
Services
Internet
Equipment
How to use
Usually placed above the page title. Define the separator icon, usually "angle_right", "caret_right" or "chevron_right". Place links for each level required to offer the navigation, with the exception of the last which would represent the current page. Leave empty the unrequired levels and these will not be rendered. In smartphones, only the last and previous to last labels are displayed.
Parameters
Aliases
NavigationBar
Provides links to other pages and displays the active page. Sometimes referred to as server-side tabs.
CustomersServicesIssuesIssuesIssues
How to use
Add links to the only placeholder and they will transform to be presented as navigation. In tablets and smartphones, the items which do not fit will be presented in a dropdown.
Parameters
Aliases
SectionIndex
Lists all Section patterns present in the page and allows the scroll to them on click. Current section highlights when scrolling.
Look at the example on the left side of this page.
How to use
Can be used with sections listed horizontally or vertically. Can be set as fixed to maintain position whilst user scrolls. If set as fixed, be sure to define the margin from the top. For a better user experience, in phones and tablets it displays horizontally and is not fixed on the screen.
Parameters
Aliases
Tabs
Used to display large sets of information which can be split into different areas, whilst always remaining a click away. The headers can have rich information like counters, badges or icons.
Statistics
Customers
Expenses
Administration
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
How to use
Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered. Specify the initial active tab and also if the tabs should be loaded on user selection or on page load. Avoid using it in large forms.
Parameters
Aliases
Wizard
Used to split larger tasks into more manageable steps. Usually supported by explicit button navigation to move forward and backward.
Step 01
Step 02
Step 03
Step 04
Step 05
How to use
Either use one of the Wizard patterns with pre-defined number of steps or use the generic Wizard and drag WizardStep's to its only placeholder. Inside each step, add a link to screen it should lead to. In smartphones, the wizard step labels are replaced with numbers.
Parameters
Aliases
DisplayOnDevice
Use to select if an element should be loaded in a specific device. Especially helpful to avoid too much data being loaded in mobile devices.
This image will display on all devices.
This image will display on desktop and tablet.
This image will display on phone only.
How to use
Set up the content of the pattern and then change the devices where it will be displayed.
Parameters
Aliases
LoadOnVisible
Loads 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.
Sorry no preview!
How to use
Place this Web Block on your Web Screen and fill it with your content.
Parameters
Aliases
MoveOnDevice
Define 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.
In Desktop, display image on this container.
In Tablet, display image on this container.
In Phone, display image on this container.
How to use
Place your content on the placeholder and configure where will it be dispayed on tablet and phone.
Parameters
Aliases
ResponsiveImages
Load different images depending on the current device, perfect to change to high DPI images in modern devices.
Desktop

image.jpg 
Tablet

image_tablet.jpg 
Phone

image_phone.jpg 
How to use
Just drop each image in the corresponding device placeholder, this pattern will only load the image for the current device.
Parameters
Aliases
ResponsiveTableRecords
Makes table rows stack on top of each other in phone.
UserAddressPostal CodeCity
Alejandra CaminoBuenos AiresArgentinaalejandra.camino@lexcor.com
Jean FresnièreCharleroiBelgiumjean.fresnière@powellexa.mple
Aria CruzSão PauloBrazilaria.cruz@lexcorp.net
Erivaldo SerraSão PauloBrazilerivaldo.serra@live.evample
Mario PontesCampinasBrazilmario.pontes@thathmple
Atention: In the default layout of Responsive Table Records only one field is visible, to see the others you need to expand the content, as you can see it below.
UserAddressPostal CodeCity
Alejandra CaminoBuenos AiresArgentinaalejandra.camino@lexcor.com
Jean FresnièreCharleroiBelgiumjean.fresnière@powellexa.mple
Aria CruzSão PauloBrazilaria.cruz@lexcorp.net
Erivaldo SerraSão PauloBrazilerivaldo.serra@live.evample
Mario PontesCampinasBrazilmario.pontes@thathmple
How to use
Add this Web Block to the screen and place a table records in the placeholder.
Parameters
Aliases
ToggleOnDevice
Can hide content for specific devices and creates a link to expand it.
Desktop
Tablet
Phone
Show content
How to use
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.
Parameters
Aliases
Columns2
Split content in 2 columns with responsive capabilities to improve the way information is displayed.
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
Columns3
Split content in 3 columns with responsive capabilities to improve the way information is displayed.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.
Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
Columns4
Split content in 4 columns with responsive capabilities to improve the way information is displayed.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. 
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. 
Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
Columns5
Split content in 5 columns with responsive capabilities to improve the way information is displayed.
Completely synergize resource sucking relationships via premier niche markets.
Objectively innovate empowered manufactured products whereas parallel platforms.
Proactively envisioned multimedia based expertise and cross-media growth strategies. 
Completely synergize resource sucking relationships via premier niche markets.
Objectively innovate empowered manufactured products whereas parallel platforms. 
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
Columns6
Split content in 6 columns with responsive capabilities to improve the way information is displayed.
Completely synergize resource sucking relationships via premier niche markets. 
Objectively innovate empowered manufactured products whereas parallel platforms.
Proactively envisioned multimedia based expertise and cross-media growth strategies.
Completely synergize resource sucking relationships via premier niche markets.
Objectively innovate empowered manufactured products whereas parallel platforms.
Proactively envisioned multimedia based expertise and cross-media growth strategies.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
MediumLeftColumn
Split content in 2 columns with responsive capabilities to improve the way information is displayed. The left column will be smaller.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
MediumRightColumn
Split content in 2 columns with responsive capabilities to improve the way information is displayed. The right column will be smaller.
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service. Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
SmallLeftColumn
Split content in 2 columns with responsive capabilities to improve the way information is displayed. The left column will be smaller.
Completely synergize resource sucking relationships via premier niche markets. 
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
SmallRightColumn
Split content in 2 columns with responsive capabilities to improve the way information is displayed. The right column will be smaller.
Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.
Objectively innovate empowered manufactured products whereas parallel platforms.
How to use
Place this Web Block on your Web Screen and simply add content to each placeholder.
Parameters
Aliases
Gallery
Create a Gallery list, with full control over the number of items per line. 
OPEN NOW UNTIL 10:00PM
Farrell's Ice Cream
Av. del Libertador
OPEN NOW UNTIL 10:00PM
Sushi Nakazawa
Boulevard Tirou
OPEN NOW UNTIL 10:00PM
Toffee Ritz
Rua Orós
OPEN NOW UNTIL 10:00PM
Burger Bar
Adenauerallee
How to use
Drag your items into the placeholder (use a ListRecord to get items dynamically), and select the desired number of elements per line and per device type. You can also configure if you want to have all items with the same height.
Parameters
Aliases
CharacterCount
Displays the characters left in a target input field.
Characters left: 500
How to use
Bind the Input Widget where the user will write the text, set the character limit. The message parameter defines the text to show before the character count.
Parameters
Aliases
Fieldset
The Fieldset element allows authors to group thematically related controls and labels.
Personal information
How to use
Set the label of the Fieldset and then drag Input widgets to the content placeholder.
Parameters
Aliases
FlipContent
A container that builds a flippable widget, has placeholders for front and back elements.
Mouse hover to flip the card
Mouse out to go back
Click to flip the card
Click to go back
Click the icon to flip the card
Click the icon to go back
How to use
Place your content in the placeholders and configure in the pattern parameters how the flip event is triggered and a button to show each side. If only one button is configured or the same button is used for both sides, it will behave as a toggle for both sides.
Parameters
Aliases
Iframe
Add an IFrame to the webscreen.
How to use
Place the IFrame Web Block on the screen and configure the URL to the website you need to load. You can also set custom width and height for the IFrame.
Parameters
Aliases
ScrollToElement
Scrolls the page to an element's position when the page loads.
Sorry no preview!
How to use
Simply configure the element ID and the page will scroll to it after the page loads.
Parameters
Aliases
StackedIcon
Use this pattern to be able to stack two RichWidget Icons on top of each other.
No download permission 
How to use
Select both icons to be displayed and their colors. You can also set which is in front and swap their sizes.
Parameters
Aliases
VerticalAlign
Use this pattern to align contents vertically.
Vertical align text
How to use
Simply add an element to each placeholder and they will be aligned automatically.
Parameters
Aliases
Background Colors
Classes to set the background of an element.
 .Transparent
 .White
 .Yellow
 .Orange
 .Red
 .DarkRed
 .Plum
 .DarkPlum
 .Green
 .LightGreen
 .Turquoise
 .Blue
 .DarkBlue
 .Silver
 .Gray
 .Black
How to use
Add these classes to the element to change its background color.
Parameters
Aliases
Image Style
Classes to directly apply different styles to images.
.Image_circle
.Image_rounded
.Image_thumb
How to use
Add class to an image to apply a different style.
Parameters
Aliases
System
Classes to set system settings.
.Align_top
Vertical align to the top
.Align_middle
Vertical align to the middle
.Align_bottom
Vertical align to the bottom
.Clearfix
Clear float in child elements
.First
Set element margin-left to 0px
.Float_left
Float left element
.Float_right
Float right element
.FullWidth
Full button width
.HiddenOnDesktop
Hide the element in Desktop
.HiddenOnTablet
Hide the element in Tablet
.HiddenOnPhone
Hide the element in Phone
.Last
Set element margin-right to 0px
.noSwipe
Disable the swipe gesture in the element
.noTransition
Remove all transitions
.PH
Hide in the case of element is empty
.Print_hidden
Hide when printing the page
.Print_visible
Show when printing the page
.Text_NoWrap
Specify that the content inside a cell should not wrap
How to use
Add class to element to apply different system settings.
Parameters
Aliases
Text
Classes to format text in a webscreen.
.Heading1
.Heading2
.Heading3
.Heading4
.Bold
.Italic
.Underline
Link | Link
.Text_Error
.Text_note
.Note
.Label
.Text_uppercase
.Text_large
.Text_small
.Code
.Text_overflow
.Text_shadow
How to use
Add class to element to change its text format.
Parameters
Aliases
Text Colors
Classes to set the color of a text.
 .Text_white
 .Text_yellow
 .Text_orange
 .Text_red
 .Text_darkRed
 .Text_plum
 .Text_darkplum
 .Text_green
 .Text_lightGreen
 .Text_turquoise
 .Text_blue
 .Text_darkblue
 .Text_silver
 .Text_gray
 .Text_black
How to use
Add class to element to change its background color.
Parameters
Aliases
Built with OutSystems - All rights reserved.
back to top
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