---
menu: a.b.c
---

<div class="row">
	<div class="col-md-6 col-xl-4">
		{% assign person = site.data.people[0] %}
		<div class="card">
			<div class="card-img-top embed-responsive embed-responsive-21by9">
				<div class="embed-responsive-item bg-cover" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></div>
			</div>
			{% include ui/avatar.html person=person size="xl" class="mt-n5 mx-auto card-avatar" %}
			<div class="card-body text-center">
				<h2 class="mb-3">{{ person.full_name }}</h2>
				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed tempora ut voluptas, voluptatem!</p>
			</div>
		</div>
		{% include cards/user-info.html %}
	</div>

	<div class="col-4">
		{% include ui/button.html modal="default" %}
		{% include parts/modals/simple.html id="default" %}
	</div>

	<div class="col-4">
		{% include cards/charts/total-sales.html %}
	</div>
	<div class="col-8"></div>
</div>
<div class="row">
	<div class="col-md-6">

		<div class="card">
			<div class="card-body">
				<div>{% include ui/stars.html %}</div>
				<div>{% include ui/stars.html count=3 %}</div>
				<div>{% include ui/stars.html color="red" %}</div>
				<div>{% include ui/stars.html filled=true %}</div>
				<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
				<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
	</div>
</div>
<div class="row">
   <div class="col-10 col-sm-8 col-md-6 col-lg-4">
      <div class="card">
         <div class="card-body d-flex justify-content-between table-responsive">
            <p class="mb-0 mr-3 d-flex align-items-center text-nowrap">Pick date:</p>
            <input type="text" name="dates" class="form-control text-center ml-4" size="20">
         </div>
      </div>
   </div>
</div>