How can we help you today?

How to Make a List Display Multiple Subtitles

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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 64 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more