In certain cases there is a need to use two or even more pieces of information in the Subtitle of a ShortPoint Image List Element. This can be used, for example, to present the date and author information, like in the screenshot below:

Although there is no obvious solution in the element interface, we can apply some custom CSS along with an HTML tag to create two or more subtitles.

Note: In this example we will be using the ShortPoint Image List element. The solution is very similar for other list elements; yet the code will need a slight modification. Please contact us if you would like to request a custom code for other ShortPoint list elements.

Before we start:

1. We presuppose here that you have ShortPoint installed in your environment.

2. We will start with an already existing Image List. To know more about inserting elements and modifying settings, please check this article: Exercise 4: Add a New Design Element.

3. A little background information: the field can be broken down into two or more lines with an HTML <br/> tag. The problem is, in the Image List element, only the Description field supports HTML, but we want to target the Subtitle field. The Subtitle field does not support HTML, so the custom CSS code below will switch the position of Subtitle and Description and apply the customization of fonts in a way that the element looks natural. You will therefore be able to use the <br/> tag in the Description field and make it look like a Subtitle.

Step 1: Insert Custom CSS

Here is the CSS coding we created for you to use:

.shortpoint-listitem-content {
  display: flex;
  flex-direction: column;
}

.shortpoint-listitem-description {
  order: 2;
  color: #3caeff;
  font-size: 12px;
}

.shortpoint-listitem-subtitle {
  order: 3;
  color: black!important;
  font-size: 15px;
}

*please note that the custom colors applied here are created for the default SharePoint color theme and can be changed to your preference.

Copy the code, switch to Custom CSS tab of the Image List element and paste the code there:

*To learn more about custom CSS in Page Builder elements, please read this article: How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) 

Step 2: Use the <br/> tag in the description

Now, you need to switch to Items tab. Exchange the information in Subtitle and Description (switch positions).

Then, in the Description field, use the <br/> tag to break down the field into multiple lines:

You can do the same for connected elements if you want to present the information from multiple columns in multiple lines:

*To learn more about connected elements, please check this article: ShortPoint Connect: Basic Tutorial.

Ready! Here is what you will be able to have as a result of this tutorial:

Related articles:

• How to Make the Tiles Display Regular Font Instead of Bold 
• How to change the hover color of the Link 
• How to Control Default Tile Transparency with Custom CSS