Menu

Table - Center

<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>