When adding a web component to a page there is a field called Custom Class for each web component. Use this to add some of these classes to implement their effect. You can use more than one Custom Class, just ensure the are space separated.

Members--hide-on-authenticated
Hides component if user is logged in

Members--hide-on-anonymous
Hides a component if the user is anonymous

mobileonly
Only show on mobile

desktoponly
Only show on desktop

noPrint
Do not show when printing

container
Contain component to 1170px max

On scroll Animations

Use these classes to get an animation on scroll (as the user scrolls down and the component comes into view these animations are triggered). We use animate-hide to make the initial state of the control hidden, its optional but it makes the effect nicer.

animate-hide animate-fading

animate-hide animate-opacity

animate-hide animate-top

animate-hide animate-left

animate-hide animate-right

animate-hide animate-bottom

animate-hide animate-zoom

These classes are triggered interally, so you cannot just add these styles within a WYSIWYG, they are only valid for components and the Custom Class property.

Layout

Bootstrap uses a 12 column grid system, so when you create a component size-6 it will take up half of the screen. But sometimes you want to centre it, or not have something to the left and make it sit right. So for flexibility, use these CSS Bootstrap classes in the Custom Class field of any component to change the alignment, padding, margin and other effects.

mx-auto margin auto both left and right

my auto margin auto both top and bottom

ml-auto margin left auto

mr-auto margin right auto use this with the above one to centre a box in the screen

offset-md-2 this will offset the container so you don’t have to put a filler box before it, as we discussed. This one is a size 2 – replace 2 with any value between 1 and 11.

See here for more details on bootstrap classes.

Image / Card Images

The image and most of the web components for image card / icon card have the ability to set max height and manage image cover.

Use these custom CSS classes on the webpage component.

These will set the min/max height:

height100

height110

height120

height130

height140

height150

height160

height200

height250

height300

height350

height400

height450

height500

height550

height600

height650

height700

height750

This will make the image stretch to fill in all space

object-fit-cover

Then use these to zoom in left/right/top or bottom

object-fit-cover-left

object-fit-cover-right

object-fit-cover-top

object-fit-cover-bottom

This will make the image fit whole within the space

object-fit-contain