Gradient Modifiers

Ready

HTML
View
Notes


        
        
            <!-- Default -->
<h2 class="label">CSU blue</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-blue-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-blue-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-blue-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-blue-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-blue-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-blue-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-blue-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-blue-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-blue-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-blue-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-blue-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Green -->
<h2 class="label">CSU green</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-green-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-green-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-green-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-green-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-green-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-green-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-green-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-green-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-green-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-green-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-green-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Grey -->
<h2 class="label">CSU grey</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-grey-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-grey-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-grey-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-grey-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-grey-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-grey-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-grey-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-grey-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-grey-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-grey-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-grey-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Ochre -->
<h2 class="label">CSU ochre</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-ochre-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-ochre-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-ochre-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-ochre-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-ochre-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-ochre-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-ochre-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-ochre-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-ochre-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-ochre-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-ochre-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Orange -->
<h2 class="label">CSU orange</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-orange-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-orange-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-orange-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-orange-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-orange-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-orange-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-orange-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-orange-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-orange-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-orange-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-orange-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Purple -->
<h2 class="label">CSU purple</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-purple-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-purple-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-purple-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-purple-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-purple-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-purple-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-purple-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-purple-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-purple-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-purple-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-purple-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Red -->
<h2 class="label">CSU red</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-red-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-red-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-red-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-red-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-grad-red-blue _3up">
        <p class="smaller-text">To Blue</p>
    </div>
    <div class="csu-grad-red-green _3up">
        <p class="smaller-text">To Green</p>
    </div>
    <div class="csu-grad-red-grey _3up">
        <p class="smaller-text">To Grey</p>
    </div>
    <div class="csu-grad-red-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-grad-red-purple _3up">
        <p class="smaller-text">To Purple</p>
    </div>
    <div class="csu-grad-red-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-grad-red-ochre _3up">
        <p class="smaller-text">To Ochre</p>
    </div>
</div>


        
            <!-- Brand -->
<h2 class="label">CSU Brand black</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-brand-black-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-brand-black-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-brand-black-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-brand-black-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-brand-grad-black-black _3up">
        <p class="smaller-text">To Black</p>
    </div>
    <div class="csu-brand-grad-black-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-brand-grad-black-brown _3up">
        <p class="smaller-text">To Brown</p>
    </div>
    <div class="csu-brand-grad-black-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-brand-grad-black-light _3up">
        <p class="smaller-text">To Light</p>
    </div>
</div>


        
            <!-- Brand -->
<h2 class="label">CSU Brand red</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-brand-red-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-brand-red-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-brand-red-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-brand-red-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-brand-grad-red-black _3up">
        <p class="smaller-text">To Black</p>
    </div>
    <div class="csu-brand-grad-red-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-brand-grad-red-brown _3up">
        <p class="smaller-text">To Brown</p>
    </div>
    <div class="csu-brand-grad-red-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-brand-grad-red-light _3up">
        <p class="smaller-text">To Light</p>
    </div>
</div>


        
            <!-- Brand -->
<h2 class="label">CSU Brand brown</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-brand-brown-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-brand-brown-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-brand-brown-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-brand-brown-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-brand-grad-brown-black _3up">
        <p class="smaller-text">To Black</p>
    </div>
    <div class="csu-brand-grad-brown-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-brand-grad-brown-brown _3up">
        <p class="smaller-text">To Brown</p>
    </div>
    <div class="csu-brand-grad-brown-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-brand-grad-brown-light _3up">
        <p class="smaller-text">To Light</p>
    </div>
</div>


        
            <!-- Brand -->
<h2 class="label">CSU Brand orange</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-brand-orange-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-brand-orange-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-brand-orange-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-brand-orange-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-brand-grad-orange-black _3up">
        <p class="smaller-text">To Black</p>
    </div>
    <div class="csu-brand-grad-orange-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-brand-grad-orange-brown _3up">
        <p class="smaller-text">To Brown</p>
    </div>
    <div class="csu-brand-grad-orange-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-brand-grad-orange-light _3up">
        <p class="smaller-text">To Light</p>
    </div>
</div>


        
            <!-- Brand -->
<h2 class="label">CSU Brand light</h2>

