Table of Contents
Display Pattern Help
16. April 2026
Table of Contents
More general details about Display Pattern Display Pattern
File Type Pattern
The following code fragments can be used:
<cp-overlay-box-top-left style="..."></cp-overlay-box-top-left>
<cp-overlay-box-bottom-left style="..."></cp-overlay-box-bottom-left>
<cp-overlay-box-bottom-right style="..."></cp-overlay-box-bottom-right>Rules
- The style property is optional: if defined, it will allow overriding the default styles of the overlay box. It directly binds to the style attribute of an HTML element and therefore, can contain standard CSS style attributes
- The content of each element can be other HTML tags or text
- See Examples for some examples of different display patterns for different FileTypes/VirtualTypes
Virtual Item Pattern
<cp-thumbnail-content></cp-thumbnail-content>
<cp-overlay-box-top-left></cp-overlay-box-top-left>
<cp-overlay-box-bottom-left></cp-overlay-box-bottom-left>
<cp-overlay-box-bottom-right></cp-overlay-box-bottom-right>Icons
Embed icons with
<cp-icon name="video-image" size="24"></cp-icon>Example Image
<cp-overlay-box-top-left style="background-color: #1f1f1f; fill: #17202A; color: #000000">
<font color="#FFFFFF">
{% if data.fileMetadata.fileExtension %}{{data.fileMetadata.fileExtension | replace:"." | upcase }}{% endif %}
</font>
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left style="background-color: #1f1f1f; fill: #17202A; color: #000000">
{% if data.explicitContentLayer %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-block-helper">
</font>
{% endif %}
{% assign start = "now" | date: '%s' %}
{% assign end = audit.creationDate | date: '%s' %}
{% assign lifespanSeconds = start | minus: end %}
{% assign lifespanDays = lifespanSeconds | divided_by: 3600 | divided_by: 24 %}
{% if lifespanDays <= 5 %}
<font color="#f74931">
<i class="material-icons md-16 icon-new-box"></i>
</font>
{% else %}
<!--This content is {{ lifespanDays }} days old. <br-->
{% endif %}
{% if contentPermissionSetIds contains 'a16d98ceebe342c28fc5fc089a0f2ac4' %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-archive"></i>
</font>
{% elsif contentPermissionSetIds contains 'fb0fa99c03cc4a72b0b586cf3bed18cc' %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-earth"></i>
</font>
{% elsif contentPermissionSetIds contains 'c0b46e3b39154f12a1d1c9ab8fd365f0' %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-earth"></i>
</font>
{% elsif contentPermissionSetIds contains '1ed6366c34c2443fb7d9a99917bc596e' %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-account-group"></i>
</font>
{% elsif contentPermissionSetIds contains 'a628678f5e134f21a9f6b4e454113c23' %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-key-variant"></i>
</font>
{% elsif contentPermissionSetIds contains 'f0c6382971bf4710b9ca57c85c3fc76a' %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-key-variant"></i>
</font>
{% else %}
<font color="#FFFFFF">
<i class="material-icons md-16 icon-key-variant"></i>
</font>
{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#706f6e"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>Examples for all File Types
Video:
----------------------------
<cp-overlay-box-bottom-right style="background-color: transparent; fill: green">
<cp-icon name="video-image" sizeClass="ic-24"></cp-icon>
</cp-overlay-box-bottom-right>
<cp-overlay-box-top-left style="background-color: green">
{% if data.videoMetadata.fileExtension %}{{data.videoMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin
{% elsif contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %}Owner
{% else %}Private{% endif %}
{% if contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>
----------------------------------------
----------------------------------------
File:
--------------------------
{% if data.fileMetadata.fileExtension and data.fileMetadata.fileExtension != "" %}
<cp-overlay-box-top-left>
{{data.fileMetadata.fileExtension | removefirst: "." | upcase}}
</cp-overlay-box-top-left>
{% endif %}
<cp-overlay-box-bottom-left>
<h2><b>Title - <font color="#ff5576"> (!) </font></b></h2>
<p> Try out the <b>dimension</b> of the box</p>
<p> What happens if I keep increasing the lenght of the text?</p>
</cp-overlay-box-bottom-left>
<cp-overlay-box-bottom-right style="opacity: 0.7; background-color: black; color: red; fill: red">
<cp-icon name="check" sizeClass="ic-14"></cp-icon>
</cp-overlay-box-bottom-right>
----------------------------------------
----------------------------------------
Audio:
--------------------
<cp-overlay-box-top-left style="background-color: red; opacity: 0.5">
{% if data.audioMetadata.fileExtension %}{{data.audioMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
<cp-icon name="music" sizeClass="ic-18"></cp-icon>
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin
{% elsif contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %}Owner
{% else %}Private{% endif %}
{% if contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>
----------------------------------------
----------------------------------------
Document:
--------------------------
<cp-overlay-box-top-left>
{% if data.documentMetadata.fileExtension %}{{data.documentMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin
{% elsif contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %}Owner
{% else %}Private{% endif %}
{% if contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>
----------------------------------------
----------------------------------------
Image:
--------------------
<cp-overlay-box-top-left style="background-color: blue">
{% if data.imageMetadata.fileExtension %}{{data.imageMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-right style="background-color: white; fill: blue">
<cp-icon name="image"></cp-icon>
</cp-overlay-box-bottom-right>
<cp-overlay-box-bottom-left style="opacity: 0.7">
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin
{% elsif contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %}Owner
{% else %}Private{% endif %}
{% if contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>
----------------------------------------
----------------------------------------
Vector:
---------------------
<cp-overlay-box-top-left>
{% if data.vectorMetadata.fileExtension %}{{data.vectorMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds.size == 0 %}Private{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>
----------------------------------------
----------------------------------------
Video:
----------------
<cp-overlay-box-bottom-right style="background-color: transparent; fill: green">
<cp-icon name="video-image" sizeClass="ic-24"></cp-icon>
</cp-overlay-box-bottom-right>
<cp-overlay-box-top-left style="background-color: green">
{% if data.videoMetadata.fileExtension %}{{data.videoMetadata.fileExtension | removefirst: "." | upcase}}{% endif %}
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '44a2e6a0c6e74f9fbc427507cda1dbac' %}Restricted
{% elsif contentPermissionSetIds contains '5246b11b811d48c19e61c697d3819803' %}Restricted
{% elsif contentPermissionSetIds contains '22fa6a3d55194b50a9dda3432767d1c8' %}Restricted
{% elsif contentPermissionSetIds contains '15cf7c71fc5346a2951bbde4a13556df' %}Restricted
{% elsif contentPermissionSetIds contains 'fab4d49e526c4f99b50422e5aef2488c' %}Press
{% elsif contentPermissionSetIds contains 'd914d272a90c4c119c34e68adf0e343d' %}Dealers
{% elsif contentPermissionSetIds contains '8f4ea4900f0c44fc8605bf0d5b81fc2d' %}Internal Reader
{% elsif contentPermissionSetIds contains 'b999758e71294d53bdb5e585e5acb135' %}Editor PM
{% elsif contentPermissionSetIds contains '738a3f16a31541028b520331639422db' %}Editor Corporate
{% elsif contentPermissionSetIds contains '157f3241b79344e0935f87d4a40a73a3' %}Admin
{% elsif contentPermissionSetIds contains '00b15b669c174160a32254052ed06872' %}Owner
{% else %}Private{% endif %}
{% if contentPermissionSetIds contains 'b007551e236d4aeda64798043572216c' %} - Original{% endif %}
{% if brokenReferenceIds.size > 0 or brokenIndirectReferenceIds.size > 0 or brokenRelationIds.size > 0 %} - <font color="#ff5576"> (!)
</font>{% endif %}
</cp-overlay-box-bottom-left>
----------------------------------------
----------------------------------------
Virtual Type WAFT:
-----------------------------
<cp-thumbnail-content>
{% if data.otherContentAndUsageInformation.mediaType %}
<h2>{{data.otherContentAndUsageInformation.mediaType | tagbox_list | join: ", "}}</h2>{% else %}<h2>Virtual Type WAFT</h2>
{% endif %}
<h3>{% if data.virtualTypeWaft.textSingleLineNoTranslations %}{{data.virtualTypeWaft.textSingleLineNoTranslations}}<br>{% endif %} </h3>
<h5>{% if data.virtualTypeWaft.trigger.triggeredOn %} Last Triggered: {{data.virtualTypeWaft.trigger.triggeredOn | local_date: "%d.%m.%Y %H:%M:%S"}}{% endif %}</h5>
</cp-thumbnail-content>
<cp-overlay-box-top-left style="opacity: 1">
VIRTUAL
</cp-overlay-box-top-left>
<cp-overlay-box-bottom-right style="display: none">
</cp-overlay-box-bottom-right>
<cp-overlay-box-bottom-left>
{% if contentPermissionSetIds contains '2762d63b8f774790b8add8e23fa2ea4b' %}Archived
{% elsif contentPermissionSetIds contains '54953fc4a3134c85b06ef48460f8551d' %}Restricted Admin
{% elsif contentPermissionSetIds contains '9c23b9b8570c4b8c981ae2fd6c858a35' %}Restricted PM
{% elsif contentPermissionSetIds contains '39f9e25dde09424ab3734cef399a080e' %}Restricted Corporate
{% elsif contentPermissionSetIds contains '83c7e5e5dee04eab840d223720e1dac4' %}Press
{% elsif contentPermissionSetIds contains 'dc4748544b104e8483fdcaf69c0ef8b0' %}Dealer
{% elsif contentPermissionSetIds contains '353afbfba904445eb5eca4b102a8d48e' %}Internal
{% elsif contentPermissionSetIds contains '4df189f0729d41d3a5dc7d6366e95985' %}Editor Corporate
{% elsif contentPermissionSetIds contains '2ca6cf910fe149259b538b254607f1d7' %}Editor PM
{% elsif contentPermissionSetIds contains 'c647a09de9324419b9aa64118159ab1c' %}Admin
{% elsif contentPermissionSetIds contains '0fff59fe263443649accbf932a01d6e1' %}Owner
{% else %}Private{% endif %}
</cp-overlay-box-bottom-left>