@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
249 lines (247 loc) • 9.73 kB
HTML
<html>
<head>
<title>Kit Digital - Universidad San Sebastían</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/theme.css" rel="stylesheet" type="text/css" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container my-80">
<h4>uss-table</h4>
<table class="uss-table">
<thead>
<tr class="uss-table__row">
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th
class="uss-table__cell uss-table__cell--header uss-table__cell--align-right"
>
Align right
</th>
<th
class="uss-table__cell uss-table__cell--header uss-table__cell--align-right"
>
Align right
</th>
</tr>
</thead>
<tbody>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
</tbody>
</table>
<div class="uss-divider my-40"></div>
<h4>uss-table + uss-table--large + uss-table--stripes</h4>
<table class="uss-table uss-table--large uss-table--stripes">
<thead>
<tr class="uss-table__row">
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th
class="uss-table__cell uss-table__cell--header uss-table__cell--align-right"
>
Align right
</th>
<th
class="uss-table__cell uss-table__cell--header uss-table__cell--align-right"
>
Align right
</th>
</tr>
</thead>
<tbody>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
</tbody>
</table>
<div class="uss-divider my-40"></div>
<h4>uss-table + uss-table--large + uss-table--stripes-odd</h4>
<table class="uss-table uss-table--large uss-table--stripes-odd">
<thead>
<tr class="uss-table__row">
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th class="uss-table__cell uss-table__cell--header">Column head</th>
<th
class="uss-table__cell uss-table__cell--header uss-table__cell--align-right"
>
Align right
</th>
<th
class="uss-table__cell uss-table__cell--header uss-table__cell--align-right"
>
Align right
</th>
</tr>
</thead>
<tbody>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
<tr class="uss-table__row">
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell">Cell content</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
<td class="uss-table__cell uss-table__cell--align-right">
$ 999.000
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>