UHF-5532: Contact card visual adjustments

[teroelonen]

UHF-5532

What was done

• Changed contact card mobile layout to include the image on top instead that it would go next to the information.
• Add some more space between social media icons and other content.
• Hyphenate all the contact card information when needed.
• Fix naming convention on the css classes.

How to install

• Make sure your instance is up and running on latest dev branch.
  • git pull origin dev
  • make fresh
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-5532
• Run make drush-cr

How to test

• Add a page with contact card listing and add contact cards with all the information that you can write on them. Add also one with just the picture and name filled.
• Make sure the picture is always above the text even in mobile.
• Check that there is a 16px space above and below social media information. Also there should be 16px space above description always.
• Create another contact card listing without images. Make sure the layout works correctly and looks similar to what the production version https://www.hel.fi/fi/sosiaali-ja-terveyspalvelut/terveydenhoito/paihdepalvelut/paihdekuntoutus/paihdehuollon-jalkikuntoutus looks like.
• Check that code follows our standards

Designers review

• This PR has been visually reviewed by a designer (Sami Haikonen)

[github-actions]

⚠️ Visual regression found! Please check if this change is wanted or accidental. You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt/pull/910/html_report/