View on GitHub

Profile header

Simple profile headers to show off a user’s profile information

On this page

Examples

Dave Gamache

I wish i was a little bit taller, wish i was a baller, wish i had a girl… also.

html

<div class="profile-header text-center" style="background-image: url(/docs/assets/img/examples/iceland.jpg); ">
  <div class="container-fluid">
    <div class="container-inner">
      <img class="rounded-circle media-object" src="/docs/assets/img/examples/avatar-dhg.png" alt="Dave Gamache avatar">
      <h3 class="profile-header-user">Dave Gamache</h3>
      <p class="profile-header-bio">I wish i was a little bit taller, wish i was a baller, wish i had a girl&hellip; also.</p>
    </div>
  </div>
  <nav class="profile-header-nav">
    <ul class="nav nav-tabs justify-content-center">
      <li class="nav-item">
        <a class="nav-link active" href="#">Photos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Others</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Anothers</a>
      </li>
    </ul>
  </nav>
</div>

CSS

Sass variables

$profile-header-height:                  $spacer * 31.3;
$profile-header-height-sm:               $profile-header-height * .8;
$profile-header-height-xs:               $profile-header-height-sm * .7;
$profile-header-padding-bottom:          3.2rem;

$profile-header-container-inner-width:   $spacer * 18.8;

$profile-header-media-object-width:      $spacer * 6.9;
$profile-header-media-object-width-sm:   $profile-header-media-object-width * .7;
$profile-header-media-object-box-shadow: 0 ($spacer * .1) ($spacer * .2) rgba($black, .05);

$profile-header-bio-font-size:           $font-size-base;
$profile-header-bio-color:               $white;

$profile-header-user-margin-top:         $spacer * 1.3;
$profile-header-user-color:              $white;

$profile-header-nav-link-padding-x:      $spacer * .6;
$profile-header-nav-link-padding-bottom: $spacer * 1.1;
$profile-header-nav-link-font-size:      $font-size-base;
$profile-header-nav-link-color:          rgba($white, .5);
$profile-header-nav-link-hover-color:    $white;
$profile-header-nav-active-margin-left:  -($spacer * .6);
$profile-header-nav-active-border-width: $border-width * 10;