Banners
Componentes
Banners
Es importante elegir imágenes y fotografías que acompañen el contenido que se muestra en la web y coincida con valores de la marca.
Hemos definido un set de tipos y tamaños de banners o cabeceras de página para presentar ese tipo de contenido.
Banner Franja
<div class="row mx-0">
<div class="col-md-3 col-4 px-0">
<a href="#" class="uft-card uft-card--square uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=1" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
<div class="col-md-3 col-4 px-0">
<a href="#" class="uft-card uft-card--square uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=2" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
<div class="col-md-3 col-4 px-0">
<a href="#" class="uft-card uft-card--square uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=3" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
<div class="col-md-3 col-4 d-none d-md-block px-0">
<a href="#" class="uft-card uft-card--square uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=4" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
</div>
Banner Franja Large
<div class="row mx-0">
<div class="col-md-3 col-4 px-0">
<a href="#" class="uft-card uft-card--rect uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=1" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
<div class="col-md-3 col-4 px-0">
<a href="#" class="uft-card uft-card--rect uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=2" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
<div class="col-md-3 col-4 px-0">
<a href="#" class="uft-card uft-card--rect uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=3" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
<div class="col-md-3 col-4 d-none d-md-block px-0">
<a href="#" class="uft-card uft-card--rect uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=4" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</div>
</div>
Banner Franja Large / Banner Franja
<section class="uft-banner">
<a href="#" class="uft-card uft-card--rect uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=1" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
<a href="#" class="uft-card h-full uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=2" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
<a href="#" class="uft-card h-full uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=3" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
<a href="#" class="uft-card h-full uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=2" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
<a href="#" class="uft-card h-full uft-card--image uft-palette--primary">
<img src="https://dummyimage.com/480x16:9/?text=3" alt="Card UFT">
<div class="uft-card-body">
<h3 class="d-flex justify-content-between gap-2">
Admisión y Pregrado
<i class="uft-icon uft-icon--rounded">double_arrow</i>
</h3>
</div>
</a>
</section>