RotR Forum Template Compact HTML

<!--
  ROTR Character Profile Template #2 - "Compact"
  Small card, no banner, minimal layout.
  No credit required, customize and pick apart as wanted.

  -> Replace placeholder URLs with images (placehold.co, link.link) and text
-->
<div class="ch-wrap" style="max-width:640px;">

  <!-- HEADER -->
    <div style="display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--ch-border);">
        <img class="ch-avatar" src="https://placehold.co/80x80/2a3a2a/8a9e6b?text=80" alt="">
        <div>
            <div class="ch-name" style="font-size:18px; letter-spacing:1px;">CHARACTER NAME</div>
            <div class="ch-subtitle">Species - Gender - Age</div>
        </div>
    </div>

  <!-- TABS -->
    <div class="nav ch-tabs" role="tablist">
        <a data-toggle="tab" class="active ch-tab" href="#c2-about" role="tab" style="flex:1; text-align:center; padding:8px 6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">About</a>
        <a data-toggle="tab" class="ch-tab" href="#c2-appearance" role="tab" style="flex:1; text-align:center; padding:8px 6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">Appearance</a>
        <a data-toggle="tab" class="ch-tab" href="#c2-history" role="tab" style="flex:1; text-align:center; padding:8px 6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">History</a>
        <a data-toggle="tab" class="ch-tab" href="#c2-relations" role="tab" style="flex:1; text-align:center; padding:8px 6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">Relations</a>
        <a data-toggle="tab" class="ch-tab" href="#c2-gallery" role="tab" style="flex:1; text-align:center; padding:8px 6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">Gallery</a>
        <a data-toggle="tab" class="ch-tab" href="#c2-ooc" role="tab" style="flex:1; text-align:center; padding:8px 6px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">OOC</a>
    </div>

    <!-- CONTENT -->
    <div class="tab-content ch-content" style="max-height:400px;">

        <!-- ==== ABOUT ==== -->
        <div class="tab-pane fade show active ch-pane" id="c2-about" role="tabpanel">

            <!-- ==== BASICS ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Basics <span class="ch-card-icon">ℹ</span></div>
                <hr class="ch-divider">
                <div class="ch-stat"><span class="ch-stat-label">Name</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Species</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Age</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Sex</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Pack</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Role</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Mate</span><span class="ch-stat-value">content</span></div>
                <div class="ch-stat"><span class="ch-stat-label">Theme</span><span class="ch-stat-value"><a href="https://link.link">content</a></span></div>
            </div>

            <!-- ==== SUMMARY ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Summary <span class="ch-card-icon">📋</span></div>
                <hr class="ch-divider">
                <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>

            <!-- ==== PERSONALITY ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Personality</div>
                <hr class="ch-divider">
                <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.</p>
                <p class="ch-text">Add as many paragraphs as needed.</p>
            </div>
        </div>

        <!-- ==== APPEARANCE ==== -->
        <div class="tab-pane fade ch-pane" id="c2-appearance" role="tabpanel">

            <!-- ==== PALETTE ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Palette <span class="ch-card-icon">🎨</span></div>
                <hr class="ch-divider">
                <!-- v delete to remove palette -->
                <div class="row no-gutters ch-palette">
                    <div class="col" style="background:#d4c4a0;"></div>
                    <div class="col" style="background:#8a7a5a;"></div>
                    <div class="col" style="background:#5a4a3a;"></div>
                    <div class="col" style="background:#3a2a1a;"></div>
                    <div class="col" style="background:#6b8a5a;"></div>
                </div>
                <!-- ^ delete to remove palette -->
                <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>

            <!-- ==== SCARS ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Scars &amp; Markings</div>
                <hr class="ch-divider">
                <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>

            <!-- ==== NOTES ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Design Notes</div>
                <hr class="ch-divider">
                <ul class="ch-notes">
                    <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
                </ul>
            </div>
        </div>

        <!-- ==== HISTORY ==== -->
        <div class="tab-pane fade ch-pane" id="c2-history" role="tabpanel">

            <!-- ==== TLDR ==== -->
            <div class="ch-card">
                <div class="ch-card-title">TLDR</div>
                <hr class="ch-divider">
                <ul class="ch-notes">
                    <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
                </ul>
            </div>

            <!-- ==== 1 ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Event</div>
                <hr class="ch-divider">
                <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>

            <!-- ==== 2 ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Event</div>
                <hr class="ch-divider">
                <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>

            <!-- ==== 3 ==== -->
            <div class="ch-card">
                <div class="ch-card-title">Event</div>
                <hr class="ch-divider">
                <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>
        </div>

        <!-- ==== RELATIONS ==== -->
        <div class="tab-pane fade ch-pane" id="c2-relations" role="tabpanel">

            <!-- relationship 1 -->
            <div class="ch-card">
                <div class="ch-rel-header">
                    <div><strong>Name</strong>
                    <a href="https://Link.Link">Link</a>
                    <em style="color: var(--ch-accent)">-</em>
                    <a href="https://Link.Link">Link</a></div>
                    <span class="ch-rel-type">Relationship - Elaborate</span></div>
                <hr class="ch-divider">
                <div class="row no-gutters">
                    <div class="col-3 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
                    <div class="col-9"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.</span></div>
                </div>
            </div>

            <!-- relationship 2 -->
            <div class="ch-card">
                <div class="ch-rel-header"><strong>Name</strong><span class="ch-rel-type">Relationship - Elaborate</span></div>
                <hr class="ch-divider">
                <div class="row no-gutters">
                    <div class="col-3 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
                    <div class="col-9"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.</span></div>
                </div>
            </div>

            <!-- relationship 3 -->
            <div class="ch-card">
                <div class="ch-rel-header"><strong>Name</strong><span class="ch-rel-type">Relationship - Elaborate</span></div>
                <hr class="ch-divider">
                <div class="row no-gutters">
                    <div class="col-3 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
                    <div class="col-9"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.</span></div>
                </div>
            </div>
        </div>

        <!-- ==== GALLERY ==== -->
        <div class="tab-pane fade ch-pane" id="c2-gallery" role="tabpanel">
            <div class="row">

                <!-- ==== start gallery item ==== -->
                <div class="col-6 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/300x200/2a3a2a/5a7d7e?text=Art+1" alt=""><br><span class="ch-gallery-credit">

                Art by <a href="https://Link.Link">Artist</a>

                </span></div>
                <!-- ==== end gallery item ==== -->

                <!-- ==== start gallery item ==== -->
                <div class="col-6 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/300x400/2a3a2a/5a7d7e?text=Art+2" alt=""><br><span class="ch-gallery-credit">

                Art by <a href="https://Link.Link">Artist</a>

                </span></div>
                <!-- ==== end gallery item ==== -->

                <!-- ==== start gallery item ==== -->
                <div class="col-6 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/200x200/2a3a2a/5a7d7e?text=Art+3" alt=""><br><span class="ch-gallery-credit">

                Art by <a href="https://Link.Link">Artist</a>

                </span></div>
                <!-- ==== end gallery item ==== -->

                <!-- ==== start gallery item ==== -->
                <div class="col-6 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/400x250/2a3a2a/5a7d7e?text=Art+4" alt=""><br><span class="ch-gallery-credit">

                Art by <a href="https://Link.Link">Artist</a>

                </span></div>
                <!-- ==== end gallery item ==== -->

            </div>
        </div>

        <!-- ==== OOC ==== -->
        <div class="tab-pane fade ch-pane" id="c2-ooc" role="tabpanel">

            <!-- Player Info -->
            <div class="ch-card">
                <div class="ch-card-title">Player Info</div>
                <hr class="ch-divider">
                <span style="font-size:12px;">Played by <strong>Username</strong> - Contact via PM - Timezone</span>
            </div>

            <!-- RP preferences -->
            <div class="ch-card">
                <div class="ch-card-title">RP Preferences</div>
                <hr class="ch-divider">
                <p class="ch-text">Any notes about your roleplay style, post length, triggers, availability. Delete sections you don't need.</p>
            </div>

            <!-- plot ideas -->
            <div class="ch-card">
                <div class="ch-card-title">Hooks &amp; Plot Ideas</div>
                <hr class="ch-divider">
                <ul class="ch-notes">
                    <li>(template example) Open to patrol encounters along the eastern ridge</li>
                    <li>(template example) Looking for someone who knew x before the flood</li>
                    <li>(template example) Would love a slow-burn rivalry that turns to respect</li>
                </ul>
            </div>

            <!-- Credits -->
            <div class="ch-card">
                <div class="ch-card-title">Credits</div>
                <hr class="ch-divider">
                <span style="font-size:12px;">Character design by You - Art credits in Gallery tab</span>
            </div>
        </div>
    </div>

</div>