How to Add Multiple Subtitles with Line Breaks

By default, when you try to add multiple subtitles in a ShortPoint List, they will be displayed in a straight line:

This article will demonstrate how to add multiple subtitles with line breaks using Custom CSS:

NOTEThis solution is applicable for Design Elements with a subtitle and a description field. For example: Image List, Icon List, File List, etc.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Option 1: For Static Design Elements
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Edit the Design Element
    • Step 3: Copy the Code
    • Step 4: Paste the code
    • Step 5: Modify Description and Subtitle Content
    • Step 6: Add Multiple Subtitles
    • Step 7: Save
  • Option 2: For Connected Design Elements
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Switch to Grid Mode
    • Step 3: Edit the Design Element
    • Step 4: Copy the Code
    • Step 5: Paste the code
    • Step 6: Modify Description and Subtitle Content
    • Step 7: Add Multiple Subtitles
    • Step 8: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint page.
• You must be a ShortPoint Designer with an active license.
• You must already have a Design Element that has a subtitle and a description on your page.

Interactive Tutorial

Copy the code below before starting the interactive tutorial:

.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;
}

Step-by-step Tutorial

Depending on the Design Element you’re using, choose the option to follow:

Option 1: For Static Design Elements

Select this option if the Design Element you will use is static or is not connected to any SharePoint List / external sources.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

• Click the Edit Properties icon:

Step 2: Edit the Design Element

NOTEBefore proceeding, you must already have a static Design Element that allows adding of subtitles and descriptions. For this guide, we’ll use an Image List.

• Click the EasyPass tag of the Design Element:

• Select the cogwheel icon:

Step 3: Copy the Code

• Copy the Custom CSS code:

.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;
}

Step 4: Paste the code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code in the field provided.

Step 5: Modify Description and Subtitle Content

• Click the back icon:

• Go to the Item tab.
• Select the cogwheel icon of the first item:

NOTEYou will need to add a </br> tag to add more than one subtitle. However, the subtitle field does not support adding of HTML tags. Since you can't use </br> tags directly in the subtitle field to create line breaks, you need to put your multi-line subtitle content into the Description field instead, and move your description content into the Subtitle field.

• Copy/cut the Description content:

• Paste it in the Subtitle field:

• Cut the original subtitle content and paste it into the Description field:

Step 6: Add Multiple Subtitles

• In the Description field, write </br> after the first subtitle:

• Then add the second subtitle:

NOTEIf you have more subtitles to add, make sure to always write </br> before the additional subtitle.

• Click the back icon:

• Repeat steps 5 & 6 for all the other items:

Step 7: Save

• Once satisfied, click the green check mark.
• Click the eye icon to see your page in real-time:

• Save your changes:

Congratulations! You now have multiple subtitles with line breaks.

Option 2: For Connected Design Elements

Select this option if the Design Element you will use is connected to any SharePoint List / external sources.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

• Click the Edit Properties icon:

Step 2: Switch to Grid Mode

NOTECurrently, ShortPoint Connect is only available in Grid Mode.

• Click the Switch to Grid Mode icon:

Step 3: Edit the Design Element

NOTEBefore proceeding, you must already have a connected Design Element that allows adding of subtitles and descriptions. For this guide, we’ll use an Image List.

• Hover over the Design Element and select the cogwheel icon:

Step 4: Copy the Code

• Copy the Custom CSS code:

.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;
}

Step 5: Paste the code

• Go to the Custom CSS tab.
• Paste the code in the field provided.

Step 6: Modify Description and Subtitle Content

• Go to the Item tab.

NOTEYou will need to add a </br> tag to add more than one subtitle. However, the subtitle field does not support adding of HTML tags. Since you can't use </br> tags directly in the subtitle field to create line breaks, you need to put your multi-line subtitle content into the Description field instead, and move your description content into the Subtitle field.

• Delete the content inside the subtitle and description fields:

• In the subtitle field, add the property that's supposed to be in the Description field. This will now show as the item Description:

• In the description field, choose the first property you want to be a subtitle:

Step 7: Add Multiple Subtitles

• In the description field, write </br> after the first subtitle:

• Then, add the second property you want to be a subtitle:

NOTEIf you have more subtitles to add, make sure to always write </br> before the additional subtitle.

Step 8: Save

• Once satisfied, click Preview.
• Then, select Update
• Click the eye icon to see your page in real-time:

• Save your changes:

Congratulations! You now have multiple subtitles with line breaks.

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