templates/network/horse/sections/horse_section_hero.html.twig line 1

Open in your IDE?
  1. {% set background = horse.owner and horse.owner.color ? horse.owner.color : 'bg-primary-500' %}
  3. <div class="relative">
  4.   <div class="absolute top-0 left-0 w-full h-full opacity-75 {{ background }}"
  5.     style="background-color: {{ background }};"></div>
  6.   <div class="container relative z-10 pt-8 pb-5 md:pb-12 md:pt-24 lg:pb-16 lg:pt-32">
  7.     <div class="flex w-full gap-x-3 md:gap-x-7 lg:gap-x-14 gap-y-10">
  8.       <div class="grid items-center flex-none w-16 h-16 grid-cols-4 col-span-9 grid-rows-4 md:w-36 md:h-36 lg:w-56 lg:h-56 lg:col-span-2">
  9.         {% if horse.image is not null or horse.originCountry is null %}
  10.           <div class="flex col-span-4 col-start-1 row-span-4 row-start-1">
  11.             {% include 'component/avatar.html.twig' with {
  12.               avatar: horse.image,
  13.               initials: horse.name|initials,
  14.               size: 'hero',
  15.               rounded: false
  16.             } only %}
  17.           </div>
  18.           <img class="relative self-end object-contain col-start-1 row-start-4 m-px z-60"
  19.             loading="lazy"
  20.             src="https://flagcdn.com/w320/{{ horse.originCountry|lower }}.png"
  21.             alt="{{ horse.originCountry }}"
  22.             title="{{ horse.originCountry|country_name }}" />
  23.         {% else %}
  24.           <div class="flex col-span-4 col-start-1 row-span-4 row-start-1">
  25.             <img class=""
  26.               loading="lazy"
  27.               src="https://flagcdn.com/w320/{{ horse.originCountry|lower }}.png"
  28.               alt="{{ horse.originCountry }}"
  29.               title="{{ horse.originCountry|country_name }}" />
  30.           </div>
  31.         {% endif %}
  32.       </div>
  33.       <div class="grid flex-1 gap-2">
  34.         <div class="flex flex-col tracking-wide text-white font-headline">
  35.           <h1 class="text-2xl font-medium leading-tight uppercase md:font-light md:text-4xl lg:text-5xl">
  36.             {{ horse.displayName }}
  37.           </h1>
  38.           {% set pedigree = horse.modules.pedigree %}
  39.           {% if pedigree and (pedigree.father or pedigree.mother) %}
  40.             <div class="text-xl font-medium uppercase md:font-light md:text-3xl">
  41.               <span>{{ horse.modules.Pedigree.father|default('/') }}</span>
  42.               <span>-</span>
  43.               <span>{{ horse.modules.Pedigree.mother|default('/') }}</span>
  44.             </div>
  45.           {% else %}
  46.             <div class="text-xl font-medium uppercase md:font-light md:text-3xl">
  47.               <span>{{ horse.father|default('/') }}</span>
  48.               <span>-</span>
  49.               <span>{{ horse.mother|default('/') }}</span>
  50.             </div>
  51.           {% endif %}
  52.           <div class="hidden gap-4 my-4 sm:flex">
  53.             {% for item in section_navigation_get() %}
  54.               <a target="_top" href="{{ '#' ~ item.anchor }}" class="btn-sm btn btn-neutral">
  55.                 {{ item.name|trans }}
  56.               </a>
  57.             {% endfor %}
  58.           </div>
  59.         </div>
  60.       </div>
  61.     </div>
  62.   </div>
  63. </div>