카드 헤더

홍길동

미리보기

홍길동

UI 디자이너

원본 이미지 경로(img/...)는 참고용 표시이며, 이 미리보기에서는 자리 표시 이미지로 대체되었습니다.

소스

<div class="card overflow-auto">
    <div class="card-header">
        <div>
            <div class="row align-items-center">
                <div class="col-auto">
                    <span class="avatar" style="background-image: url(../../img/avatars/000m.jpg)"></span>
                </div>
                <div class="col">
                    <div class="card-title">홍길동</div>
                    <div class="card-subtitle">UI 디자이너</div>
                </div>
            </div>
        </div>
        <div class="card-actions">
            <a href="#" class="btn">
                <i class="f:20 ti ti-phone"></i>
                전화
            </a>
            <a href="#" class="btn">
                <i class="f:20 ti ti-mail"></i>
                이메일
            </a>
        </div>
    </div>
</div>