One Panel Cta Component: Default Dark

Ready

HTML
View
Context
Info
Notes


        
        <div class="container">

     <div class="js-component relative z-0 component-spacer-margin bg-bkg rounded-lg" data-theme="teal" data-mode="dark">

         <div class="overflow-hidden relative z-10">
             <div class="lg:flex items-stretch min-h-[400px]">

                 <div class="lg:w-[55%] flex">
                     <div class="relative w-full rounded-b-none rounded-lg lg:rounded-r-none lg:rounded-bl-lg overflow-hidden">

                         <picture class="block overflow-hidden object-cover w-full h-full ">

                             <img class="lazyload h-full object-cover w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">

                         </picture>
                     </div>
                 </div>

                 <div class="lg:w-[45%] flex flex-col justify-start relative overflow-hidden">

                     <div class="absolute inset-0 overflow-hidden pointer-events-none z-0 opacity-90">
                         <div class="absolute -bottom-10 -left-8 max-w-1/2">
                             <svg class="text-button-2-surface w-full h-auto" viewBox="0 0 729 453" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

                                 <g clip-path="url(#clip0_508_3879)">
                                     <path d="M223.062 459.782L271.131 371.912" stroke="currentColor" stroke-width="18.3701" />
                                     <path d="M293.484 459.782L341.553 371.912" stroke="currentColor" stroke-width="15.3084" />
                                     <path d="M363.906 459.782L411.975 371.912" stroke="currentColor" stroke-width="12.2467" />
                                     <path d="M434.32 459.782L482.389 371.912" stroke="currentColor" stroke-width="9.18503" />
                                     <path d="M504.742 459.782L552.811 371.912" stroke="currentColor" stroke-width="7.34802" />
                                     <path d="M575.156 459.782L623.225 371.912" stroke="currentColor" stroke-width="4.89868" />
                                     <path d="M645.578 459.782L693.646 371.912" stroke="currentColor" stroke-width="3.06168" />
                                     <path d="M715.992 459.782L764.061 371.912" stroke="currentColor" stroke-width="2.44283" />
                                     <path d="M152.648 459.782L200.717 371.912" stroke="currentColor" stroke-width="21.4317" />
                                     <path d="M82.2266 459.782L130.295 371.912" stroke="currentColor" stroke-width="24.4934" />
                                     <path d="M11.8047 459.782L59.873 371.912" stroke="currentColor" stroke-width="27.5551" />
                                 </g>
                                 <g clip-path="url(#clip1_508_3879)">
                                     <path d="M223.883 360.441L271.951 272.571" stroke="currentColor" stroke-width="18.3701" />
                                     <path d="M294.297 360.441L342.365 272.571" stroke="currentColor" stroke-width="15.3084" />
                                     <path d="M364.719 360.441L412.787 272.571" stroke="currentColor" stroke-width="12.2467" />
                                     <path d="M435.133 360.441L483.201 272.571" stroke="currentColor" stroke-width="9.18503" />
                                     <path d="M505.555 360.441L553.623 272.571" stroke="currentColor" stroke-width="7.34802" />
                                     <path d="M575.977 360.441L624.045 272.571" stroke="currentColor" stroke-width="4.89868" />
                                     <path d="M646.391 360.441L694.459 272.571" stroke="currentColor" stroke-width="3.06168" />
                                     <path d="M716.805 360.441L764.873 272.571" stroke="currentColor" stroke-width="2.44283" />
                                     <path d="M153.461 360.441L201.529 272.571" stroke="currentColor" stroke-width="21.4317" />
                                     <path d="M83.0469 360.441L131.115 272.571" stroke="currentColor" stroke-width="24.4934" />
                                     <path d="M12.625 360.441L60.6933 272.571" stroke="currentColor" stroke-width="24.4934" />
                                 </g>
                                 <g clip-path="url(#clip2_508_3879)">
                                     <path d="M233.258 260.548L281.326 172.678" stroke="currentColor" stroke-width="11.022" />
                                     <path d="M303.672 260.548L351.74 172.678" stroke="currentColor" stroke-width="9.79736" />
                                     <path d="M374.094 260.548L422.162 172.678" stroke="currentColor" stroke-width="9.18503" />
                                     <path d="M444.516 260.548L492.584 172.678" stroke="currentColor" stroke-width="7.34802" />
                                     <path d="M514.93 260.548L562.998 172.678" stroke="currentColor" stroke-width="4.89868" />
                                     <path d="M585.352 260.548L633.42 172.678" stroke="currentColor" stroke-width="3.06168" />
                                     <path d="M655.766 260.548L703.834 172.678" stroke="currentColor" stroke-width="1.83701" />
                                     <path d="M726.188 260.548L774.256 172.678" stroke="currentColor" stroke-width="1.62855" />
                                     <path d="M162.836 260.548L210.904 172.678" stroke="currentColor" stroke-width="13.4714" />
                                     <path d="M92.4219 260.548L140.49 172.678" stroke="currentColor" stroke-width="15.3084" />
                                     <path d="M22 260.548L70.0683 172.678" stroke="currentColor" stroke-width="18.3701" />
                                 </g>
                                 <g clip-path="url(#clip3_508_3879)">
                                     <path d="M234.07 174.209L282.139 86.3394" stroke="currentColor" stroke-width="7.34802" />
                                     <path d="M304.492 174.209L352.561 86.3394" stroke="currentColor" stroke-width="6.12335" />
                                     <path d="M374.914 174.209L422.982 86.3394" stroke="currentColor" stroke-width="4.89868" />
                                     <path d="M445.328 174.209L493.396 86.3394" stroke="currentColor" stroke-width="3.67401" />
                                     <path d="M515.742 174.209L563.811 86.3394" stroke="currentColor" stroke-width="3.06168" />
                                     <path d="M586.164 174.209L634.232 86.3394" stroke="currentColor" stroke-width="2.44934" />
                                     <path d="M656.578 174.209L704.646 86.3394" stroke="currentColor" stroke-width="1.22467" />
                                     <path d="M727 174.209L775.068 86.3394" stroke="currentColor" stroke-width="0.814276" />
                                     <path d="M163.648 174.209L211.717 86.3394" stroke="currentColor" stroke-width="11.022" />
                                     <path d="M93.2344 174.209L141.303 86.3394" stroke="currentColor" stroke-width="12.2467" />
                                     <path d="M22.8203 174.209L70.8886 86.3394" stroke="currentColor" stroke-width="12.2467" />
                                 </g>
                                 <g clip-path="url(#clip4_508_3879)">
                                     <path d="M235.695 81.1348L283.764 -6.73534" stroke="currentColor" stroke-width="4.28635" />
                                     <path d="M306.117 81.1348L354.186 -6.73534" stroke="currentColor" stroke-width="3.67401" />
                                     <path d="M376.539 81.1348L424.607 -6.73534" stroke="currentColor" stroke-width="3.06168" />
                                     <path d="M446.953 81.1348L495.021 -6.73534" stroke="currentColor" stroke-width="2.44934" />
                                     <path d="M517.375 81.1348L565.443 -6.73534" stroke="currentColor" stroke-width="1.83701" />
                                     <path d="M587.797 81.1348L635.865 -6.73534" stroke="currentColor" stroke-width="1.22467" />
                                     <path d="M658.211 81.1348L706.279 -6.73534" stroke="currentColor" stroke-width="0.612335" />
                                     <path d="M728.633 81.1348L776.701 -6.73534" stroke="currentColor" stroke-width="0.407138" />
                                     <path d="M165.281 81.1348L213.35 -6.73534" stroke="currentColor" stroke-width="4.89868" />
                                     <path d="M94.8672 81.1348L142.936 -6.73534" stroke="currentColor" stroke-width="5.51102" />
                                     <path d="M24.4453 81.1348L72.5136 -6.73534" stroke="currentColor" stroke-width="6.12335" />
                                 </g>
                                 <defs>
                                     <clipPath id="clip0_508_3879">
                                         <rect width="745.062" height="74.0991" fill="white" transform="translate(0 378.648)" />
                                     </clipPath>
                                     <clipPath id="clip1_508_3879">
                                         <rect width="745.062" height="73.2848" fill="white" transform="translate(0 279.307)" />
                                     </clipPath>
                                     <clipPath id="clip2_508_3879">
                                         <rect width="750.111" height="73.4802" fill="white" transform="translate(0.382812 179.414)" />
                                     </clipPath>
                                     <clipPath id="clip3_508_3879">
                                         <rect width="750.111" height="73.4802" fill="white" transform="translate(0.382812 93.0747)" />
                                     </clipPath>
                                     <clipPath id="clip4_508_3879">
                                         <rect width="750.111" height="73.4802" fill="white" transform="translate(0.382812)" />
                                     </clipPath>
                                 </defs>
                             </svg>
                         </div>
                     </div>

                     <div class="max-w-xl p-4 lg:p-10 z-50">
                         <h2 class="text-3xl xl:text-6xl font-bold leading-tight text-heading">Stress and mental wellbeing resources for Higher Education Institutions</h2>
                         <div class="prose prose-lg mt-4 ">
                             <p>UCEA and the HE trade unions have developed this stress and mental wellbeing resources pack for HE institutions.</p>
                         </div>

                         <div class="mt-8 mb-8 xl:mb-20">

                             <a href="./.html" class="btn bg-button-2-surface text-button-2-arrow border-2 border-button-2-surface hover:bg-button-2-surface-hover hover:border-button-2-surface-hover">

                                 Find out more

                             </a>

                         </div>

                     </div>

                 </div>

             </div>
         </div>
     </div>
 </div>


        <div class="container">

    <div class="js-component relative z-0 component-spacer-margin bg-bkg rounded-lg" {% if dataTheme %}data-theme="{{dataTheme}}"{% endif %} {% if dataMode %}data-mode="{{dataMode}}"{% endif %}>

    <div class="overflow-hidden relative z-10">
        <div class="lg:flex items-stretch min-h-[400px]">
        
            <div class="lg:w-[55%] flex">
                <div class="relative w-full rounded-b-none rounded-lg lg:rounded-r-none lg:rounded-bl-lg overflow-hidden">
                    {% render "@image-frame", {
                        src: image.src,
                        srcSet: image.srcSet,
                        modifier: 'h-full object-cover',
                        frameModifier: 'object-cover w-full h-full',
                        width: 1200,
                        height: 675
                    } %}
                </div>
            </div>

            <div class="lg:w-[45%] flex flex-col justify-start relative overflow-hidden">

                {% if pattern %}
                    <div class="absolute inset-0 overflow-hidden pointer-events-none z-0 opacity-90">
                        <div class="{{ patternClass or 'absolute bottom-0 left-0 w-full'}}">
                            {% render "@" + pattern, { modifier: "text-button-2-surface w-full h-auto", ariaHidden: true } %}
                        </div>
                    </div>
                {% endif %}

                <div class="max-w-xl p-4 lg:p-10 z-50">
                    <h2 class="text-3xl xl:text-6xl font-bold leading-tight text-heading">{{ heading }}</h2>
                    <div class="prose prose-lg mt-4 {{ richTextColourClass }}">
                        <p>{{ description }}</p>
                    </div>
                    {% if link %}
                        <div class="mt-8 mb-8 xl:mb-20">
                            {% render "@button--light", link, true %}
                        </div>
                    {% endif %}
                </div>

            </div>

            </div>
        </div>
    </div>
