Zum Inhalt springen
Start  › ... Doku › Containers

2shine containers

There are 3 containers added with 2shine which all behave differently. Each of them behaves differently and has specific use cases. You don't need to set one manually because there is a default for every available element. You will probably have to set one if you want something to display differently or want a non-2shine or non-2sxc element to display nicely with the skin. 

Apply containers to a module

The three container type are:

  1. 2shine BS5
  2. 2shine BS5 - full width without padding
  3. 2shine BS5 - full width with padding

To see learn more about the individual containers read below.

How to apply them:

  1. Click on the pen in the bottom left corner 
  2. Hover over the gear above the module you want to change and click on Settings
  3. In the menu click on Page Settings
  4. Under Module Container select the container you want to apply 
  5. Click on update
Text.First(imgItem.ImageCaption, imgItem.Title)

2shine BS5

The 2shine BS5 container occupies the entire available surface but limits the content area within it. It does this by applying padding to the left and right sides. In the image on the left you can see the padding displayed as the green bars and the content itself as the blue surface. This container has the most padding and the content within this container is the narrowest among the three.

Recommended for:

  • Text 
  • Text with Images
  • Images
Text.First(imgItem.ImageCaption, imgItem.Title)

2shine BS5 - full width with padding

Like the container above, 2shine BS5 - full width with padding also limits the space that the content itself takes up and adds padding on the left and right. But it does it in a much less noticeable way by adding much less padding. 

Recommended for:

  • Text 
  • Text with Images
  • Images
Text.First(imgItem.ImageCaption, imgItem.Title)

2shine BS5 - full width without padding

2shine BS5 - full width without padding doesn't use padding and displays the content across the full width. 

Recommended for:

  • Images
  • Headers
Text.First(imgItem.ImageCaption, imgItem.Title)

Mobile

2shine BS5

This container still displays very well on mobile but there is still a bit of padding on the left and right which improves text readability. On mobile the difference between 2shine BS5 and 2shine BS5 - full width with padding is no longer noticeable. But there is a big difference between those two and 2shine BS5 - full width without padding. 

Recommended for:

  • Text 
  • Text with Images
  • Images
Text.First(imgItem.ImageCaption, imgItem.Title)

2shine BS5 - full width with padding

This container displays exactly the same as 2shine BS5 container and also helps to make the text more readable. 

Recommended for:

  • Text 
  • Text with Images
  • Images
Text.First(imgItem.ImageCaption, imgItem.Title)

2shine BS5 - full width without padding

This container still doesn't apply any padding but now, there is a noticeable difference. While the image displays better than with the other two containers the problem is the text. The text now goes right up to the edge which makes it a bit unpleasant to read. So we wouldn't recommend to use this container for text which sshould also be displayed nicely on mobile. 

Recommended for:

  • Images
Text.First(imgItem.ImageCaption, imgItem.Title)