MainContentCrate

Common use

The MainContentCrate is the primary content crate, it is the crate to use for any combination of Text, images, and buttons. If the required fields to render one of these components are missing the crate will ignore it, and only render the rest.

This means that in order to insert an image, an editor would insert a main content crate, and in this crate only do image configuration. The same holds true for the other fields.

The crate has two levels of background colors and inner(Just refered to as background color) and an outer. The inner allows padding between other MainContentCrates, while the outer variant will go all the way to the edge of the crate.

Checkmark list

To insert a checkmark list you can use the snippet menu in the upper right corner of the rich text editor.

In this menu you can select a "Check Mark List", which will insert an example list, similar to the one below, in which you can start adding or removing items.

 

  • List item with bold format

    and some text underneath

  • Item 1
  • Item 2
  • Item 3

Links list

To insert a list of links you will have to create a set of links first, and then afterwards add the appropriate css class to the element "link-arrow".

This will give the links the arrow at the end as you can see underneath.

To also seperate the links with a horisontal line, you will have to insert that line as you would normally do.

 

Shared Templates Guide


Link 2


Link 3


Configuration options

Settings that can be configured in sitecore

Name Description
ExtendImage  Pulls the Background image to the edge of the Module
Paralax Moves the image a bit when scrolling
VerticalDivider Adds a gray line to the right of the crate
HorisontalDivider Adds a gray line under the crate
ImageAtBottom Moves the image from the top of the crate to the bottom
PositioningClass
  • Hero-top: Moves the crate on top of a module marked as a hero module
GrowImage Zooms the image when hovering over the crate
BackgroundColor Background color of the crate. Default is transparant
BackgroundColorOuter

Background color that goes all the way to the edge of the crate

VerticalAlign Center crate with equal amount of pixels top/bottom
CenterCrate Makes the crate be centered, regardless of the column configuration of the module
ColumnSpan

Indicates how many columns the crate should take up.

It only has an effect if the module is configured for less than 5 columns

IgnoreColumns Makes the crate ignore the column configuration of the module
Heading 1

Text with the H1 tag.

There should only be one crate per page with this field set, and generally configured as Hero-top.
This is for SEO reasons

Heading 2 Text with the H2 tag
Heading 3 Text with the H3 tag
Dark Heading 3 makes the text in Heading 3 dark instead of blue
Heading 4 Text with the H4 tag
Heading 5 Text with the H5 tag
NoPaddingText Removes the default text padding both above and below the text
NoPaddingTextTop Removes the default text padding above the text
NoPaddingTextBottom Removes the default text padding below the text
RichText

Content text inside the crate.

This is where the list-variants from above would go

TextColor Color of the text. Defaults to dark
CenterText Centers the text in the crate
Image

An image to show in the crate.

Make sure not to specify both width and height on the image.

ImageAutoFit

Makes the image to to the edge of the crate.

Normally the size would depend on the image, but this forces it to go to the edge, and keep scaling.

ImageLink Link for when the user clicks the image.
GrowImage If the image should zoom a bit when hovering it.
Extend Image Extends the image to the edge of the module, breaking out of the usual boundaries of the crate.
LinkButton Link for the button.
ButtonPosition Where in the crate the button should be placed. Center is default
ButtonVariant

What type of button to show.

If none is selected no button will be shown.

Button White

Inverts the button colors.
White button, Blue text.

Used when the background is colorful

Examples

The module these crates are placed in has the "EqualHeight" setting resulting in the crates next to each other has the same height.

All the images are using "ImageAutoFit" as the images are not perfectly suited for the dimensions of the card.

This is a standard setup

Several headlines

While background color

It has images, rich text and a button linking somewhere.

This example is also configured to have a link in for the image.

Kaffe

Image bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kaffe

Image Grow

This example has the image grow property set, meaning the image will zoom slightly when hovering over it with the cursor.

BackgroundImage

This is two seperate crates, each with Their own background set, and the "extend" options checked, to make them reach the edges of the module.

 The text is set to light, as the background makes black difficult to see.

Vertical line

A vertical line can be added in order to make some separation, this still works best when the background color outer is set on all crates.
 
The vertical divider is set on the crate, and will make the line appear on the right side of the crate.

The line will only be the length of the contents of the crate, so if the crate next to it has more content the line may not fit.

The line is only displayed on devices that can show more than one row, such as desktop.

Background outer

You can get the effect of connected crates by using the outer background color.

It is advised to use a darker background color on the module when using this effect, as it is otherwise difficult to see any change.