<div class="mx-auto" style="max-width: 1200px;">
<div class="card card-block border-0" style="background: none;">
<div class="row">
<!---------------- STORY BLOCK ---------------->
<div class="col-12 col-lg-6 my-auto p-1" style="border-radius: 20px">
<div style="box-shadow: 0 0 5px #000; border-radius: 20px">
<h1 class="display-4 text-uppercase m-0 p-2" style="background-color: #ff3a3a; color: #fff; border-radius: 20px 20px 0 0">Title<span class="pull-right d-none d-lg-block">[Genre] <i class="fas fa-book"/></span></h1>
<ul class="nav nav-tabs row no-gutters justify-content-between" style="max-height: 40px">
<li class="nav-item col"><a class="btn btn-block bg-info show active rounded-0" style="color: #fff" data-toggle="tab" href="#ONE"><i class="fas fa-info-circle"/> Info</a></li>
<li class="nav-item col"><a class="btn btn-block bg-danger show rounded-0" style="color: #fff" data-toggle="tab" href="#TWO"><i class="fas fa-warning"/> Content Warnings</a></li>
</ul>
<div class="tab-content">
<!---------------- FOLDER INFO ---------------->
<div class="tab-pane fade in active show" id="ONE">
<div class="p-3" style="height: 210px; overflow: auto; background-color: #fff; color: #000; border-radius: 0 0 20px 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!---------------- END FOLDER INFO ---------------->
<!---------------- CONTENT WARNINGS ---------------->
<div class="tab-pane fade in show" id="TWO">
<div class="p-3" style="height: 210px; overflow: auto; background-color: #fff; color: #000; border-radius: 0 0 20px 20px;">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
</ul>
</div>
</div>
<!---------------- END CONTENT WARNINGS ---------------->
</div>
</div>
</div>
<!---------------- END STORY BLOCK ---------------->
<!---------------- CHARACTERS BLOCK ---------------->
<div class="col-12 col-lg-6 my-auto p-1" style="border-radius: 20px">
<div style="box-shadow: 0 0 5px #000; border-radius: 20px">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" style="border-radius: 20px">
<!---------------- CHARACTER 1 ---------------->
<div class="carousel-item active">
<h1 class="display-4 text-uppercase m-0 p-2" style="background-color: #ff3a3a; color: #fff; border-radius: 20px 20px 0 0">
<a class="pull-left" href="#carouselIndicators" role="button" data-slide="prev">
<i class="fas fa-chevron-left" style="color: #fff"></i>
<span class="sr-only">Previous</span>
</a>
<a class="pull-right" href="#carouselIndicators" role="button" data-slide="next">
<i class="fas fa-chevron-right" style="color: #fff"></i>
<span class="sr-only">Next</span>
</a>
<a href="LINK" style="color: #fff">Character Name</a>
<span class="pull-right d-none d-lg-block">[Knight] <i class="fas fa-sword"/></span>
</h1>
<div class="p-0" style="color: #000">
<div class="row no-gutters">
<div class="col-12 col-lg-4 p-0">
<div class="w-100 h-100" style="background-image: url(https://via.placeholder.com/200x200); background-size: 100% 100%"></div>
</div>
<div class="col-12 col-lg-8 p-0">
<div class="p-3" style="height: 250px; overflow: auto; background-color: #fff; color: #000">
<p class="text-center"><i class="fas fa-quote-left pull-left"/><i class="fas fa-quote-right pull-right"/>Cool Quote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<hr style="background-color: #c1c1c1">
<p class="display-4 text-uppercase m-0 p-2" style="font-size: 25px;">Summary</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!---------------- END CHARACTER 1 ---------------->
<!---------------- CHARACTER 2 ---------------->
<div class="carousel-item">
<h1 class="display-4 text-uppercase m-0 p-2" style="background-color: #ff3a3a; color: #fff">
<a class="pull-left" href="#carouselIndicators" role="button" data-slide="prev">
<i class="fas fa-chevron-left" style="color: #fff"></i>
<span class="sr-only">Previous</span>
</a>
<a class="pull-right" href="#carouselIndicators" role="button" data-slide="next">
<i class="fas fa-chevron-right" style="color: #fff"></i>
<span class="sr-only">Next</span>
</a>
<a href="LINK" style="color: #fff">Character Name</a>
<span class="pull-right d-none d-lg-block">[Mage] <i class="fas fa-hand-sparkles"/></span>
</h1>
<div class="p-0" style="color: #000">
<div class="row no-gutters">
<div class="col-12 col-lg-4 p-0">
<div class="w-100 h-100" style="background-image: url(https://via.placeholder.com/200x200); background-size: 100% 100%"></div>
</div>
<div class="col-12 col-lg-8 p-0">
<div class="p-3" style="height: 250px; overflow: auto; background-color: #fff; color: #000">
<p class="text-center"><i class="fas fa-quote-left pull-left"/><i class="fas fa-quote-right pull-right"/>Cool Quote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<hr style="background-color: #c1c1c1">
<p class="display-4 text-uppercase m-0 p-2" style="font-size: 25px;">Summary</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!---------------- END CHARACTER 2 ---------------->
<!---------------- CHARACTER 3 ---------------->
<div class="carousel-item">
<h1 class="display-4 text-uppercase m-0 p-2" style="background-color: #ff3a3a; color: #fff">
<a class="pull-left" href="#carouselIndicators" role="button" data-slide="prev">
<i class="fas fa-chevron-left" style="color: #fff"></i>
<span class="sr-only">Previous</span>
</a>
<a class="pull-right" href="#carouselIndicators" role="button" data-slide="next">
<i class="fas fa-chevron-right" style="color: #fff"></i>
<span class="sr-only">Next</span>
</a>
<a href="LINK" style="color: #fff">Character Name</a>
<span class="pull-right d-none d-lg-block">[Healer] <i class="fas fa-briefcase-medical"/></span></h1>
<div class="p-0" style="color: #000">
<div class="row no-gutters">
<div class="col-12 col-lg-4 p-0">
<div class="w-100 h-100" style="background-image: url(https://via.placeholder.com/200x200); background-size: 100% 100%"></div>
</div>
<div class="col-12 col-lg-8 p-0">
<div class="p-3" style="height: 250px; overflow: auto; background-color: #fff; color: #000">
<p class="text-center"><i class="fas fa-quote-left pull-left"/><i class="fas fa-quote-right pull-right"/>Cool Quote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<hr style="background-color: #c1c1c1">
<p class="display-4 text-uppercase m-0 p-2" style="font-size: 25px;">Summary</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!---------------- END CHARACTER 3 ---------------->
<!---------------- ADD MORE CHARACTERS BELOW THIS LINE ---------------->
<!---------------- ADD MORE CHARACTERS ABOVE THIS LINE ---------------->
</div>
</div>
</div>
</div>
<!---------------- END CHARACTERS BLOCK ---------------->
</div>
<!---------------- CREDIT ---------------->
<div class="text-right col-12 p-1">
<a href="/Prismicodes" class="tooltipster" title="HTML by Prismicodes"><i class="far fa-code fa-sm"></i></a>
</div>
<!---------------- END CREDIT ---------------->
</div>
</div>