<div class="match-teaser">
<div class="border-b border-b-white flex justify-between items-center pr-0.5">
<span class="typo intro">February 13th | Sun Life Stadium</span>
</div>
<a href="" class="px-0.5 py-1 no-underline">
<div class="grid grid-cols-12 basis-10/12">
<div class="col-span-4 flex justify-center pl-1">
<div class="team-logo-title">
<div class="fallback-logo">
<i class="team"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="m41.07 58h-13.59a7.51 7.51 0 0 1 0-15 4.42 4.42 0 0 0 4.42-4.42v-3.93a4.39 4.39 0 0 0 -2.78-4.1l-14.49-5.79a4 4 0 0 1 -2.3-2.43 3.92 3.92 0 0 1 .3-3.26 25.93 25.93 0 0 1 48.37 13 37.2 37.2 0 0 1 -3.13 14.93 18.32 18.32 0 0 1 -16.8 11zm-6-49.86a24 24 0 0 0 -20.71 11.93 1.93 1.93 0 0 0 -.14 1.61 2 2 0 0 0 1.16 1.22l14.48 5.79a6.38 6.38 0 0 1 4 6v3.92a6.43 6.43 0 0 1 -6.38 6.39 5.51 5.51 0 0 0 0 11h13.59a16.36 16.36 0 0 0 15-9.8 34.8 34.8 0 0 0 2.21-6.91 35.19 35.19 0 0 0 .72-7.22 23.93 23.93 0 0 0 -23.93-23.93z" />
<path d="m14 58h-6a1 1 0 0 1 -.71-.29l-4-4a1 1 0 0 1 -.29-.71v-11a1 1 0 0 1 .29-.71l4-4a1 1 0 0 1 .71-.29h11.82l3.38-9.81a1 1 0 0 1 .95-.71 1 1 0 0 1 1 1 1.33 1.33 0 0 1 0 .34l-3.22 9.18h3.66l5.83-5.84a1 1 0 1 1 1.42 1.42l-6.13 6.13a1 1 0 0 1 -.71.29h-4.76l-6.24 18.33a1 1 0 0 1 -1 .67zm-5.59-2h4.88l5.84-17h-10.72l-3.41 3.41v10.18z" />
<path d="m22 48h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z" />
<path d="m45 45a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
</svg></i>
</div>
<span class="typo title"><strong>Arsenal</strong> | NFL</span>
</div>
</div>
<div class="col-span-4 flex items-center justify-center">
<h1 class="headline ">VS</h1>
</div>
<div class="col-span-4 flex justify-center pr-1">
<div class="team-logo-title">
<div class="fallback-logo">
<i class="team"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="m41.07 58h-13.59a7.51 7.51 0 0 1 0-15 4.42 4.42 0 0 0 4.42-4.42v-3.93a4.39 4.39 0 0 0 -2.78-4.1l-14.49-5.79a4 4 0 0 1 -2.3-2.43 3.92 3.92 0 0 1 .3-3.26 25.93 25.93 0 0 1 48.37 13 37.2 37.2 0 0 1 -3.13 14.93 18.32 18.32 0 0 1 -16.8 11zm-6-49.86a24 24 0 0 0 -20.71 11.93 1.93 1.93 0 0 0 -.14 1.61 2 2 0 0 0 1.16 1.22l14.48 5.79a6.38 6.38 0 0 1 4 6v3.92a6.43 6.43 0 0 1 -6.38 6.39 5.51 5.51 0 0 0 0 11h13.59a16.36 16.36 0 0 0 15-9.8 34.8 34.8 0 0 0 2.21-6.91 35.19 35.19 0 0 0 .72-7.22 23.93 23.93 0 0 0 -23.93-23.93z" />
<path d="m14 58h-6a1 1 0 0 1 -.71-.29l-4-4a1 1 0 0 1 -.29-.71v-11a1 1 0 0 1 .29-.71l4-4a1 1 0 0 1 .71-.29h11.82l3.38-9.81a1 1 0 0 1 .95-.71 1 1 0 0 1 1 1 1.33 1.33 0 0 1 0 .34l-3.22 9.18h3.66l5.83-5.84a1 1 0 1 1 1.42 1.42l-6.13 6.13a1 1 0 0 1 -.71.29h-4.76l-6.24 18.33a1 1 0 0 1 -1 .67zm-5.59-2h4.88l5.84-17h-10.72l-3.41 3.41v10.18z" />
<path d="m22 48h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z" />
<path d="m45 45a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
</svg></i>
</div>
<span class="typo title"><strong>Arsenal</strong> | NFL</span>
</div>
</div>
</div>
</a>
<div class="flex items-start justify-center">
<div data-vue="rating" data-rating-id="" data-rating="4" data-area="football_match"></div>
</div>
</div>
{# ! HAS VUE COMPONENT ! #}
<div class="match-teaser">
{% if match.stadium is defined %}
<a class="no-underline border-b border-b-white flex justify-between items-center pr-0.5" href="{{ match.stadium.link }}">
{% else %}
<div class="border-b border-b-white flex justify-between items-center pr-0.5">
{% endif %}
{% include '@atoms/copy/copy.twig' with {
text: match.intro ~ (match.stadium is defined ? ' | ' ~ match.stadium.name : ''),
className: 'intro'
} only %}
{% if match.stadium is defined %}
</a>
{% else %}
</div>
{% endif %}
<a href="{{ match.link }}" class="px-0.5 py-1 no-underline">
<div class="grid grid-cols-12 basis-10/12">
<div class="col-span-4 flex justify-center pl-1">
{% include '@molecules/teamLogoTitle/team_logo_title.twig' with match.home only %}
</div>
<div class="col-span-4 flex items-center justify-center">
{% if match.finished and match.hasScore %}
{% include '@atoms/headline/headline.twig' with {
headline: match.score,
type: 'h3',
className: 'text-center'
} only %}
{% else %}
{% include '@atoms/headline/headline.twig' with {
headline: 'VS'
} only %}
{% endif %}
</div>
<div class="col-span-4 flex justify-center pr-1">
{% include '@molecules/teamLogoTitle/team_logo_title.twig' with match.away only %}
</div>
</div>
</a>
<div class="flex items-start justify-center">
{% if match.finished %}
<div data-vue="rating"
data-rating-id="{{ match.rating.rating_id }}"
data-rating="{{ match.rating.rating }}"
data-area="football_match"
></div>
{% else %}
{% include '@atoms/button/button.twig' with {
cta: t('Infos zum Spiel'),
type: 'x-btn--primary small',
href: {url: match.link}
} %}
{% endif %}
</div>
</div>
{
"match": {
"finished": true,
"intro": "February 13th | Sun Life Stadium",
"home": {
"name": "Arsenal",
"league": "NFL"
},
"away": {
"name": "Arsenal",
"league": "NFL"
},
"score": "10 - 27",
"rating": {
"rating": 4,
"canRate": true
}
}
}
{% include '@molecules/match_teaser/match_teaser.twig' with {
} only %}Fields intro -> atom
score -> atom
rating -> molecule
away -> molecule
away -> molecule