<div class="flex-row tiles flex-tile-grout height-100">

    <div class="csu-brand-light-gradient-top _3up">
        <p class="smaller-text">To Top</p>
    </div>
    <div class="csu-brand-light-gradient-bottom _3up">
        <p class="smaller-text">To Bottom</p>
    </div>
    <div class="csu-brand-light-gradient-left _3up">
        <p class="smaller-text">To Left</p>
    </div>
    <div class="csu-brand-light-gradient-right _3up">
        <p class="smaller-text">To Right</p>
    </div>

    <div class="csu-brand-grad-light-black _3up">
        <p class="smaller-text">To Black</p>
    </div>
    <div class="csu-brand-grad-light-red _3up">
        <p class="smaller-text">To Red</p>
    </div>
    <div class="csu-brand-grad-light-brown _3up">
        <p class="smaller-text">To Brown</p>
    </div>
    <div class="csu-brand-grad-light-orange _3up ">
        <p class="smaller-text">To Orange</p>
    </div>
    <div class="csu-brand-grad-light-light _3up">
        <p class="smaller-text">To Light</p>
    </div>
</div>


        <!-- Default -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Green -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Grey -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Ochre -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Orange -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Purple -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Red -->
<h2 class="label">CSU {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-grad-{{ modifier }}-blue _3up"><p class="smaller-text">To Blue</p></div>
  <div class="csu-grad-{{ modifier }}-green _3up"><p class="smaller-text">To Green</p></div>
  <div class="csu-grad-{{ modifier }}-grey _3up"><p class="smaller-text">To Grey</p></div>
  <div class="csu-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-grad-{{ modifier }}-purple _3up"><p class="smaller-text">To Purple</p></div>
  <div class="csu-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-grad-{{ modifier }}-ochre _3up"><p class="smaller-text">To Ochre</p></div>
</div>

<!-- Brand -->
<h2 class="label">CSU Brand {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-brand-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-brand-grad-{{ modifier }}-black _3up"><p class="smaller-text">To Black</p></div>
  <div class="csu-brand-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-brand-grad-{{ modifier }}-brown _3up"><p class="smaller-text">To Brown</p></div>
  <div class="csu-brand-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-brand-grad-{{ modifier }}-light _3up"><p class="smaller-text">To Light</p></div>
</div>

<!-- Brand -->
<h2 class="label">CSU Brand {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-brand-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-brand-grad-{{ modifier }}-black _3up"><p class="smaller-text">To Black</p></div>
  <div class="csu-brand-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-brand-grad-{{ modifier }}-brown _3up"><p class="smaller-text">To Brown</p></div>
  <div class="csu-brand-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-brand-grad-{{ modifier }}-light _3up"><p class="smaller-text">To Light</p></div>
</div>

<!-- Brand -->
<h2 class="label">CSU Brand {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-brand-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-brand-grad-{{ modifier }}-black _3up"><p class="smaller-text">To Black</p></div>
  <div class="csu-brand-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-brand-grad-{{ modifier }}-brown _3up"><p class="smaller-text">To Brown</p></div>
  <div class="csu-brand-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-brand-grad-{{ modifier }}-light _3up"><p class="smaller-text">To Light</p></div>
</div>

<!-- Brand -->
<h2 class="label">CSU Brand {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-brand-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-brand-grad-{{ modifier }}-black _3up"><p class="smaller-text">To Black</p></div>
  <div class="csu-brand-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-brand-grad-{{ modifier }}-brown _3up"><p class="smaller-text">To Brown</p></div>
  <div class="csu-brand-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-brand-grad-{{ modifier }}-light _3up"><p class="smaller-text">To Light</p></div>
</div>

<!-- Brand -->
<h2 class="label">CSU Brand {{ modifier}}</h2>

<div class="flex-row tiles flex-tile-grout height-100">

  <div class="csu-brand-{{ modifier }}-gradient-top _3up"><p class="smaller-text">To Top</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-bottom _3up"><p class="smaller-text">To Bottom</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-left _3up"><p class="smaller-text">To Left</p></div>
  <div class="csu-brand-{{ modifier }}-gradient-right _3up"><p class="smaller-text">To Right</p></div>

  <div class="csu-brand-grad-{{ modifier }}-black _3up"><p class="smaller-text">To Black</p></div>
  <div class="csu-brand-grad-{{ modifier }}-red _3up"><p class="smaller-text">To Red</p></div>
  <div class="csu-brand-grad-{{ modifier }}-brown _3up"><p class="smaller-text">To Brown</p></div>
  <div class="csu-brand-grad-{{ modifier }}-orange _3up "><p class="smaller-text">To Orange</p></div>
  <div class="csu-brand-grad-{{ modifier }}-light _3up"><p class="smaller-text">To Light</p></div>
</div>

Gradients are still a work in progress but will be included in the next theme update. There are two gradient types - colour to dark + direction uses the csu-COLOURNAME-gradient-DIRECTION convention. The other uses a csu-grad-COLOURNAME-COLOURNAME where the COLOURNAME can be set to any colour from the Material Pallette.

Gradient Modifiers

Landing Pages

Profiles