Pronto, a frontend framework built by Imarc

⛶⬒

<section class="section logoCloud"> <div class="container"> <h2 class="logoCloud__title">Logo Cloud Section Title</h2> <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p> </div> <div class="logoGrid"> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> </div> </section> <section class="section logoCloud -center"> <div class="container"> <h2 class="logoCloud__title">Logo Cloud Section Title .-center</h2> <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p> </div> <div class="logoGrid"> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> <div class="logoGrid__item"> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </div> </div> </section> <section class="section logoCloud -reduced"> <div class="container"> <h2 class="logoCloud__title">Logo Cloud with Links</h2> </div> <ul class="logoGrid"> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> <li class="logoGrid__item"> <a href="#" class="logoGrid__link"> <span class="srOnly">Logo name</span> </a> <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" /> </li> </ul> </section>

@use "@imarc/pronto/resources/styles/imported" as *; .logoCloud { $b: &; .container { padding-bottom: 2rem; } &__title { margin-bottom: 0; } &.-reduced { .logoGrid__item { height: fluid-rems(2, 3); } } &.-center { #{$b}__title, #{$b}__description { text-align: center; } } }