Umbraco Backoffice Documentation

Slider

3D carousel of customizable action cards with controls on the left and right to slide through the cards. Slider is displayed with 3 visible cards on desktop and tablet, and one on mobile devices. The middle card is bigger than the other two to make it the main focus of the Slider.

Colorful Slider cards with bingo game banners, title, description and a button.

bingo50 game banner

bingo50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

bingo80 game banner

bingo80

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu euismod diam. Nam semper iaculis eros eget suscipit. Nulla congue ex sed euismod suscipit.

bingo lite game banner

bingo lite

Nam sit amet rhoncus lorem. Nunc vulputate lectus erat, et imperdiet urna vehicula eu.

bingo60 game banner

bingo60

Morbi rutrum semper risus. Proin cursus magna vel ex mattis efficitur. Ut sit amet vehicula risus. Praesent non lorem gravida odio iaculis rhoncus in a mi. Ut id sem sit amet ante ultricies sodales.

Content

Slider page component has one mandatory content parameter:

  • Slides - list of customizable action cards.

Slides

List of customizable action cards which can be built using Card Items. It needs a minimum of three and unlimited maximum number of Card Items.

Card Item

Slider building element which has four content parameters:

  • Title - the title of the Card Item which is displayed below the Picture.
  • Description (optional) - text description which is displayed below the Title.
  • Picture - a Picture element which is displayed at the top of the card. Image supports a variety of media formats and image transparency. Also, it is very important to add a detailed image content description for the website to be accessible.
  • Button (optional) - a URL to another page or website. This will create a button at the bottom of the card.

Also, it has three settings:

  • Hide - hides the element in Slider component.
  • Button Color - sets the card button color and overwrites Slider Button Color setting if present.
  • Card Color - sets the card color and overwrites Slider Card Color setting if present.

Settings

Slider page component has the following settings:

Container Size

Sets the Slider container height. The Slider container does not automatically change based on the card size inside, thus, it needs to be set. There are 3 sizes to choose from - small, medium and large.

Small Slider

Small Slider should be used for cards that only have a title and/or a button.

Pattern

Lorem ipsum

Pattern

Lorem ipsum

Pattern

Lorem ipsum

Pattern

Lorem ipsum

Medium Slider

Medium Slider should be used for cards that have 1-3 sentence description, a title and/or a button.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Large Slider

Large Slider should used for cards that have anything above 4 sentences of description, a title and/or button.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex massa, tincidunt et volutpat a, tincidunt eu mi. Nullam porta neque felis, ac viverra neque venenatis id. Duis sed sollicitudin elit, et pharetra eros. Fusce egestas bibendum ornare. Maecenas semper ullamcorper lectus, vel iaculis libero efficitur sit amet.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex massa, tincidunt et volutpat a, tincidunt eu mi. Nullam porta neque felis, ac viverra neque venenatis id. Duis sed sollicitudin elit, et pharetra eros. Fusce egestas bibendum ornare. Maecenas semper ullamcorper lectus, vel iaculis libero efficitur sit amet.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex massa, tincidunt et volutpat a, tincidunt eu mi. Nullam porta neque felis, ac viverra neque venenatis id. Duis sed sollicitudin elit, et pharetra eros. Fusce egestas bibendum ornare. Maecenas semper ullamcorper lectus, vel iaculis libero efficitur sit amet.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex massa, tincidunt et volutpat a, tincidunt eu mi. Nullam porta neque felis, ac viverra neque venenatis id. Duis sed sollicitudin elit, et pharetra eros. Fusce egestas bibendum ornare. Maecenas semper ullamcorper lectus, vel iaculis libero efficitur sit amet.

Card Image Size

Sets the cards image size. It is only recommended to use it when the image has transparency, otherwise, it won't look great on the cards.

Extra Small Slider cards images

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo.

Small Slider cards images

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Medium Slider cards images

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Card Image Type

Sets the card image shape type. By default the card image is 3:2 image aspect ratio, this setting changes the form factor of the image. However, it is only recommended to use it when the image has transparency, otherwise, it won't look great on the cards.

This setting can be combined with the Card Image Size setting to display different size and shape card Images.

Slider with Square Icon (1:1 image aspect ratio) images

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit.

Slider with Extra Small Card Image Size and Square Icon (1:1 image aspect ratio) images

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Button Color

Sets the card button color. The button colors are the same as showcased in the Button Color section in the Button page.

Card Color

Sets the card color.

White Slider cards

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Dark Teal Slider cards

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Bright Teal Slider cards

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Green Slider cards

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Yellow Slider cards

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Pattern

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam nulla in eleifend hendrerit. Donec vel est eu leo dictum imperdiet eu at lorem.

Previous section:

Profile Cards

Next section:

Contact Cards