<div class="container p-0 m-0">
<!--Title Banner------>
<div class="row">
<div class="col-lg-12 mb-4">
<div class="pt-2 pb-2 bg-faded" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="card border-0 p-2">
<h1 class="text-uppercase display-1 text-muted text-center">
<i class="far fa-pen-paintbrush display-2" style="font-weight:lighter;"></i>
Directory
<i class="far fa-palette display-2" style="font-weight:lighter;"></i>
</h1>
</div>
</div>
</div>
</div>
<!--Title Banner end-->
<!--Row 1------>
<div class="row no-gutters mb-4">
<!--Folder A------>
<div class="col-md-6">
<div class="card mr-2 bg-faded p-2 border-0" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="row no-gutters">
<!--Image------>
<div class="col-md-4" style="height:200px;">
<div class="card h-100 mr-1 border-0">
<div class="card h-100 m-2 border-0" style="height:200px; background-image:url('https://cdn.discordapp.com/attachments/967847148047716372/1010668087982436564/placeholder.png'); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--Image end-->
<!--Text------>
<div class="col-md-8" style="height:170px;">
<!--Title / Link------>
<h3 class="text-left text-uppercase text-primary ml-1 font-weight-bold">
<a href="#" target="_blank">
<i class="far fa-paintbrush mr-2"></i> Title
</a>
</h3>
<!--Title / Link end-->
<div class="card h-100 ml-1 p-2" style="overflow-y:auto;">
<!--Description------>
<p class="text-muted" style="font-size:smaller;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Description end-->
</div>
</div>
<!--Text end-->
</div>
</div>
</div>
<!--Folder A end-->
<!--Folder B------>
<div class="col-md-6">
<div class="card ml-2 bg-faded p-2 border-0" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="row no-gutters">
<!--Text------>
<div class="col-md-8" style="height:170px;">
<!--Title / Link------>
<h3 class="text-right text-uppercase text-primary mr-1 font-weight-bold">
<a href="#" target="_blank">
Title <i class="far fa-palette ml-2"></i>
</a>
</h3>
<!--Title / Link end-->
<div class="card h-100 mr-1 p-2" style="overflow-y:auto;">
<!--Description------>
<p class="text-muted" style="font-size:smaller;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Description end-->
</div>
</div>
<!--Text end-->
<!--Image------>
<div class="col-md-4" style="height:200px;">
<div class="card h-100 ml-1 border-0">
<div class="card h-100 m-2 border-0" style="height:200px; background-image:url('https://cdn.discordapp.com/attachments/967847148047716372/1010668087982436564/placeholder.png'); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--Image end-->
</div>
</div>
</div>
<!--Folder B end-->
</div>
<!--Row 1 end-->
<!--Row 2------>
<div class="row no-gutters mb-4">
<!--Folder A------>
<div class="col-md-6">
<div class="card mr-2 bg-faded p-2 border-0" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="row no-gutters">
<!--Image------>
<div class="col-md-4" style="height:200px;">
<div class="card h-100 mr-1 border-0">
<div class="card h-100 m-2 border-0" style="height:200px; background-image:url('https://cdn.discordapp.com/attachments/967847148047716372/1010668087982436564/placeholder.png'); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--Image end-->
<!--Text------>
<div class="col-md-8" style="height:170px;">
<!--Title / Link------>
<h3 class="text-left text-uppercase text-primary ml-1 font-weight-bold">
<a href="#" target="_blank">
<i class="far fa-palette mr-2"></i> Title
</a>
</h3>
<!--Title / Link end-->
<div class="card h-100 ml-1 p-2" style="overflow-y:auto;">
<!--Description------>
<p class="text-muted" style="font-size:smaller;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Description end-->
</div>
</div>
<!--Text end-->
</div>
</div>
</div>
<!--Folder A end-->
<!--Folder B------>
<div class="col-md-6">
<div class="card ml-2 bg-faded p-2 border-0" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="row no-gutters">
<!--Text------>
<div class="col-md-8" style="height:170px;">
<!--Title / Link------>
<h3 class="text-right text-uppercase text-primary mr-1 font-weight-bold">
<a href="#" target="_blank">
Title <i class="far fa-paintbrush ml-2"></i>
</a>
</h3>
<!--Title / Link end-->
<div class="card h-100 mr-1 p-2" style="overflow-y:auto;">
<!--Description------>
<p class="text-muted" style="font-size:smaller;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Description end-->
</div>
</div>
<!--Text end-->
<!--Image------>
<div class="col-md-4" style="height:200px;">
<div class="card h-100 ml-1 border-0">
<div class="card h-100 m-2 border-0" style="height:200px; background-image:url('https://cdn.discordapp.com/attachments/967847148047716372/1010668087982436564/placeholder.png'); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--Image end-->
</div>
</div>
</div>
<!--Folder B end-->
</div>
<!--Row 2 end-->
<!--Row 3------>
<div class="row no-gutters">
<!--Folder A------>
<div class="col-md-6">
<div class="card mr-2 bg-faded p-2 border-0" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="row no-gutters">
<!--Image------>
<div class="col-md-4" style="height:200px;">
<div class="card h-100 mr-1 border-0">
<div class="card h-100 m-2 border-0" style="height:200px; background-image:url('https://cdn.discordapp.com/attachments/967847148047716372/1010668087982436564/placeholder.png'); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--Image end-->
<!--Text------>
<div class="col-md-8" style="height:170px;">
<!--Title / Link------>
<h3 class="text-left text-uppercase text-primary ml-1 font-weight-bold">
<a href="#" target="_blank">
<i class="far fa-paintbrush mr-2"></i> Title
</a>
</h3>
<!--Title / Link end-->
<div class="card h-100 ml-1 p-2" style="overflow-y:auto;">
<!--Description------>
<p class="text-muted" style="font-size:smaller;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Description end-->
</div>
</div>
<!--Text end-->
</div>
</div>
</div>
<!--Folder A end-->
<!--Folder B------>
<div class="col-md-6">
<div class="card ml-2 bg-faded p-2 border-0" style="box-shadow:0 0 .4rem rgba(0,0,0,0.5);">
<div class="row no-gutters">
<!--Text------>
<div class="col-md-8" style="height:170px;">
<!--Title / Link------>
<h3 class="text-right text-uppercase text-primary mr-1 font-weight-bold">
<a href="#" target="_blank">
Title <i class="far fa-palette ml-2"></i>
</a>
</h3>
<!--Title / Link end-->
<div class="card h-100 mr-1 p-2" style="overflow-y:auto;">
<!--Description------>
<p class="text-muted" style="font-size:smaller;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!--Description end-->
</div>
</div>
<!--Text end-->
<!--Image------>
<div class="col-md-4" style="height:200px;">
<div class="card h-100 ml-1 border-0">
<div class="card h-100 m-2 border-0" style="height:200px; background-image:url('https://cdn.discordapp.com/attachments/967847148047716372/1010668087982436564/placeholder.png'); background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--Image end-->
</div>
</div>
</div>
<!--Folder B end-->
</div>
<!--Row 3 end-->
</div>
