content-embed

Information

Folder
src/components/patterns/content-embed

Files

Schema
Mocks
Template
// src/components/patterns/content-embed/content-embed.html.twig

<div class="ContentEmbed{% if not as_element %} ContentEmbed--component u-container u-grid{% endif %}">
  <div class="ContentEmbed-inner">
    {% if headline %}
      <h2> {{ headline }}</h2>
    {% endif %}

    {% if type == "embed" %}
      {{ embed|raw }}
    {% else %}
      {% include "@elements/iframe/iframe.html.twig" with iframe|merge({type: type}) only %}
    {% endif %}
  </div>
</div>

Variants

iFrame issuu
Open

iFrame issuu mock data

Raw
Resolved
with max-width
Open

with max-width mock data

Raw
Resolved
without own container
Open

without own container mock data

Raw
Resolved
iFrame Vimeo
Open

iFrame Vimeo mock data

Raw
Resolved
Twitter Embed
Open

Twitter Embed mock data

Raw
Resolved
"} }, "resolved": { "data": {"type":"embed","embed":"

Watching the cable management in progress is a feast for the eyes. #cabling #cablemanagement pic.twitter.com/WkJJZyQXEC

— CDN77.com (@CDN77com) July 8, 2021
youtube with image overlay
Open

youtube with image overlay mock data

Raw
Resolved
spotify with custom aspect ratio
Open

spotify with custom aspect ratio mock data

Raw
Resolved
content with headline
Open

content with headline mock data

Raw
Resolved
"} }, "resolved": { "data": {"headline":"Content Embed with Headline","type":"embed","embed":"

Watching the cable management in progress is a feast for the eyes. #cabling #cablemanagement pic.twitter.com/WkJJZyQXEC

— CDN77.com (@CDN77com) July 8, 2021