Connections Template

A handy html template that you're free to use in your character profile! It will appear as a table, with three sections for the character, a small note about the relationship, and the icons.

Code:
<div class="connect-flex">

<div class="connect-column">

<div class="connect2"><a href="link to character profile">Name</a></div>

<div class="connect3">Relationship</div>

</div>

<div class="connect1">

<i class="ra ra-bleeding-hearts"></i>

</div>

</div>

<div class="connect-flex">

<div class="connect-column">

<div class="connect2"><a href="link to character profile">Name</a></div>

<div class="connect3">Relationship</div>

</div>

<div class="connect1">

<i class="ra ra-bleeding-hearts"></i>

</div>

</div>

Adding a New Connection

Code:
<div class="connect-flex">

<div class="connect-column">

<div class="connect2"><a href="link to character profile">Name</a></div>

<div class="connect3">Relationship</div>

</div>

<div class="connect1">

<i class="ra ra-bleeding-hearts"></i>

</div>

</div>

Icons

Romantic

Code:
<i class="ra ra-bleeding-hearts"></i>

Family

Code:
<i class="ra ra-two-hearts"></i>

Friendship

Code:
<i class="fa-brands fa-pagelines"></i>

Enemies

Code:
<i class="ra ra-crossed-swords"></i>

Concordance (Shifter Specific)

Code:
<i class="ra ra-wolf-howl"></i>

If you're familiar with using icons, and want to add others, you can use the free ones at Font Awesome.