table cell

The table cell is the smallest element of the table. For the <td> or <td> elements are two style modificators available.

By adding the -highlighted class, the containing text will be rendered in bold.

This guiding page is meant for a quick overview about the different types of a table cell. For a full example of a table, have a look at Molecules > Table.
table of content

component variations

default

Open on blank page
Neutral
<table class="m-table">
  <tr><td>Neutral</td></tr>
</table>

highlighted

Open on blank page
Highlighted
<table class="m-table">
  <tr><td class="-secondary">Highlighted</td></tr>
</table>

icon

Open on blank page
<table class="m-table">
  <tr>
    <td class="-with-icon">
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    </td>
  </tr>
</table>

icon highlighted

Open on blank page
<table class="m-table">
  <tr>
    <td class="-secondary -with-icon">
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    </td>
  </tr>
</table>

icon highlighted with label

Open on blank page
Label
<table class="m-table">
  <tr>
    <td class="-secondary -with-icon -with-icon-and-label">
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
      Label
    </td>
  </tr>
</table>

additional content

styles SCSS

// CSS to be found in the table molecule