arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first init

Browse Source
This commit is contained in:
arifal
2025-01-16 17:16:14 +07:00
commit 84d8f3ca6a
227 changed files with 43922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
resources/views/ui/avatar.blade.php Executable file
View File

@@ -0,0 +1,147 @@
@extends('layouts.vertical', ['subtitle' => 'Avatars'])
@section('content')
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Avatars'])
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Basic Example
</h5>
<p class="card-subtitle">
Create and group avatars of different sizes and shapes with the css classes.
Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or
scale it up to different sizes.
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img src="/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs rounded">
<p>
<code>.avatar-xs</code>
</p>
<img src="/images/users/avatar-3.jpg" alt="image" class="img-fluid avatar-sm rounded mt-2">
<p class="mb-2 mb-sm-0">
<code>.avatar-sm</code>
</p>
</div>
<div class="col-md-3">
<img src="/images/users/avatar-4.jpg" alt="image" class="img-fluid avatar-md rounded" />
<p>
<code>.avatar-md</code>
</p>
</div>
<div class="col-md-3">
<img src="/images/users/avatar-5.jpg" alt="image" class="img-fluid avatar-lg rounded" />
<p>
<code>.avatar-lg</code>
</p>
</div>
<div class="col-md-3">
<img src="/images/users/avatar-6.jpg" alt="image" class="img-fluid avatar-xl rounded" />
<p class="mb-0">
<code>.avatar-xl</code>
</p>
</div>
</div> <!-- end row-->
</div>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Rounded Circle
</h5>
<p class="card-subtitle">
Using an additional class <code>.rounded-circle</code> in <code>&lt;img&gt;</code> element creates
the rounded avatar.
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="/images/users/avatar-7.jpg" alt="image"
class="img-fluid avatar-md rounded-circle" />
<p class="mt-1">
<code>.avatar-md .rounded-circle</code>
</p>
</div>
<div class="col-md-4">
<img src="/images/users/avatar-8.jpg" alt="image"
class="img-fluid avatar-lg rounded-circle" />
<p>
<code>.avatar-lg .rounded-circle</code>
</p>
</div>
<div class="col-md-4">
<img src="/images/users/avatar-9.jpg" alt="image"
class="img-fluid avatar-xl rounded-circle" />
<p class="mb-0">
<code>.avatar-xl .rounded-circle</code>
</p>
</div>
</div> <!-- end row-->
</div>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Images Shapes</h5>
<p class="card-subtitle"> Avatars with different sizes and shapes.</p>
</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-3 align-items-end">
<div>
<img src="/images/small/img-2.jpg" alt="image" class="img-fluid rounded" width="200" />
<p class="mb-0">
<code>.rounded</code>
</p>
</div>
<div>
<img src="/images/users/avatar-5.jpg" alt="image" class="img-fluid rounded" width="120" />
<p class="mb-0">
<code>.rounded</code>
</p>
</div>
<div>
<img src="/images/users/avatar-7.jpg" alt="image" class="img-fluid rounded-circle"
width="120" />
<p class="mb-0">
<code>.rounded-circle</code>
</p>
</div>
<div>
<img src="/images/small/img-3.jpg" alt="image" class="img-fluid img-thumbnail"
width="200" />
<p class="mb-0">
<code>.img-thumbnail</code>
</p>
</div>
<div>
<img src="/images/users/avatar-8.jpg" alt="image"
class="img-fluid rounded-circle img-thumbnail" width="120" />
<p class="mb-0">
<code>.rounded-circle .img-thumbnail</code>
</p>
</div>
</div>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
@endsection