Card
Card title
This is a card subtitle.<div class="card">
<div class="card-body">
<h2>Card title</h2>
<span>This is a card subtitle.</span>
</div>
</div><div class="card">
<div class="card-body">
<h2>Card title</h2>
<span>This is a card subtitle.</span>
</div>
</div>Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<h2 class="card-header">Card header title</h2>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="card">
<div class="card-body">
<span class="h2"><span class="text-primary">3</span> result(s)</span>
</div>
<table class="table">
<thead class="table-active">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="card">
<table class="table">
<thead class="table-active">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><div class="row mb-n2">
<div class="col-4"><span class="fw-bold small text-uppercase pl-3">from/to</span></div>
<div class="col-3"><span class="fw-bold small text-uppercase pl-0">total translated words</span></div>
<div class="col-5"><span class="fw-bold small text-uppercase pl-0">manually translated words</span></div>
</div>
<div class="row">
<div class="col">
<div class="card language-pair" data-component="language-pair-1" style="cursor: pointer;">
<div class="card-body py-2">
<div class="row">
<div class="col-4 m-auto">
<div class="d-flex align-items-center">
<a class="d-flex" href="#">
<div class="d-flex align-items-center">
<span class="me-2 wg-flag wg-flag-en"></span>
<h3 role="presentation">English</h3>
</div>
<i aria-label="to" class="material-icons ps-1 pe-1 me-2 ms-2 h1 text-body">chevron_right</i>
<div class="d-flex align-items-center">
<span class="d-flex flex-grow-1"><span class="me-2 wg-flag wg-flag-th"></span></span>
<h3 role="presentation">Thai</h3>
</div>
</a>
</div>
</div>
<div class="col-3 d-flex align-items-center">
<h3 role="presentation">2,290</h3>
</div>
<div class="col-2">
<span class="h3 text-primary">3%</span>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="3" class="progress-bar" role="progressbar" style="width: 3%;"></div>
</div>
</div>
<div class="col-3 m-auto d-flex pl-4 language-pair-disabled">
<span class="dropdown mt-auto mb-auto">
<a aria-label="Open language pair options" class="dropdown-toggle p-2" data-toggle="dropdown">
Options
</a>
<span class="dropdown-menu dropdown-menu-right" style="min-width: 24rem;">
<form>
<span class="dropdown-item-text">
<span class="custom-control custom-switch">
<div class="d-flex justify-content-between" style="line-height: 1.9em;">
<input checked="" class="custom-control-input visibility-toggle" id="53_language_visibility_toggle" name="enabled" tabindex="0" type="checkbox" value="1" />
<label class="checkbox-custom h3 custom-control-label" for="53_language_visibility_toggle">
Make public
</label>
<a class="tooltip-helper d-none" href="#" target="_blank">
How to view private translations?
</a>
<i
class="material-icons float-right mt-1"
data-original-title="Switch off if you want the language to be private, meaning it is only available by adding <br/><b>?weglot-private=1</b> at the end of the URL. This means it won't be visible for search engines or visitors."
data-placement="top"
data-toggle="tooltip-html"
tabindex="1"
>
info
</i>
</div>
</span>
</span>
<span class="dropdown-item-text">
<span class="custom-control custom-switch">
<input checked="" class="custom-control-input" id="53_display_automatic_toggle" name="automaticTranslationEnabled" tabindex="0" type="checkbox" value="1" />
<label class="checkbox-custom h3 custom-control-label" for="53_display_automatic_toggle">
Display automatic translations
</label>
<i
class="material-icons float-right mt-1"
data-original-title="Switch off if you prefer to show the original sentence rather than automatic translations on your website. When off, it means only manual translations will be shown on your website."
data-placement="top"
data-toggle="tooltip"
tabindex="0"
>
info
</i>
</span>
</span>
</form>
</span>
</span>
<div class="actions">
<a class="actions-item language-pair-link p-1" href="#" style="opacity: 1;">
<i
aria-label="Access all translations for language pair English to Thai."
class="material-icons"
data-original-title="Access all translations for language pair English to Thai."
data-placement="top"
data-toggle="tooltip"
role="button"
tabindex="0"
>
edit_note
</i>
</a>
<a class="actions-item p-1" tabindex="0">
<i
aria-label="Delete language pair English to Thai and all associated translations."
class="material-icons"
data-original-title="Delete language pair English to Thai and all associated translations."
data-placement="top"
data-toggle="tooltip"
>
delete
</i>
</a>
</div>
</div>
</div>
<a class="badge bg-warning language-pair-disabled pending-translation-link" href="#">
<span class="d-flex align-items-center"> <span class="material-icons me-1">warning</span> Detected content (2) </span>
</a>
</div>
</div>
</div>
</div>