Backgrounds

<!-- Add background to row -->
<h3>Add background to row</h3>
<div class="ucla campus has-background-ucla-blue has-white-text">
    <div class="col span_1_of_2">
        <h2>Column 1 Content Title</h2>
        <p>The utility class ʻ.has-background-ucla-blueʼ has been added so only the row has a modified background color. A second utility class `.has-white-text` has been added to turn the text white.</p>
    </div>
    <div class="col span_1_of_2">
        <h2>Column 2 Content Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
</div>

<!-- Add background to column -->
<h3 class="mt-24">Add background to column</h3>
<div class="ucla campus">
    <div class="col span_1_of_2 has-background-ucla-blue has-white-text">
        <h2>Column 1 Content Title</h2>
        <p>The utility class ʻ.has-background-ucla-blueʼ has been added so only the first column has a modified background color. A second utility class `.has-white-text` has been added to turn the text white.</p>
    </div>
    <div class="col span_1_of_2">
        <h2>Column 2 Content Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
</div>

<!-- Add background to single element -->
<h3 class="mt-24">Add background to single element</h3>
<div class="ucla campus">
    <div class="col span_1_of_2">
        <h2>Column 1 Content Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div class="col span_1_of_2">
        <h2 class="has-background-ucla-blue has-white-text">Column 2 Content Title</h2>
        <p>The utility class ʻ.has-background-ucla-blueʼ has been added so only the title in the second column has a modified background color. A second utility class `.has-white-text` has been added to turn the text white.</p>
    </div>
</div>

<h3 class="mt-24">Color Variants</h3>

<div class="py-12 has-background-grey-03">
    <h2 class="mb-0">3% Grey</h2>
</div>
<div class="py-12 has-background-grey-05">
    <h2 class="mb-0">5% Grey</h2>
</div>
<div class="py-12 has-background-light-grey-08">
    <h2 class="mb-0">8% Grey</h2>
</div>
<div class="py-12 has-background-grey-20">
    <h2 class="mb-0">20% Grey</h2>
</div>
<div class="py-12 has-background-light-grey">
    <h2 class="mb-0">Light Grey</h2>
</div>
<div class="py-12 has-background-ucla-blue has-white-text">
    <h2 class="mb-0">UCLA Blue</h2>
</div>
<div class="py-12 has-background-darker-blue has-white-text">
    <h2 class="mb-0">Darker Blue</h2>
</div>
<div class="py-12 has-background-darkest-blue has-white-text">
    <h2 class="mb-0">Darkest Blue</h2>
</div>