How To Change The Design of Card Elements

  • 5 May 2020
  • 1 reply
  • 332 views

Userlevel 2
Badge +2
  • Gainsight Employee: Golden Ruler
  • 345 replies

Cards are powerful UI elements that bundle important information together and allows the user to quickly scan and navigate the pages of your platform. The Card element is common in the inSided platform and used for the following:

  • Quick links

  • Community category cards

  • Knowledge base category card

  • Category cards on parent category

  • Featured topics

Example of Community- and Knowledge base category cards

 

How To Change The Design of Card Elements

  1. Sign in to a community account with user role Community Manager or Administrator
  2. Click the purple Theme button and select Cards
  3. Configure the basic settings that apply for all cards:
    1. Border radius
    2. Border width
  4.  Click Default, Hover, Click to select which card state you want to configure
    1. For background, text and border color provide a color in HEX or RGBa format; Decrease the opacity slider all the way to ‘0’ if you want to have a transparent background.
    2. For button shadow provide an RGBa code, x-axis, y-axis, and radius, leave empty if you don’t want a shadow.
  5. Click Publish

 

Note: Card elements will inherit the title, text and border color configured in “Colors” by default. If you wish to set a custom color for any of these elements you’ll need to uncheck the “Use X color” checkbox below the input field.


1 reply

Userlevel 3
Badge +1

For some reason all the card types doesn´t have horizontal scroll bar below the cards, when using mobile device. Can I add it somehow? Scroll bar indicates for the users that there are cards “hidden” and you should scroll right in order to see them. 

Reply