Circular Photos in Key Contacts list

Developers/Partners
1

Hi,

I am trying to put together a key contacts list in our app. Our brand style headshot images are circular, but the list from data source doesn’t allow for this.

You can see from the list above (highlighted in orange) I’ve added a manual list, which does allow for circular images, but it would be preferable to use the list from data source so that we don’t need to manually add data for each contact.

Is this something you could build please?

Thanks.

Screenshot - Key Contacts in app
Screenshot - Key Contacts in app516×641 30.3 KB

1 Like
2

Hello!

Images can be made round with a bit of custom CSS that is added to the screen CSS:

/* start of rounded image */
.new-small-card-list-container .small-card-list-wrapper .small-card-list-item{
  border-top-left-radius: 40px !important;
  border-bottom-left-radius: 40px !important;
  .small-card-list-image{
    width: 80px;
    min-width: 80px;
    border-radius: 50%;
  }
}
/* end of rounded image*/

And this is how it should look like:

image
image1056×1066 99.2 KB