</div>


        
            
            {
  "siteName": "UCEA",
  "dataTheme": "teal",
  "dataMode": "dark",
  "pattern": "diagonal-pattern",
  "patternClass": "absolute -bottom-10 -left-8 max-w-1/2",
  "heading": "Stress and mental wellbeing resources for Higher Education Institutions",
  "description": "UCEA and the HE trade unions have developed this stress and mental wellbeing resources pack for HE institutions.",
  "image": {
    "src": "images/test-imagery/example5@16-10@1200w.jpg",
    "srcSet": [
      {
        "url": "images/test-imagery/example5@16-10@1200w.jpg",
        "size": 1200
      }
    ],
    "mdMax": {
      "width": 1920,
      "height": 720,
      "srcSet": [
        {
          "url": "images/test-imagery/example5@16-10@1200w.jpg",
          "size": 1200
        }
      ]
    },
    "smMax": {
      "width": 1200,
      "height": 750,
      "srcSet": [
        {
          "url": "images/test-imagery/example5@16-10@1200w.jpg",
          "size": 1200
        }
      ]
    }
  },
  "link": {
    "text": "Find out more",
    "url": "./"
  }
}

Handle: @one-panel-cta-component--default-dark
Preview:
- With layout
- Component only
Filesystem Path: fractal\components\02-umbraco-repeatable-components\one-panel-cta-component\one-panel-cta-component.nunjucks
References (2): @image-frame, @button--light

No notes defined.