164 lines
8.3 KiB
PHP
164 lines
8.3 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Avatar')
|
|
|
|
@push('style')
|
|
<!-- CSS Libraries -->
|
|
@endpush
|
|
|
|
@section('main')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Avatar</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
|
<div class="breadcrumb-item">Avatar</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Avatar</h2>
|
|
<p class="section-lead">Avatars are user profile pictures. Thanks to <a
|
|
href="https://picturepan2.github.io/spectre/components/avatars.html">Spectre.css</a>.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Avatar</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<figure class="avatar avatar-xl mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar avatar-lg mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-5.png') }}"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar avatar-sm mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-3.png') }}"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar avatar-xs mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
alt="...">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Avatar Icon</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<figure class="avatar avatar-xl mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
alt="...">
|
|
<img src="{{ asset('img/avatar/avatar-5.png') }}"
|
|
class="avatar-icon"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar avatar-lg mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
alt="...">
|
|
<img src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
class="avatar-icon"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-3.png') }}"
|
|
alt="...">
|
|
<img src="{{ asset('img/avatar/avatar-3.png') }}"
|
|
class="avatar-icon"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar avatar-sm mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
alt="...">
|
|
<img src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
class="avatar-icon"
|
|
alt="...">
|
|
</figure>
|
|
<figure class="avatar avatar-xs mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-5.png') }}"
|
|
alt="...">
|
|
<img src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
class="avatar-icon"
|
|
alt="...">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Avatar Presence</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<figure class="avatar avatar-xl mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-1.png') }}"
|
|
alt="...">
|
|
<i class="avatar-presence online"></i>
|
|
</figure>
|
|
<figure class="avatar avatar-lg mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-2.png') }}"
|
|
alt="...">
|
|
<i class="avatar-presence busy"></i>
|
|
</figure>
|
|
<figure class="avatar mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-3.png') }}"
|
|
alt="...">
|
|
<i class="avatar-presence away"></i>
|
|
</figure>
|
|
<figure class="avatar avatar-sm mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-4.png') }}"
|
|
alt="...">
|
|
<i class="avatar-presence offline"></i>
|
|
</figure>
|
|
<figure class="avatar avatar-xs mr-2">
|
|
<img src="{{ asset('img/avatar/avatar-5.png') }}"
|
|
alt="...">
|
|
<i class="avatar-presence online"></i>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Avatar Initial</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<figure class="avatar avatar-xl mr-2"
|
|
data-initial="UM"></figure>
|
|
<figure class="avatar avatar-lg bg-danger mr-2 text-white"
|
|
data-initial="UM"></figure>
|
|
<figure class="avatar bg-warning mr-2 text-white"
|
|
data-initial="UM"></figure>
|
|
<figure class="avatar avatar-sm bg-success mr-2 text-white"
|
|
data-initial="UM"></figure>
|
|
<figure class="avatar avatar-xs bg-info mr-2 text-white"
|
|
data-initial="UM"></figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<!-- JS Libraies -->
|
|
|
|
<!-- Page Specific JS File -->
|
|
@endpush
|