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 Item
      The Card Item widget allows you to list items with multiple content types, such as an image or icon, a title and description, and an action to the right.
    • Card Sectioned
      Card Sectioned groups short pieces of information in sections and highlights them on the screen.
    • Chat Message
      Chat Message displays conversation posts in notifications or chat screens.
    • Flip Content
      Flip Content prioritizes information display, keeping the interface uncluttered.
    • Floating Content
      Floating Content displays a panel that floats over content (like a map or an image), docked to a screen corner or direction.
    • List Item Content
      List Item Content is used to layout content such as icons, text, and actions inside a list in a readable way.
    • Section
      Section separates content into groups, easing visual organization.
    • Section Group
      Use the Section Group UI Pattern to keep the context of the header while progressively viewing more content by scrolling.
    • 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.
    • Action Sheet
      Option menu, which slides from the bottom of the screen, triggered by a user action.
    • 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.
    • Dropdown Search
      The Dropdown Search UI Pattern offers a choice of available options that the user can search.
    • Dropdown Tags
      The Dropdown Tags UI Pattern offers multiple choice options to the user when using a dropdown search.
    • Floating Actions
      Floating Actions displays an action that floats in the bottom right corner of the screen.
    • Horizontal Scroll
      The Horizontal Scroll displays a subset of a category, a finite amount of sections, slides, or content that's larger than the screen.
    • 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.
    • Notification
      The Notification UI Pattern is a contextual short message that provides important information to the user.
    • Map
      Use the Map pattern to ad Google Map to your app.
    • 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.
    • Search
      Search allows the user to find pieces of content without the use of navigation.
    • 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.
    • Video
      Video allows you to embed a native video player.
    • Bottom Bar Item
      The Bottom Bar Item provides access to a bottom navigation drawer
    • Breadcrumbs
      Breadcrumbs present the location of the user within the hierarchy of applications.
    • Pagination
      The Pagination UI Pattern helps users find a specific item on long listings.
    • Section Index
      Section Index organizes the content of a screen, enabling quick navigation within the page.
    • Submenu
      Submenu is used to create a menu contained within another menu.
    • Tabs
      Displays large sets of information, which can be split into different areas, while always remaining a click away.
    • Timeline Item
      Timeline Item indicates related events in chronological order.
    • Wizard
      Wizard splits complex tasks and process into steps.
    • 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.
    • Progress Bar
      Progress Bar displays the progress of a task by incrementing values in a bar.
    • Progress Circle
      Displays the current progress of a task using circular or semi-circular progress indicators.
    • Progress Circle Fraction
      Display fraction values by incrementing values in a circular badge.
    • 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
      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.
    • Mouse Events
      The Mouse Events UI Pattern enables click events on a specific widget or pattern.
    • 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
    • Was this article helpful?