5.6: Styling Member Cards

Now let's add a bit more styling to our cards.

You are free to give your application some personality and flair. These are more suggestions and you are free to customize your site.

Separating The Cards

First, let's add some margin on the top and bottom of our cards so they don't sit directly on top of each other.

In member-list.component.scss add the following:

#card {
    margin: 15px 0 15px 0;
}

Card Styling

In member-card.component.scss add the following styles:

h5 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 1px;
    margin-bottom: 1px;
}

h5 small {
    font-weight: bold;
    font-size: 12px;
    font-style: italic;
}

img {
    transform: scale(1, 1);
    transition-duration: 500ms;
    transition-timing-function: ease-out;
}

.card:hover img {
    transform: scale(1.2, 1.2);
    transition-duration: 500ms;
    transition-timing-function: ease-out;
    opacity: 0.7;
}

.image {
    overflow: hidden;
    position: relative;
}

We adjusted the styling of the text on the card a bit and also added an animation affect when a user hovers over a card.

Adding Buttons to the Cards

Now we're going to add some buttons to the cards that will direct a user to their profile, follow them, or send them a message.

In our member-card.component.html file, we'll add an inline unordered list under the <img> element to hold our icon buttons:

Next we'll give them some styling and animate them:

.member-icons {
    position: absolute;
    bottom: -30%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    opacity: 0;
}

.card:hover .member-icons {
    bottom: 0;
    opacity: 1;
}

.animate {
    transition: all 0.3s ease-in-out;
}