Hitchhiker card styling for description texts with deviating lengths and formatting

Search Best Practices - Search Front-End
1

Hi team,

I have a question in regards to rich text descriptions I’d like to use on the results card for articles.

The issue: I’d like to surface the first paragraph of my articles as short descriptions but these are formatted as rich text so there might potentially be headlines with a varying font size or other elements included.

  1. Can I use truncation?
  2. How can make sure all result cards have the same height despite having text with deviating formatting?

Thanks in advance!
Hauke

2

Hey Hauke,
These are good questions!
Of course you can use truncation in order to show the first x text characters of your article.
If it’s super important for you to have a fixed card height due to the rich text formatting, there’s an alternative solution: You could define the fixed card height instead and apply a fade out (from transparent to background color) at the bottom of the card to make sure the elements don’t get cut off.
In your answers.scss just reference the CSS class of your card and use the following code:

.HitchhikerDocumentStandard-cardDetails {
max-height: 100px;
overflow: hidden;
position: relative;
&::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
background: linear-gradient(rgba(255,255,255,0), #fff);
content: ‘’;
}
}

Hope this helps! Let me know if you have any questions!

3

Hi Federica, Thanks for the fast answer! The code for the fixed card height was very easy to integrate and it looks great now!