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.
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.
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 |
|
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.
|
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.
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.
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.
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
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
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.