<h1 class="pb-24">Basic Tile Variants</h1>
<h2 class="pb-12">Left-Aligned</h2>
<h3 class="pb-12">One Column</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-1">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h3 class="pt-24 pb-12">Two Columns</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-2">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--royce" aria-label="Royce Hall">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h3 class="pt-24 pb-12">Three Columns</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-3">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--royce" aria-label="Royce Hall">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--students" aria-label="Students smiling on campus">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h3 class="pt-24 pb-12">Four Columns</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-4">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--royce" aria-label="Royce Hall">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--students" aria-label="Students smiling on campus">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--events" aria-label="A student ringing the Victory Bell">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h2 class="pt-64 pb-12">Center-Aligned</h2>
<h3 class="pb-12">One Column - Centered</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-1 tile__section--centered">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h3 class="pt-24 pb-12">Two Columns - Centered</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-2 tile__section--centered">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--royce" aria-label="Royce Hall">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h3 class="pt-24 pb-12">Three Columns - Centered</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-3 tile__section--centered">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--royce" aria-label="Royce Hall">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--students" aria-label="Students smiling on campus">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>
<h3 class="pt-24 pb-12">Four Columns - Centered</h3>
<div class="ucla campus">
<section class="tile__section tile__section--col-4 tile__section--centered">
<span class="tile tile__background">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--royce" aria-label="Royce Hall">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--students" aria-label="Students smiling on campus">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
<span class="tile tile__background tile__background--events" aria-label="A student ringing the Victory Bell">
<a class="tile__link" href="#">
<h3 class="tile__title">Lorem ipsum dolor sit amet</h3>
</a>
</span>
</section>
</div>