A table with cells that have paragraphs.
ⓘ Notice
On Portal tables and
s-truncated-tables, text in a<p>tag. will truncate at N lines; see truncate mixin to control line count.
<table class=" ">
<thead>
<tr>
<th>Name</th>
<th>Summary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>apple-sauce</th>
<td title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</td>
<td>
<ul>
<li><a href="#">View Details</a></li>
<li>
<button class="c-button c-button--as-link">
Delete
</button>
</li>
</ul>
</td>
</tr>
<tr>
<th>milk-shake-032</th>
<td title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</td>
<td>
<ul>
<li><a href="#">View Details</a></li>
<li>
<button class="c-button c-button--as-link">
Delete
</button>
</li>
</ul>
</td>
</tr>
<tr>
<th>white-candy-5</th>
<td title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</td>
<td>
<ul>
<li><a href="#">View Details</a></li>
<li>
<button class="c-button c-button--as-link">
Delete
</button>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "elements",
"data": {
"cols": [
"Name",
"Summary",
"Actions"
],
"rows": [
{
"name": "apple-sauce",
"paragraph": true,
"acts": [
{
"is-link": true,
"text": "View Details"
},
{
"is-button": true,
"text": "Delete"
}
]
},
{
"name": "milk-shake-032",
"paragraph": true,
"acts": [
{
"is-link": true,
"text": "View Details"
},
{
"is-button": true,
"text": "Delete"
}
]
},
{
"name": "white-candy-5",
"paragraph": true,
"acts": [
{
"is-link": true,
"text": "View Details"
},
{
"is-button": true,
"text": "Delete"
}
]
}
]
}
}