A placeholder element that takes the place of a missing or restricted image.
<div class="flex flex-col grow items-center justify-center w-full mx-auto bg-tertiary-100 text-tertiary-500 rounded-sm max-w-md p-6">
<div class="mb-4">
<div class="fill-current w-7 h-7 md:w-8 md:h-8" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="3" y1="3" x2="21" y2="21"></line>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<path d="M19.121 19.122a3 3 0 0 1 -2.121 .878h-10a3 3 0 0 1 -3 -3v-10c0 -.833 .34 -1.587 .888 -2.131m3.112 -.869h9a3 3 0 0 1 3 3v9"></path>
<path d="M4 15l4 -4c.928 -.893 2.072 -.893 3 0l5 5"></path>
<path d="M16.32 12.34c.577 -.059 1.162 .162 1.68 .66l2 2"></path>
</svg></div>
</div>
<div class="font-heading font-semibold text-lg text-center">
Image Not Available
</div>
</div>
{% apply spaceless %}
{% set defaultClasses = [
'flex',
'flex-col',
'grow',
'items-center',
'justify-center',
'w-full',
'mx-auto',
'bg-tertiary-100',
'text-tertiary-500',
'rounded-sm'
] %}
{# Prop: classes[] #}
{% if classes %}
{% set defaultClasses = defaultClasses|merge(classes) %}
{% endif %}
{# Prop: type #}
{% if type == 'user' %}
{% set icon = 'user' %}
{% elseif type == 'document' %}
{% set icon = 'file-text' %}
{% else %}
{% set icon = 'photo-off' %}
{% set type = 'missing' %}
{% endif %}
<div class="{{ defaultClasses|join(' ') }}">
<div class="mb-4">{% include "@components/icon/icon.twig" with { icon: icon, size: 'medium' } %}</div>
<div class="font-heading font-semibold text-lg text-center">
{% block content %}
{% if type == 'restricted' %}
Image Not Available Due to Copyright Restrictions
{% else %}
Image Not Available
{% endif %}
{% endblock content %}
</div>
</div>
{% endapply %}