D&D: Extensive
created by:SparklyCodes
HTMLBootstrapCharacter
Copy
<!--
F2U - CHARACTER CODE: D&D: EXTENSIVE
by SparklyCodes @ Toyhou.se
Make sure to read all the rules and instructions!
-- TOS --
1. Turn WYSIWYG off when coding. Even after you're done.
1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
3. Use on TH only.
4. Do not redistribute.
5. Do not remove credit.
6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
7. Free to use as reference, credit in this case isn't required but appreciated!
-->
<div class="m-2 row no-gutters">
<!-- LEFT - STATS -->
<div class="col-sm-3 col-lg-2">
<div id="stats" class="m-0 row sticky-top">
<!-- STRENGTH -->
<div class="p-0 col-6 col-sm-12">
<div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
<h1 class="m-0 text-primary">0</h1>
<p class="m-0 text-secondary"> +0</p>
<!-- COLLAPSE -->
<a href="#strength" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">STR <i class="fas fa-caret-down"></i></a>
<div id="strength" data-parent="#stats" class="collapse text-left">
<div class="p-2 card rounded-0 border-0">
<p class="m-0">Athletics
<span class="pull-right text-secondary">+0</span></p>
</div>
</div><!-- end collapse -->
</div>
</div>
<!-- DEXTERITY -->
<div class="p-0 col-6 col-sm-12">
<div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
<h1 class="m-0 text-primary">0</h1>
<p class="m-0 text-secondary">+0</p>
<!-- COLLAPSE -->
<a href="#dexterity" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">DEX <i class="fas fa-caret-down"></i></a>
<div id="dexterity" data-parent="#stats" class="collapse text-left">
<div class="p-2 card rounded-0 border-0">
<p class="m-0">Acrobatics
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Sleight of hand
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Stealth
<span class="pull-right text-secondary">+0</span></p>
</div>
</div><!-- end collapse -->
</div>
</div>
<!-- CONSTITUTION -->
<div class="p-0 col-6 col-sm-12">
<div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
<h1 class="m-0 text-primary">0</h1>
<p class="m-0 text-secondary">+0</p>
<!-- COLLAPSE -->
<a class="p-1 btn btn-secondary rounded-0">CON</a>
<!-- end collapse -->
</div>
</div>
<!-- INTELLIGENCE -->
<div class="p-0 col-6 col-sm-12">
<div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
<h1 class="m-0 text-primary">0</h1>
<p class="m-0 text-secondary">+0</p>
<!-- COLLAPSE -->
<a href="#intelligence" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">INT <i class="fas fa-caret-down"></i></a>
<div id="intelligence" data-parent="#stats" class="collapse text-left">
<div class="p-2 card rounded-0 border-0">
<p class="m-0">Arcana
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">History
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Investigation
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Nature
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Religion
<span class="pull-right text-secondary">+0</span></p>
</div>
</div><!-- end collapse -->
</div>
</div>
<!-- WISDOM -->
<div class="p-0 col-6 col-sm-12">
<div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
<h1 class="m-0 text-primary">0</h1>
<p class="m-0 text-secondary">+0</p>
<!-- COLLAPSE -->
<a href="#wisdom" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">WIS <i class="fas fa-caret-down"></i></a>
<div id="wisdom" data-parent="#stats" class="collapse text-left">
<div class="p-2 card rounded-0 border-0">
<p class="m-0">Animal Handling
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Insight
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Medicine
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Perception
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Survival
<span class="pull-right text-secondary">+0</span></p>
</div>
</div><!-- end collapse -->
</div>
</div>
<!-- CHARISMA -->
<div class="p-0 col-6 col-sm-12">
<div class="m-1 p-1 card bg-faded rounded-0 border-0 text-center">
<h1 class="m-0 text-primary">0</h1>
<p class="m-0 text-secondary">+0</p>
<!-- COLLAPSE -->
<a href="#charisma" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">CHA <i class="fas fa-caret-down"></i></a>
<div id="charisma" data-parent="#stats" class="collapse text-left">
<div class="p-2 card rounded-0 border-0">
<p class="m-0">Deception
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Intimidation
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Performance
<span class="pull-right text-secondary">+0</span></p>
<p class="m-0">Persuasion
<span class="pull-right text-secondary">+0</span></p>
</div>
</div><!-- end collapse -->
</div>
</div>
<!-- CREDIT, DON'T MOVE -->
<div class="p-0 col-12 text-center">
<a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
</div>
</div>
</div>
<!-- RIGHT -->
<div class="col-sm-9 col-lg-10">
<!-- NAVIGATION -->
<div class="sticky-top text-uppercase hidden-sm-down">
<div class="m-1 p-1 card rounded-0 border-0 bg-faded">
<p class="m-0">
<a href="#intro">Introduction</a> •
<a href="#about">About</a> •
<a href="#story">Story/Tastes/Trivia</a> •
<a href="#proficiencies">Proficiency/Inventory</a> •
<a href="#attacks">Attacks/Spells</a> •
<a href="#links">Links</a>
</p>
</div>
</div>
<!-- BIOGRAPHY -->
<div class="m-1 card bg-faded rounded-0 border-0">
<!-- INTRODUCTION -->
<div id="intro" class="m-1 p-2 card border-0 rounded-0">
<div class="m-0 row">
<!-- NAME -->
<div class="p-1 my-auto col-lg-6 text-center">
<h1 class="m-0 mt-2 display-3">Name</h1>
<p class="m-1"><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</i></p>
<div class="m-1 card border-bottom-0"></div>
<p class="m-1 text-secondary font-italic">
trait <i class="fas fa-star"></i>
trait <i class="fas fa-star"></i>
trait
</p>
</div>
<!-- SUMMARY -->
<div class="p-0 col-lg-6" style="max-height: 150px; overflow: auto;">
<h1 class="m-0 text-primary">Summary</h1><hr class="m-0 mt-1">
<p class="m-1">Introduce your character here. This box will scroll. Phasellus molestie iaculis enim, a malesuada dui vulputate non. Proin blandit massa id varius imperdiet. Aenean nec venenatis nunc. Pellentesque facilisis condimentum metus, non ullamcorper massa volutpat quis. Mauris mollis purus in nisl maximus ullamcorper. Nunc sodales lectus metus. Vestibulum laoreet, risus in dapibus laoreet, ex metus eleifend purus, eu mollis dui ligula et tellus.</p>
</div>
</div>
</div> <!-- end introduction -->
<!-- ABOUT -->
<div id="about">
<div class="m-1 row text-center">
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Proficiency Bonus</span><br> +0</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Passive Wisdom</span><br> 0</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Armor Class</span><br> 0</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Initiative</span><br> 0</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Speed</span><br> 0ft</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Hit Points</span><br> 0</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Hit Dice</span><br> 1d6</h5>
</div>
</div>
</div>
<div class="m-1 p-0 card border-0 rounded-0">
<div class="m-1 row text-center">
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Age</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Gender</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Height</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Weight</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Build</span><br> content</h5>
</div>
<hr class="p-0 m-1 col-12">
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Class</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Level</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Race</span><br> content</h5>
</div>
<div class="p-1 col-6 col-md">
<h5 class="m-0"><span class="mb-1 badge bg-secondary">Background</span><br> content</h5>
</div>
</div>
</div>
<div class="m-0 row">
<!-- TRAITS/FEATURES -->
<div class="m-1 p-1 col-lg card border-0 rounded-0">
<h1 class="m-0 text-primary">Traits & Features</h1><hr class="m-0 mt-1">
<!-- RACE -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Race: [race]</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<!-- CLASS -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Class: [class]</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<!-- BACKGROUND -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Background: [background]</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
</div>
<!-- ALIGNMENT -->
<div class="m-1 p-1 col-lg card border-0 rounded-0">
<h1 class="m-0 text-primary">Alignment</h1><hr class="m-0 mt-1">
<p class="m-0 ml-4"><b>Alignment here:</b> [alignment content/explanation]</p>
<!-- PERSONALITY -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Personality Traits:</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<!-- IDEALS -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Ideals:</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<!-- BONDS -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Bonds:</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<!-- FLAWS -->
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Flaws:</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
</div>
</div>
<!-- end about -->
<!-- NAV -->
<ul class="m-1 nav nav-pills rounded d-flex text-center">
<li class="nav-item flex-fill"><a data-toggle="tab" href="#background" role="tab" class="nav-link active" style="border-radius: 0px;">Story</a></li>
<li class="nav-item flex-fill"><a data-toggle="tab" href="#tastes" role="tab" class="nav-link" style="border-radius: 0px;">Tastes</a></li>
<li class="nav-item flex-fill"><a data-toggle="tab" href="#trivia" role="tab" class="nav-link" style="border-radius: 0px;">Trivia</a></li>
</ul>
<div id="story" class="tab-content m-1 p-1 card border-0 rounded-0" style="max-height: 300px; overflow: auto;">
<!-- STORY -->
<div class="tab-pane fade show active" id="background">
<h1 class="m-0 text-primary">Story</h1><hr class="m-0 mt-1">
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">HEADER</h5>
<p class="m-0">This could be a campaign log or their backstory. This box will scroll. In a diam risus. Donec tortor sem, faucibus non aliquam in, sollicitudin non erat. Integer vel mi et arcu vehicula fermentum. Sed eu leo mattis mi euismod convallis. Donec non porttitor nisl. Etiam eget dolor eu leo laoreet blandit. Quisque vel sapien ante. Nulla rutrum erat vitae velit elementum, sed viverra eros euismod.</p>
<h5 class="m-0 text-secondary">HEADER</h5>
<p class="m-0">Fusce vitae magna ut mauris congue viverra eu a ipsum. Donec porta ac dolor eget blandit. Maecenas lorem nisl, auctor et nulla vel, semper egestas ligula. Duis blandit orci at elit condimentum, at consequat leo molestie. Quisque malesuada metus lorem, in dictum mi imperdiet sit amet.</p>
<p class="m-0">Integer vitae tincidunt sapien. Nunc aliquet aliquam ex, sit amet ullamcorper ipsum finibus id. Ut commodo enim sed tellus malesuada, et imperdiet sem ullamcorper. Vivamus nec cursus sem. Aenean nec lobortis sem, in iaculis urna.</p>
</div>
</div>
<!-- TASTES -->
<div class="tab-pane fade" id="tastes">
<h1 class="m-0 text-primary">Tastes</h1><hr class="m-0 mt-1">
<div class="m-1 p-1 row">
<!-- LIKES -->
<div class="p-0 col-md">
<h5 class="m-0 text-secondary">Likes</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<!-- DISLIKES -->
<div class="p-0 col-md">
<h5 class="m-0 text-secondary">Dislikes</h5>
<p class="mr-3 m-0">Lorem ipsum.</p>
<p class="mr-3 m-0">Lorem ipsum.</p>
<p class="mr-3 m-0">Lorem ipsum.</p>
</div>
</div>
</div>
<!-- PERSONALITY -->
<div class="tab-pane fade" id="trivia">
<h1 class="m-0 text-primary">Trivia</h1><hr class="m-0 mt-1">
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Personality</h5>
<p class="m-0">Describe the character's personality in more detail here if you want to. This box will scroll. In a diam risus. Donec tortor sem, faucibus non aliquam in, sollicitudin non erat. Integer vel mi et arcu vehicula fermentum. Sed eu leo mattis mi euismod convallis. Donec non porttitor nisl. Etiam eget dolor eu leo laoreet blandit. Quisque vel sapien ante. Nulla rutrum erat vitae velit elementum, sed viverra eros euismod.</p>
<p class="m-0">Integer vitae tincidunt sapien. Nunc aliquet aliquam ex, sit amet ullamcorper ipsum finibus id. Ut commodo enim sed tellus malesuada, et imperdiet sem ullamcorper. Vivamus nec cursus sem. Aenean nec lobortis sem, in iaculis urna.</p>
<h5 class="m-0 text-secondary">Notes</h5>
<ul class="m-0 pl-4">
<li>Nullam quis ante venenatis, condimentum dui ac, aliquet magna.</li>
<li>Vivamus congue lectus bibendum aliquam tempor.</li>
<li>Sed aliquet, dui at vestibulum sollicitudin, purus sapien finibus neque, eu egestas mauris nunc dapibus dolor.</li>
<li>Pellentesque a viverra nunc, faucibus lobortis nunc. </li>
</ul>
</div>
</div>
</div>
<!-- end nav -->
<!-- PANELS: PROFICIENCIES, INVENTORY, ATTACKS, SPELLS -->
<div class="m-0 row">
<!-- PROFICIENCIES -->
<div id="proficiencies" class="m-1 p-2 col-md card border-0 rounded-0">
<h1 class="m-0 text-primary">Proficiencies</h1><hr class="m-0 mt-1">
<!--CONTENT -->
<div class="m-0 row">
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Armor</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Weapons</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Tools</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Saving Throws</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Skills</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Languages</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
</div>
</div>
<!-- INVENTORY -->
<div class="m-1 p-2 col-md card border-0 rounded-0">
<!-- -->
<h1 class="m-0 text-primary">Inventory</h1><hr class="m-0 mt-1">
<p class="ml-3 m-0"><b>Max carrying capacity:</b> 0lbs.</p>
<p class="ml-3 m-0"><b>Max pushing capacity:</b> 0lbs.</p>
<!-- CONTENT -->
<div class="m-0 row">
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Weapons</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Armor/Clothing</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6">
<h5 class="m-0 text-secondary">Miscellaneous</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="p-1 col-6" style="font-size:17px;">
<h5 class="m-0 text-secondary">Currency</h5>
<p class="ml-3 m-0"><a data-toggle="tooltip" title="Gold Pieces" class="mb-1 badge bg-info">GP</a> 0</p>
<p class="ml-3 m-0"><a data-toggle="tooltip" title="Silver Pieces" class="mb-1 badge bg-info">SP</a> 0</p>
<p class="ml-3 m-0"><a data-toggle="tooltip" title="Copper Pieces" class="mb-1 badge bg-info">CP</a> 0</p>
<p class="ml-3 m-0"><a class="mb-1 badge bg-info">Gems</a> 0 (0GP each)</p>
</div>
</div>
</div>
</div>
<div class="m-0 row">
<!-- ATTACKS -->
<div id="attacks" class="m-1 p-2 col-md card border-0 rounded-0">
<h1 class="m-0 text-primary">Attacks</h1><hr class="m-0 mt-1">
<div class="m-1 p-1 flex-column">
<!-- FIRST ONE IS AN EXAMPLE, REST ARE BLANK -->
<!-- ATTACK 1 -->
<a href="#atk1" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">Rapier <i class="fas fa-caret-down"></i></a>
<div id="atk1" data-parent="#attacks" class="collapse show text-left" style="font-size: 17px;">
<p class="m-0"><a class="mb-1 badge bg-info">Type</a> Melee Weapon/Piercing</p>
<p class="m-0"><a class="mb-1 badge bg-info">Damage</a> 1d8</p>
<p class="m-0"><a class="mb-1 badge bg-info">Bonus</a> +3</p>
</div><!-- end atk 1 -->
<!-- ATTACK 2 -->
<a href="#atk2" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">Name <i class="fas fa-caret-down"></i></a>
<div id="atk2" data-parent="#attacks" class="collapse text-left" style="font-size: 17px;">
<p class="m-0"><a class="mb-1 badge bg-info">Type</a> Content</p>
<p class="m-0"><a class="mb-1 badge bg-info">Damage</a> Content</p>
<p class="m-0"><a class="mb-1 badge bg-info">Bonus</a> +0</p>
</div><!-- end atk 2 -->
<!-- ATTACK 3 -->
<a href="#atk3" data-toggle="collapse" class="p-1 btn btn-secondary rounded-0">Name <i class="fas fa-caret-down"></i></a>
<div id="atk3" data-parent="#attacks" class="collapse text-left" style="font-size: 17px;">
<p class="m-0"><a class="mb-1 badge bg-info">Type</a> Content</p>
<p class="m-0"><a class="mb-1 badge bg-info">Damage</a> Content</p>
<p class="m-0"><a class="mb-1 badge bg-info">Bonus</a> +0</p>
</div><!-- end atk 3 -->
</div>
</div>
<!-- SPELLS -->
<div class="m-1 p-2 col-md card border-0 rounded-0">
<h1 class="m-0 text-primary">Spells</h1><hr class="m-0 mt-1">
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Name</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Name</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
<div class="m-1 p-1">
<h5 class="m-0 text-secondary">Name</h5>
<p class="ml-3 m-0">Lorem ipsum.</p>
</div>
</div>
</div>
<!-- end panels -->
</div>
<!-- LINKS -->
<div class="m-1 card bg-faded rounded-0 border-0">
<div id="links" class="m-1 p-1 card border-0 rounded-0">
<!-- CHARACTER -->
<div class="row m-0">
<!-- IMAGE -->
<img class="m-1 p-1 col-sm-auto img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
<!-- INFO -->
<div class="p-1 col-sm">
<a href="LINK"><h1 class="m-0 display-4">Name</h1></a>
<p class="m-0">
Relationship •
<!-- CHANGE FAS TO FAL FOR OUTLINE ONLY -->
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fal fa-star"></i><i class="fal fa-star"></i>
</p>
<p>Describe relationship. This Box will expand. Nam et iaculis urna. Vivamus mattis accumsan suscipit. Praesent vulputate neque sed lorem luctus, eu condimentum urna eleifend. Nunc vel magna in enim euismod cursus a nec arcu. Nulla convallis pulvinar ipsum, ac efficitur massa aliquam in.</p>
</div>
</div>
<!-- CHARACTER -->
<div class="row m-0">
<!-- IMAGE -->
<img class="m-1 p-1 col-sm-auto img-thumbnail rounded-0" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
<!-- INFO -->
<div class="p-1 col-sm">
<a href="LINK"><h1 class="m-0 display-4">Name</h1></a>
<p class="m-0">
Relationship •
<!-- CHANGE FAS TO FAL FOR OUTLINE ONLY -->
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fal fa-star"></i><i class="fal fa-star"></i>
</p>
<p>Describe relationship. This Box will expand. Nam et iaculis urna. Vivamus mattis accumsan suscipit. Praesent vulputate neque sed lorem luctus, eu condimentum urna eleifend. Nunc vel magna in enim euismod cursus a nec arcu. Nulla convallis pulvinar ipsum, ac efficitur massa aliquam in.</p>
</div>
</div>
<!-- ADD MORE ABOVE HERE -->
</div> <!-- end links -->
</div>
</div>
</div>