*Mode: Cookbook

Toolkit Recipes

Each block below includes a live component demo and the matching HTML so the toolkit can be dropped into any Bootstrap page quickly.

*Included
Buttons Grid Colors Placeholders Meters Accordion Menus Dialogs Forms Data
*Recipe 01

Command Buttons

Start Event Primary Inspect Garage Secondary HUD Chip Muted Chip 
<div class="rr4-cta-row">
  <a class="rr4-btn is-primary" href="#">
    <span>Start Event</span>
    <span class="rr4-meta">Primary</span>
  </a>
  <a class="rr4-btn" href="#">
    <span>Inspect Garage</span>
    <span class="rr4-meta">Secondary</span>
  </a>
  <span class="rr4-chip">HUD Chip</span>
  <span class="rr4-chip is-dark">Muted Chip</span>
</div>
*Recipe 02

Bootstrap Grid

Col Md 4 04
left rail
Grid Screen col-md-8
Col Sm 6
Stacks on narrow screens, splits on small and up.
Col Sm 6
Use Bootstrap grid, then apply RR4 components inside it.
<div class="container">
  <div class="row g-3">
    <div class="col-md-4">
      <div class="rr4-stat">...</div>
    </div>
    <div class="col-md-8">
      <div class="rr4-browser">
        <div class="rr4-browser-screen">
          <div class="row g-3">
            <div class="col-sm-6">
              <div class="rr4-card">...</div>
            </div>
            <div class="col-sm-6">
              <div class="rr4-card">...</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*Recipe 03

Color Utilities

.text-primaryRR4 Primary
.text-primary-emphasisPrimary Emphasis
.text-secondarySecondary
.text-secondary-emphasisSecondary Emphasis
.text-successSuccess
.text-success-emphasisSuccess Emphasis
.text-dangerDanger
.text-danger-emphasisDanger Emphasis
.text-warningWarning
.text-warning-emphasisWarning Emphasis
.text-infoInfo
.text-info-emphasisInfo Emphasis
.text-lightLight
.text-light-emphasisLight Emphasis
.text-darkDark
.text-dark-emphasisDark Emphasis
.text-bodyBody
.text-body-emphasisBody Emphasis
.text-body-secondaryBody Secondary
.text-body-tertiaryBody Tertiary
.text-blackBlack
.text-whiteWhite
.text-black-50Black 50
.text-white-50White 50
<p class="text-primary">RR4 Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>
<p class="text-body-emphasis">Body Emphasis</p>
<p class="text-white-50">White 50</p>
*Recipe 04

Dashboard Meter

Turbo Load 68%
0 25 50 75 100
Engine Stress 92%
idle mid high max 
<div class="rr4-meter" style="--rr4-meter-value: 68%;">
  <div class="rr4-meter-head">
    <span class="rr4-meter-label">Turbo Load</span>
    <span class="rr4-meter-value">68%</span>
  </div>
  <div class="rr4-meter-track">
    <div class="rr4-meter-fill"></div>
    <div class="rr4-meter-ticks"></div>
  </div>
  <div class="rr4-meter-scale">
    <span>0</span>
    <span>25</span>
    <span>50</span>
    <span>75</span>
    <span>100</span>
  </div>
</div>
*Recipe 05

Placeholders

<div class="card rr4-placeholder-card" aria-hidden="true">
  <img src="./assets/images/showcase-car-select.png" class="card-img-top" alt="">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-7 bg-warning"></span>
    </h5>
    <p class="card-text placeholder-wave">
      <span class="placeholder col-10 bg-light"></span>
      <span class="placeholder col-8 bg-light"></span>
      <span class="placeholder col-6 bg-secondary"></span>
    </p>
    <a class="rr4-btn is-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>
*Recipe 06

Accordion

Current Loadout
Engine tuned for grip with short ratio gearing and reinforced cooling for extended runs.

Stage 02
Average corner speed is stable. Brake balance trends slightly forward under repeated stress.

Briefing
Favor clean acceleration exits. Surface is fast but inconsistent at the final sector entry. 
<div class="accordion rr4-accordion" id="rr4AccordionDemo">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#rr4-acc-1"
        aria-expanded="true">
        Garage Status
      </button>
    </h2>
    <div id="rr4-acc-1" class="accordion-collapse collapse show">
      <div class="accordion-body">...</div>
    </div>
  </div>
</div>
*Recipe 07

Menu Stack

<aside class="rr4-sidebar">
  <span class="rr4-panel-title mb-3">Commands</span>
  <div class="rr4-menu">
    <a class="rr4-menu-item is-current" href="#">
      <span>Grand Prix</span>
      <span class="marker"></span>
    </a>
    <a class="rr4-menu-item" href="#">...</a>
  </div>
</aside>
*Recipe 08

Dialog Screen

*Mode: Comment
Dialog portrait reference
Message
Bonjour. This panel works for guides, welcome steps, or mission callouts. 
<div class="rr4-dialog">
  <div class="rr4-section-label text-warning mb-2">*Mode: Comment</div>
  <div class="row g-3 align-items-center">
    <div class="col-md-4">
      <div class="rr4-portrait">
        <img src="./assets/images/dialog-portrait.png" alt="">
      </div>
    </div>
    <div class="col-md-8">
      <span class="rr4-panel-title mb-3">Message</span>
      <div class="rr4-message-box rr4-message-box-more">...</div>
    </div>
  </div>
</div>
*Recipe 09

HUD Stats

Top Speed 119
mph
Stage 02
grip setup
<div class="rr4-stat">
  <span class="rr4-hud-caption text-warning">Top Speed</span>
  <strong>119</strong>
  <div class="rr4-meta">mph</div>
</div>
*Recipe 10

Forms

<label class="rr4-input-label" for="driver">Driver Name</label>
<input class="form-control rr4-form-control" id="driver" type="text" placeholder="Enter pilot ID">

<label class="rr4-input-label" for="team">Team</label>
<select class="form-select rr4-select" id="team">
  <option>Team Mappy</option>
</select>
*Recipe 11

Data Table

Maker Car Class Top Speed
Terrazi Wildboar Grip 119 mph
Lizard Assoluto Balance 126 mph
Age Soldat Power 132 mph
1 2 3 4 5 6 7 8 9 10 
<table class="table rr4-table">
  <thead>
    <tr>
      <th>Maker</th>
      <th>Car</th>
      <th>Class</th>
      <th>Top Speed</th>
    </tr>
  </thead>
  <tbody>
    <tr>...</tr>
  </tbody>
</table>

<div class="rr4-pagination">
  <span class="rr4-page is-current">1</span>
  <span class="rr4-page">2</span>
  <span class="rr4-page">3</span>
  <span class="rr4-page">4</span>
</div>