Skip to main content
Home  › ... Docs › Containers

2shine containers

There are 3 containers added with 2shine which all behave differently. All of them behave differently and have some use cases. You don't have to set one 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 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 takes up the whole available surface but limits the surface available to the content itself. It does this by adding padding on the left and right. 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 content inside this container is the narrowest of all 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 does't use padding and just displays the content over the whole width. 

Recommended for:

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

Mobile

2shine BS5

This container stil displays really good on mobile but as you can see there still is a bit of padding on the left and right which helps to make the text more readable. On mobile the difference between 2shine BS5 and 2shine BS5 - full width with padding isn't noticeable anymore. 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 exaclty the same as 2shine BS5 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

2shine BS5 - full width without padding still doesn't use any padding but now there is a noticeable difference. While the image is displayed better than with the other two containers the problem is the text. The text now goes right up to the edge which make it a bit unpleasant to read. So we wouldn't recommend to use this container for text which should also be displayed nicley on mobile. 

Recommended for:

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