1. Types of appearance styles

HTML block appearance styles

You can select the following Sitecore Discover HTML block appearance styles.

Free Form HTML Block

Select this option when you want to create your own HTML code to create an appearance style.

Paste your HTML in the free-form Content field. You do not have to configure any other settings.

Title and description

This appearance style has a title and an optional description.

The following image shows an example of the title and description appearance style:

This image shows dark gray text against a white background. There is a title in all-caps in a large font and description text in a smaller font.

To use this appearance style, configure the following settings:

  • Basic Settings
  • Advance Settings
  • Fonts Settings
  • Box Model Settings

Call To Action - Horizontal desktop - Vertical mobile

This appearance style has an image, content, and a button. It appears horizontally on desktop and tablet devices, and vertically on mobile devices.

The following image shows an example of this appearance style on a desktop:

This rectangular image shows a part of a lady's face with sunglasses. There is overlay text on the left side and a call-to-action button on the right side.

To use this appearance style, configure the following settings:

Call To Action Vertical

This appearance style has an image, content, and a button. It appears vertically on all devices.

The following image shows an example of this appearance style:

This vertical image has a picture on the top, overlay text under the picture, and a call-to-action button under the text.

To use this appearance style, configure the following settings:

Image Grid

This appearance style has a grid of up to ten images with titles.

The following image shows an example of this appearance style:

This image has a title and a grid of six circles underneath the title. There are three circles in the top row and three in the row below. Each circle has an image and some overlay text.

To use this appearance style, configure the following settings:

2-3 Tabs

This appearance style has horizontal tabs with a widget container for each tab.

The following image shows an example of this appearance style:

This image has two tabs, Tab 1 and Tab 2. Tab 1 is selected and has a title and a grid of six images underneath the title. All images are in a single row, and there is text under each image.

To use this appearance style, configure the following settings:

If you have suggestions for improving this article, let us know!