Can I list bullet points in columns on a card?

[Hannah_Mussi]

Hello! I have a client who has this 1 “Build Your Own” product entity, where all the copy is in the entity’s RichTextDescription.

They are interested in formatting it in columns to help parse through some of that content. Is this possible using css? I mocked something up to help visualize what they’re envisioning:

[Kristy_Huang]

Hi Hannah,

Looks like you set this field up as a rich text field, but you won’t be able to set multiple columns with all the details as one rich text field. The solution here will take a bit more customization: break out the description into separate text list fields to piece together with HTML and style individual sections with CSS. Essentially, you will follow Example 2 in the Changing Card Layout unit to add additional lists.

In your Answers front-end, update the following:

1. [card] > component.js: Add data mappings so the newly created fields are accessible in the template. There are 3 possible components for each list (sectionTitle, listTitle, and listItems). For content through make a salad, you can use the following:

sectionTitle1: 'Step 1: Pick a Protein',
listItems1: profile.c_protein,
sectionTitle2: 'Step 2: Choose A Base',
listTitle2a: 'Make it a wrap',
listItems2a: profile.c_wrap,
listTitle2b: 'Make it a salad',
listItems2b: profile.c_salad,

2. [card] > template.hbs: Replace the content within the {{> details }} partial with the new content (another option is to break this into multiple partials, similar to the Card Layout unit list example):

{{#*inline 'details'}}
{{#if (any card.listItems1 card.listItems2a card.listItems2b)}}
<div class="HitchhikerProductProminentImage-cardDetails">

    *repeat list content below for each list*

</div>
{{/if}}
{{/inline}}

For each list, you can use the below. Customizations for each list are:

• Note not every list has a sectionTitle and listTitle - null checks come in here for when fields aren’t mapped in component.js. You can also delete the appropriate lines for any fields not in use. For example, since listTitle1 is not relevant for the first list, delete lines 8-12.

• Make sure to update the references to point to the correct list (ex. change card.listItems1 to card.listItems2a for the base-wrap list).

• Add a class (such as protein, base, or base-wrap in case you want to add specific styling to this list later on.

  {{#if (any card.sectionTitle1 card.listItems1)}}
  <div class="HitchhikerProductProminentImage-sectionWrapper protein">
    {{#if card.sectionTitle1}}
    <div class="HitchhikerProductProminentImage-sectionTitle protein">
      {{card.sectionTitle1}}
    </div>
    {{/if}}
    {{#if card.listTitle1}}
    <div class="HitchhikerProductProminentImage-listTitle protein">
      {{card.listTitle1}}
    </div>
    {{/if}}
    {{#if card.listItems1}}
    <ul class="HitchhikerProductProminentImage-listItems protein">
      {{#each card.listItems1}}
      <li class="HitchhikerProductProminentImage-item protein">
        {{this}}
      </li>
      {{/each}}
    </ul>
    {{/if}}    
  </div>
  {{/if}}
  

3. answers.scsss: Update styling. The following CSS does a few things:

• Set the column width of ul class .HitchhikerProductProminentImage-listItems. This automatically adjusts the number of columns based on the screen size. Add a gap between columns and space below each list.

• Bold the step numbers (.HitchhikerProductProminentImage-sectionTitle)

• Underline the list titles (.HitchhikerProductProminentImage-listTitle)

  .HitchhikerProductProminentImage-listItems {
    margin-left: 1rem;
    list-style-type: disc;
    column-width: 125px;
    column-gap: 10px;
    margin-bottom: 1rem;
  }
  
  .HitchhikerProductProminentImage-sectionTitle {
    font-weight: bold;
  }
  
  .HitchhikerProductProminentImage-listTitle {
    text-decoration: underline;
  }
  

Putting all of that together gives the following card:

[Hannah_Mussi]

Thanks so much @Kristy_Huang ! Looks great!