Skip to main content










Applies only to Mobile Apps and Reactive Web Apps




Using Mobile and Reactive Patterns

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Components and UI patterns specially designed to address common application use cases in mobile development.

    OutSystems UI Mobile Framework offers you different patterns that you can drag and drop to the screen for a great mobile experience.

    Articles in this Section

    • Columns
      The Columns UI Pattern splits content into separate columns.
    • Display on Device
      Display on Device improves the way information is displayed on different devices.
    • Gallery
      Displays content (such as cards) in a specific set of columns, configurable per device type and orientation.
    • Master Detail
      Displays a master list and the details for the currently selected item.
    • Accordion
      Accordion expands vertically-stacked content by clicking on the header.
    • Alert
      Alert gets the end user's attention and highlights important information, errors or warnings on the screen.
    • Blank Slate
      Blank Slate informs end users when they start using the application, complete a task or when there is no data available for display.
    • Card
      Card groups small pieces of information and highlights them on the screen.
    • Card Background
      Card Background groups short pieces of information and highlights them on the screen while providing additional relevance by using a background image.
    • Card Sectioned
      Card Sectioned groups short pieces of information in sections and highlights them on the screen.
    • Flip Content
      Flip Content prioritizes information display, keeping the interface uncluttered.
    • Section
      Section separates content into groups, easing visual organization.
    • Tag
      Tag styles small texts in a colored tag format.
    • Tooltip
      Tooltip dynamically displays simple informative content on end user interaction.
    • User Avatar
      User Avatar displays user information in a circular badge.
    • Animate
      Animate adds default animations to emphasize elements as they appear on the screen.
    • Animated Label
      The Animated Label animates a label when there is user input.
    • Carousel
      Displays multiple items in a horizontal slide.
    • Date Picker
      Date Picker allows the end user to select a single or a range of dates using a calendar.
    • Input with Icon
      Input with Icon allows the end user to input data with the help of a hint.
    • Lightbox Image
      Displays an image thumbnail that can be clicked to open a fullscreen image.
    • Range Slider
      Allows the user select a single value between two range values.
    • Range Slider Interval
      the Range Slider Interval UI Pattern allows users select a single value between two range values.
    • Sidebar
      Sidebar shows additional content on the side of the screen.
    • Stacked Cards
      Adds swipeable cards that can be dragged in multiple directions triggering events, such as deny, approve, and archive.
    • Breadcrumbs
      Breadcrumbs present the location of the user within the hierarchy of applications.
    • Tabs
      Displays large sets of information, which can be split into different areas, while always remaining a click away.
    • Badge
      Badge display numerical information as notification.
    • Counter
      Counter shows the total number of occurrences of several values regarding a single topic.
    • Icon Badge
      Icon Badge displays numerical information as notification.
    • Align Center
      Align Center places content horizontally or vertically within a container.
    • Button Loading
      Use the Button Loading pattern to call actions that don't run immediately.
    • Center Content Loading
      Use the Center Content pattern to align the content to the center of its container.
    • Margin Container
      Use the Margin Container and easily add symmetrical padding around a container.
    • Swipe Events
      Swipe Events UI Pattern enables swiping on a specific widget.
    • Touch Events
      The Touch Events UI Pattern enables touch events on a specific widget.
    • Public Actions
    • Split Screen
      Splits the screen vertically in two independent panels.
    • Was this article helpful?