Offgrid full

OutSystems
Component
1

This is a block element with a two column structure.One of the columns has an image, and in the other, the user can add content using the existing components. The image will occupy the full space from the beginning of the column to the edge of the visual , 1920px, and when the screen is smaller it will hide part of the image. Column widths can be changed to tablet size, and below this breakpoint, the column containing the image will have a width of col-12 on phones and ´´compact phones.You can also change the column order in phone width and below. 

Libraries

Bootstrap

HTML Code





-- START - IF IMAGE ON THE LEFT SIDE --


IMG_ALT




-- PLACE CONTENT --


-- END - IF IMAGE ON THE LEFT SIDE --

-- START - IF IMAGE ON THE RIGHT SIDE --


-- PLACE CONTENT --




IMG_ALT


-- END - IF IMAGE ON THE RIGHT SIDE --



How to Implement

This component starts in the off-grid-outer div and this div also contains the container-fluid class.

In this div you can add padding and margins (top and bottom) classes for the different breakpoints.

In the back office you can enter the number of columns each part occupies in the tablet size (col-md-*), and below that the behavior will be fixed.

The number of columns in desktops (xl), laptops (lg) and tablets (md) will be the same, for example 6 column width will have a col-md-6 and the already existing classes for col-*.

Check the classes in each of the columns. The image should be placed inside the off-grid__extreme div and the content in the off-grid__content div.

If the image is on the left side the class off-grid_extreme-left will be added to the off-grid__extreme div.

The height of the component is determined by the tallest element and the remaining content will be vertically aligned.

If the user chooses to change the order of the columns under tablet (col-md-*) size, place in the left column the classes order-md-1 order-2 and in the right column order-md-2 order-1.

In each column the user can also add padding classes (top and bottom)

Don’t forget the alt attribute in the image.

Tasks Front End

DMW-544 DMW-643

Tasks Back End

DMW-506

Tasks details

NA

Views Path

Views/Media/OffGridFull.cshtml

Component Variations

Image Right Side Version - Default


Example of Content - Offgrid Full

How to use

As it is a block element, place it inside the main area.

In the control properties you can select a padding top and bottom, and in the grid place the column width, in the tablet section, for the right and left columns.

Below the tablet width the behavior will be of 12 columns width for the text and the image will have a 12 column width on phones and compact phones.

In the content column it's possible to use the following components:

  • Image (normal and reusable)
  • Call to Action
  • Plain Html (normal and reusable)
  • Rich Text (normal and reusable)
  • Splitter (columns and row)

Undeveloped Options

Margin top and bottom in the off-grid-outer divMargin and Padding for the different breakpoints.Padding in each column

Example page

Figma Link