Menu

Table - Center

Open fullscreen 
<table class="mp c-table c-table--center" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aeris</td>
      <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis.</td>
    </tr>
    <tr>
      <td>OMNISEC</td>
      <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
    </tr>
  </tbody>
</table>
{
  "headers": [
    "Name",
    "Description"
  ],
  "rows": [
    [
      "Aeris",
      "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis."
    ],
    [
      "OMNISEC",
      "Nullam quis risus eget urna mollis ornare vel eu leo."
    ]
  ],
  "classes": "c-table--center"
}

Responsive variant

For the .c-table--responsive variant to display correctly, give each <td> element a data-responsive-title attribute, corresponding to the column headers. E.g. for a two-column table where the column headers are "Name" and "Description", the <td>s should be marked up as follows:

<tbody>
    <tr>
        <td data-responsive-title="Name">Aeris</td>
        <td data-responsive-title="Description">Vivamus sagittis lacus vel</td>
    </tr>
    <tr>
        <td data-responsive-title="Name">OMNISEC</td>
        <td data-responsive-title="Description">Nullam quis risus eget urna</td>
    </tr>
</tbody>