Fields component layout

[rexcadiz]

Hello,
I’m building a timeline using the fields component. I want to have it show fields in a list vs grid layout. In the desktop version of the app this component always displays values in the grid view.

Is there any way to switch it to a normal list view. Or is the only way to do it is to customize CSS? thank you!

[Himaladin]

Can you include a screenshot to clarify what you’re trying to achieve?

[rexcadiz]

This is what fields component looks by default on desktop:

And this is what I want it to look like:

[Himaladin]

You can use HTML only, unless you have another intention. Copy this code into the rich text component or template column.

<div style="font-size: 14px; line-height: 1.5;">
  <div style="color: var(--gv-text-contextual-pale);">Shipping label emailed</div>
  <div style="color: var(--gv-n900);">Wednesday 6 March 2024 at 22:54:45</div>
  <div style="color: var(--gv-text-contextual-pale);">Form Submission</div>
  <div style="color: var(--gv-n900);">Wednesday 6 March 2024 at 22:55:02</div>
</div>

[rexcadiz]

This won’t work with a component though as data is dynamic and not static?

[Himaladin]

Copy to the template column, replace the {sendDate} and {subDate} with the desired column. Then use rich text to display the template column. This way, you get dynamic values.

<div style="font-size: 14px; line-height: 1.5;">
  <div style="color: var(--gv-text-contextual-pale);">Shipping label emailed</div>
  <div style="color: var(--gv-n900);">{sendDate}</div>
  <div style="color: var(--gv-text-contextual-pale);">Form Submission</div>
  <div style="color: var(--gv-n900);">{subDate}</div>
</div>

[rexcadiz]

thank you!