How to create an Avatar Card with Ionic 5
Tags: ionic, css, html, javascript
Published: 2020-10-16 17:29:21

---
title: How to create an Avatar Card with Ionic 5
published: true
description:
tags: ionic,css,html,javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4kt4lfpom915fku6oys8.png
---

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.

{% twitter 1316798725738635265 %}

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

```html
<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`.

```scss
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](https://twitter.com/fm3ndoza) 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! 🔥