Trustbar
The trustbar component is used to show unique selling propositions, services or other outstanding benefints.
Usage#
The trustbar is a unordered list element (<li>) with the required classes applied to the elements. Each list item should have one icon and a short concise statement.
Trustbar with 4 items#
<div class="trustbar ">
<div class="container-responsive">
<ul class="trustbar-list">
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
</ul>
</div>
</div>The Trustbar is intended for three to four items. On xs the items are always arranged among each other. With sm resolution 4 items are arranged in two rows with two items each. With 3 items, the third is arranged in the middle of the second row. Starting from md all items are next to each other in one line.
Trustbar with 3 items#
<div class="trustbar ">
<div class="container-responsive">
<ul class="trustbar-list">
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
</ul>
</div>
</div>Inactive trustbars#
If you do not want to link a trustbar item to another resource, you can simply swap the <a> element with a <span> element. Accordingly there will be no cursor: pointer event and the element is not click- or focusable at all.
Trustbar without links#
<div class="trustbar ">
<div class="container-responsive">
<ul class="trustbar-list">
<li class="trustbar-item ">
<span href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</span>
</li>
<li class="trustbar-item ">
<span href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</span>
</li>
<li class="trustbar-item ">
<span href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</span>
</li>
<li class="trustbar-item ">
<span href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</span>
</li>
</ul>
</div>
</div>You can mix the clickable and non-clickable elements within one trustbar.
Trustbar with links and without links#
<div class="trustbar ">
<div class="container-responsive">
<ul class="trustbar-list">
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<span href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</span>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</a>
</li>
<li class="trustbar-item ">
<span href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Trustbar text</span>
</li>
</ul>
</div>
</div>If the content of the trustbar-item exceeds the width, the text will be truncated with text-overflow: ellipsis.
Trustbar with truncated content#
<div class="trustbar ">
<div class="container-responsive">
<ul class="trustbar-list">
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>This is a very long Trustbar text. This text shows the behavior of text
getting truncated.</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>This is a very long Trustbar text. This text shows the behavior of text
getting truncated.</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>This is a very long Trustbar text. This text shows the behavior of text
getting truncated.</a>
</li>
<li class="trustbar-item ">
<a href="#" class="trustbar-item-link">
<svg class="icon icon icon-3 icon-vertical-middle trustbar-item-icon"
xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>This is a very long Trustbar text. This text shows the behavior of text
getting truncated.</a>
</li>
</ul>
</div>
</div>Change log#
Fixed#
SCSS: "Trustbar" | Added!defaultto$trustbar-bg,$trustbar-color,$trustbar-icon-margin-right,$trustbar-item-height-sm,$trustbar-item-height-lgin_variables.scssfile.