Components

Class-based UI patterns prefixed with t-. These are optional - term.css works without any classes. Add these when you need richer UI.

Card .t-card

Card Title

Content inside a card with surface background and border.

HTML 
<div class="t-card">
  <h4>Card Title</h4>
  <p>Content</p>
</div>

Grid .t-grid

Cell 1

Cell 2

Cell 3

HTML 
<div class="t-grid">
  <div class="t-card">Cell 1</div>
  <div class="t-card">Cell 2</div>
  <div class="t-card">Cell 3</div>
</div>

Badge .t-badge

STATUS ERROR WARN OK INFO

HTML 
<span class="t-badge">STATUS</span>
<span class="t-badge t-error">ERROR</span>
<span class="t-badge t-warn">WARN</span>
<span class="t-badge t-success">OK</span>
<span class="t-badge t-info">INFO</span>

Callout .t-callout

Note

General information.

Warning

Proceed with caution.

Danger

Destructive action ahead.

Done

Operation completed successfully.

HTML 
<div class="t-callout t-warn">
  <strong>Warning</strong>
  <p>Content</p>
</div>

Semantic Colors .t-error .t-warn .t-success .t-info

ERROR: Connection refused
WARN: Deprecated API usage
OK: All tests passed
INFO: Server started on port 3000

HTML 
<span class="t-error">ERROR: Connection refused</span>
<span class="t-warn">WARN: Deprecated API usage</span>
<span class="t-success">OK: All tests passed</span>
<span class="t-info">INFO: Server started on port 3000</span>


<!-- Compose with badges -->
<span class="t-badge t-error">ERROR</span>


<!-- Compose with callouts -->
<div class="t-callout t-warn">
  <strong>Warning</strong>
  <p>Content</p>
</div>

Bordered Table .t-table-bordered

CommandDescription
buildCompile to dist/
devDev server
testRun tests
HTML 
<table class="t-table-bordered">
  ...
</table>