iiCe89

Posted 9 months ago

Using Hero patterns to style profile cards

View Profile

I love using hero patterns by Steve Schoger and you may have noticed Signl has them in several places! one being your profile card. Designing the profile area was quite complicated in terms of making it both look great and still allow the user to customise the background colour to give it more personality.  Firstly i began using solid colours however that quickly ended as it looked really out of place, a solid block of colour floating about isn't really that great looking as you can see below.

Signl was built using Bootstrap 3 and both the summary cards and profile cards are using the bootstrap panel components. but you can use any css framework from Bulma to TailwindCss or any other available.

<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

This is the most basic panel shown above that we will be using to create this profile card.

<div class="panel panel-default">
<div class="overlay-card">
<img src="https://images.unsplash.com/photo-1500397822960-47532107e0e4?auto=format&fit=crop&w=1310&q=80"
class="img-rounded center-block">
<div class="row text-center">
<h5>Joe Bloggs</h5>
<a class="btn btn-follow btn-sm text-center" href="#" role="button">Follow me</a>
</div>
</div>
<div class="panel-body text-center">
Web Developer ⚡️ Founder - @signl_ create and share tutorials in frontend design/dev & more
</div>
</div>

The profile card use's a really basic structure for creating the profile card:

and thats it pretty simple.

We will start working are way down, so first off we will create our background div which will show the hero pattern.

<div class="panel panel-default">
<div class="overlay-card">
<img src="https://images.unsplash.com/photo-1500397822960-47532107e0e4?auto=format&fit=crop&w=1310&q=80"
class="img-rounded center-block">
<div class="row text-center">
<h5>Joe Bloggs</h5>
<a class="btn btn-follow btn-sm text-center" href="#" role="button">Follow me</a>
</div>
</div>
<div class="panel-body text-center">
Web Developer ⚡️ Founder - @signl_ create and share tutorials in frontend design/dev & more
</div>
</div>

This div named .Overlay-card will sit under the panel-default as you can see above, this div section has your profile image , username & the follow button and displays the background pattern/colour.

Now for the css part.

.overlay-card{
background-color:#222;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23fdfcff' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E");
height:240px;
padding-top:25px;
}

here we have the background colour & the SVG background image which is our Hero pattern. we have also set the background size and applied padding to the top to stop our profile image hitting  our panel. We need to pick out our hero pattern from the website here we can quickly copy&paste our css so all we will need to do ourselves is add in the height & padding to make the final adjustments.



Hero pattern website screenshot

i would recommend playing with the opacity of the foreground image in your pattern so its not overpowering, Then you can set the background colour to anything you wish. When creating a social area you can add in a color-picker to then allow the user to change the original background colour to something they want.


Now our profile card look's so much better and give's the card more style and doesn't look so basic now with just a solid colour.

The profile image use's the .img-rounded class to style our profile image and to stop it looking so flat we can add the white border or if you prefer add a dropdown-shadow.

.img-rounded{
border-style:solid;
border-color:#fff;
border-width:3px;
border-radius:100px;
height:100px;
width:100px;
margin-bottom:10px;
}

i have set the height & width of our image to 100px by 100px again this is up to you and you can play about.

Below you can see the final result & code:

https://codepen.io/iiCe89/pen/xpXQNL

Must be logged in to comment
Using Hero patterns to style profile cards / Welcome to Signl