How to create an Avatar Card with Ionic 5

Recently I had been working on a new app and I decided to share the progress on social media. Below is the original tweet, which as a write these lines has almost 2K views.

It was also well-received on a popular Facebook group related to Ionic development. So I thought that it will be nice to share more technical stuff with the dev community.

Some folks were asking mainly about 2 things: how to get the Avatar Card and how to animate the views when the ion-segment-button is clicked.

In this post, we will review how to create that nice Avatar Card design.

Card Avatar

Before starting make sure that you're using Ionic 5. Note that some classes and icons won't work on previous versions.

As you can see in the code below, the card template is very straightforward. I added a div to act as a container for the image and the camera button. Notice that we're also applying the class img-wrapper in order to style the container and their children easily.

Template

<ion-card color="light">
  <div class="img-wrapper">
    <img src="./assets/imgs/lady_3.jpg" />
    <ion-button color="light">
      <ion-icon slot="icon-only" name="camera-outline" color="medium">
      </ion-icon>
    </ion-button>
  </div>
  <ion-card-content class="ion-text-center">
    <h2>Zahra Zamin</h2>
    <ion-text color="medium">
      <div style="display: flex;" class="ion-justify-content-center">
        <ion-icon name="location-outline" color="medium">
        </ion-icon>
        <p>2345 Street, Ohio, USA.</p>
      </div>
    </ion-text>
  </ion-card-content>
</ion-card>

Styles

To put the Avatar at the top-center, we will set the img-wrapper position to absolute. This will allow us to move the container from their relative position using the top and left attributes.

To center our container horizontally the left property should be equal to 50% and with some transform magic our img-wrapper should be good to go.

It's important to add the following attributes to the ion-card as well: position: relative and overflow: visible. Otherwise, our img-wrapper will be displayed incorrectly.

We also added padding-top: 60px to prevent the ion-card-content from being displayed below our img-wrapper.

Note that to make the ion-button appear at the bottom-right we set their position to absolute and also we modified their appearance with CSS variables. To make it circular the key is to set the CSS variable --border-radius: 50% and set the width and height to the same value, in our case 26px.

ion-card {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  overflow: visible;
  margin: 16px 0 24px;
  position: relative;
  padding-top: 60px;

  .img-wrapper {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    img {
      border-radius: 10px;
      width: 80px;
      height: 80px;
    }

    ion-button {
      --border-width: 1px;
      --border-color: var(--ion-color-light-shade);
      --border-style: solid;
      --padding-start: 0;
      --padding-end: 0;
      --padding-bottom: 0;
      --padding-top: 0;

      --border-radius: 50%;
      height: 26px;
      width: 26px;

      position: absolute;
      right: -10px;
      bottom: -10px;

      ion-icon {
        width: 14px;
        height: 14px;
      }
    }
  }
}

And that's it! 😅 I hope you enjoyed this post and have learned something new. You can follow me on Twitter as well where I share tips about web development and programming in general.

Stay tuned for the next article 👀, as we will review how to code the ion-segment with the view animations! 🔥