<section class="accordion bm-animate bm-fade-up pt-5 pb-5">
<div class="container-xxl pb-md-5">
<div class="row">
<div class="col-xxl-10 offset-xxl-1">
<div class="accordion-wrapper">
<div class="accordion-row">
<div class="accordion-heading icon-diverse">
<h3 class="h3 pt-5 pb-5 p-0 m-0">Investing in category–defining leaders across industries and stages</h3>
<div class="chevron"></div>
</div>
<div class="accordion-content">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin libero tristique sem vulputate, ut dapibus nisl semper. Quisque non faucibus ex. Nunc in mattis erat. Vivamus porta quam nec magna porttitor, vitae porttitor nibh egestas. Quisque dapibus nulla a justo ultricies, vitae elementum lorem venenatis. Suspendisse convallis lacinia scelerisque. Quisque hendrerit, magna a gravida mattis, mauris neque facilisis neque, ac vulputate ipsum ex id dui. Vivamus eget gravida lacus.</p>
</div>
</div>
</div>
<div class="accordion-row">
<div class="accordion-heading icon-partnerships">
<h3 class="h3 pt-5 pb-5 p-0 m-0">Enabling partnerships with Deutsche Telekom – the world’s leading digital telco</h3>
<div class="chevron"></div>
</div>
<div class="accordion-content">
<div class="inner">
<p>
<ul>
<li><b>Backing companies throughout the investment journey</b>, from strategy and origination to execution, integration, growth and exit, with a long-term partnership orientation.</li>
<li>Providing co-development opportunities leveraging Deutsche Telekom’s market- and engineering expertise.</li>
<li>Accelerating commercial growth through pilot projects, joint go-to-market , and cross-selling into Deutsche Telekom’s enterprise, SMB, and consumer customer bases.</li>
<li>Dedicated Value Creation Team Facilitating and accelerating joint business with Deutsche Telekom</li>
</ul>
</p>
</div>
</div>
</div>
<div class="accordion-row">
<div class="accordion-heading icon-growth">
<h3 class="h3 pt-5 pb-5 p-0 m-0">Accelerating growth and long-term value through full-cycle partnership and support</h3>
<div class="chevron"></div>
</div>
<div class="accordion-content">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin libero tristique sem vulputate, ut dapibus nisl semper. Quisque non faucibus ex. Nunc in mattis erat. <br /><br />Vivamus porta quam nec magna porttitor, vitae porttitor nibh egestas. Quisque dapibus nulla a justo ultricies, vitae elementum lorem venenatis. Suspendisse convallis lacinia scelerisque. Quisque hendrerit, magna a gravida mattis, mauris neque facilisis neque, ac vulputate ipsum ex id dui. Vivamus eget gravida lacus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="accordion bm-animate bm-fade-up pt-5 pb-5">
<div class="container-xxl pb-md-5">
<div class="row">
<div class="col-xxl-10 offset-xxl-1">
{{#if rows}}
<div class="accordion-wrapper">
{{#each rows}}
<div class="accordion-row">
<div class="accordion-heading icon-{{ icon }}">
<h3 class="h3 pt-5 pb-5 p-0 m-0">{{ heading }}</h3>
<div class="chevron"></div>
</div>
<div class="accordion-content">
<div class="inner">
<p>{{{ content }}}</p>
</div>
</div>
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
</section>
{
"rows": [
{
"icon": "diverse",
"heading": "Investing in category–defining leaders across industries and stages",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin libero tristique sem vulputate, ut dapibus nisl semper. Quisque non faucibus ex. Nunc in mattis erat. Vivamus porta quam nec magna porttitor, vitae porttitor nibh egestas. Quisque dapibus nulla a justo ultricies, vitae elementum lorem venenatis. Suspendisse convallis lacinia scelerisque. Quisque hendrerit, magna a gravida mattis, mauris neque facilisis neque, ac vulputate ipsum ex id dui. Vivamus eget gravida lacus."
},
{
"icon": "partnerships",
"heading": "Enabling partnerships with Deutsche Telekom – the world’s leading digital telco",
"content": "<ul><li><b>Backing companies throughout the investment journey</b>, from strategy and origination to execution, integration, growth and exit, with a long-term partnership orientation.</li><li>Providing co-development opportunities leveraging Deutsche Telekom’s market- and engineering expertise.</li><li>Accelerating commercial growth through pilot projects, joint go-to-market , and cross-selling into Deutsche Telekom’s enterprise, SMB, and consumer customer bases.</li><li>Dedicated Value Creation Team Facilitating and accelerating joint business with Deutsche Telekom</li></ul>"
},
{
"icon": "growth",
"heading": "Accelerating growth and long-term value through full-cycle partnership and support",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin libero tristique sem vulputate, ut dapibus nisl semper. Quisque non faucibus ex. Nunc in mattis erat. <br/><br/>Vivamus porta quam nec magna porttitor, vitae porttitor nibh egestas. Quisque dapibus nulla a justo ultricies, vitae elementum lorem venenatis. Suspendisse convallis lacinia scelerisque. Quisque hendrerit, magna a gravida mattis, mauris neque facilisis neque, ac vulputate ipsum ex id dui. Vivamus eget gravida lacus."
}
]
}
// accordion
const accordion = {
init() {
if (!document.querySelector('.accordion-heading')) {
return;
}
let accTriggers = document.getElementsByClassName('accordion-heading');
const slideDown = element => element.style.height = `${element.scrollHeight}px`;
for (let i = 0; i < accTriggers.length; i++) {
accTriggers[i].addEventListener('click', function(e) {
e.preventDefault();
if(e.target.classList.contains('open')){
e.target.classList.remove('open');
e.target.nextElementSibling.style.height = 0;
} else{
e.target.classList.add('open');
slideDown( e.target.nextElementSibling );
}
});
}
}
};
accordion.init();
export default accordion;
// accordion
section{
&.accordion{
.accordion-row{
border-bottom: 1px solid rgba($white, 0.4);
}
.accordion-heading{
cursor: pointer;
background-repeat: no-repeat;
background-position: left center;
background-size: 30px;
position: relative;
padding-left: 5rem;
padding-right: 5rem;
@include media-breakpoint-up(md){
background-size: 40px;
padding-left: 8rem;
padding-right: 8rem;
}
&.icon-diverse{
background-image: url("data:image/svg+xml,%3Csvg width='40' height='39' viewBox='0 0 40 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5898 32.0073C22.0931 32.0073 28.1757 26.3245 28.1757 19.3144C28.1757 12.3043 22.0931 6.62146 14.5898 6.62146C7.08652 6.62146 1.00391 12.3043 1.00391 19.3144C1.00391 26.3245 7.08652 32.0073 14.5898 32.0073Z' stroke='white' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M24.7001 37.3205C32.2034 37.3205 38.286 31.6377 38.286 24.6276C38.286 17.6175 32.2034 11.9347 24.7001 11.9347C17.1969 11.9347 11.1143 17.6175 11.1143 24.6276C11.1143 31.6377 17.1969 37.3205 24.7001 37.3205Z' stroke='white' stroke-width='1.5' stroke-miterlimit='10'/%3E%3Cpath d='M24.7001 26.6939C32.2034 26.6939 38.286 21.0111 38.286 14.001C38.286 6.99091 32.2034 1.30811 24.7001 1.30811C17.1969 1.30811 11.1143 6.99091 11.1143 14.001C11.1143 21.0111 17.1969 26.6939 24.7001 26.6939Z' stroke='white' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
}
&.icon-partnerships{
background-image: url("data:image/svg+xml,%3Csvg width='43' height='44' viewBox='0 0 43 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.7357 35.6255C25.0284 38.1334 22.5225 39.9898 19.6259 40.8925C16.7293 41.7952 13.6125 41.691 10.7826 40.597C7.95272 39.503 5.57636 37.4835 4.04019 34.8672C2.50402 32.2508 1.89847 29.1916 2.32207 26.1874C2.74567 23.1831 4.17349 20.4106 6.3732 18.321C8.5729 16.2314 11.415 14.9478 14.4371 14.6789C17.4591 14.41 20.4832 15.1717 23.0173 16.8401C25.5513 18.5085 27.4462 20.9854 28.3936 23.8677' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.2717 8.75049C17.9783 6.24199 20.4837 4.38487 23.38 3.48134C26.2763 2.5778 29.3932 2.68103 32.2234 3.77423C35.0537 4.86742 37.4306 6.88623 38.9675 9.50216C40.5045 12.1181 41.1109 15.1771 40.6881 18.1815C40.2654 21.186 38.8383 23.9589 36.6392 26.0491C34.44 28.1393 31.5982 29.4237 28.5762 29.6934C25.5542 29.9632 22.5299 29.2022 19.9954 27.5345C17.4608 25.8667 15.5653 23.3904 14.6172 20.5083' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
&.icon-growth{
background-image: url("data:image/svg+xml,%3Csvg width='43' height='44' viewBox='0 0 43 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.19738 25.4323L7.94024 19.0579L12.4502 26.3561' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.97113 19.1385C6.84645 23.4191 7.46565 27.9711 9.69289 31.7958C11.9201 35.6205 15.5735 38.4055 19.8516 39.54' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.7714 3.05884L34.9746 11.0138L26.4401 11.8638' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34.9512 10.9971C31.5864 8.10789 27.215 6.66775 22.7918 6.99129C18.3687 7.31483 14.2533 9.37575 11.3448 12.7238' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M37.9141 40.7628L29.4266 39.5215L33.001 31.7211' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.5449 39.451C33.7246 38.0081 37.1603 34.9643 39.0964 30.989C41.0326 27.0136 41.3108 22.4321 39.8699 18.2516' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
h3{
pointer-events: none;
}
&.open{
.chevron{
transform: rotate(180deg);
}
}
}
.chevron{
width: 20px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-image: url("data:image/svg+xml,%3Csvg width='33' height='18' viewBox='0 0 33 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.0039 0.915039L16.5039 16.915L1.00391 0.915038' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
pointer-events: none;
transition: all 0.4s;
@include media-breakpoint-up(md){
width: 30px;
}
}
.accordion-content{
height: 0;
overflow: hidden;
transition: all 0.4s;
background: radial-gradient(27.09% 27.09% at 50.03% 100%, #4D4D4D 0%, #000 100%);
.inner{
padding: 0 2rem 4rem 6rem;
@include media-breakpoint-up(md){
padding: 0 8rem 4rem 8rem;
}
}
ul{
li{
padding-bottom: 2rem;
}
}
}
}
}
No notes defined.