UCLA Web Components

Grid: Default 

<div class="ucla campus example">
    <div class="col span_12_of_12">
        1 of 1
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_2">
        1 of 2
    </div>
    <div class="col span_1_of_2">
        2 of 2
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_3">
        1 of 3
    </div>
    <div class="col span_1_of_3">
        2 of 3
    </div>
    <div class="col span_1_of_3">
        3 of 3
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_4">
        1 of 4
    </div>
    <div class="col span_1_of_4">
        2 of 4
    </div>
    <div class="col span_1_of_4">
        3 of 4
    </div>
    <div class="col span_1_of_4">
        4 of 4
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_5">
        1 of 5
    </div>
    <div class="col span_1_of_5">
        2 of 5
    </div>
    <div class="col span_1_of_5">
        3 of 5
    </div>
    <div class="col span_1_of_5">
        4 of 5
    </div>
    <div class="col span_1_of_5">
        5 of 5
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_6">
        1 of 6
    </div>
    <div class="col span_1_of_6">
        2 of 6
    </div>
    <div class="col span_1_of_6">
        3 of 6
    </div>
    <div class="col span_1_of_6">
        4 of 6
    </div>
    <div class="col span_1_of_6">
        5 of 6
    </div>
    <div class="col span_1_of_6">
        6 of 6
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_7">
        1 of 7
    </div>
    <div class="col span_1_of_7">
        2 of 7
    </div>
    <div class="col span_1_of_7">
        3 of 7
    </div>
    <div class="col span_1_of_7">
        4 of 7
    </div>
    <div class="col span_1_of_7">
        5 of 7
    </div>
    <div class="col span_1_of_7">
        6 of 7
    </div>
    <div class="col span_1_of_7">
        7 of 7
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_8">
        1 of 8
    </div>
    <div class="col span_1_of_8">
        2 of 8
    </div>
    <div class="col span_1_of_8">
        3 of 8
    </div>
    <div class="col span_1_of_8">
        4 of 8
    </div>
    <div class="col span_1_of_8">
        5 of 8
    </div>
    <div class="col span_1_of_8">
        6 of 8
    </div>
    <div class="col span_1_of_8">
        7 of 8
    </div>
    <div class="col span_1_of_8">
        8 of 8
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_9">
        1 of 9
    </div>
    <div class="col span_1_of_9">
        2 of 9
    </div>
    <div class="col span_1_of_9">
        3 of 9
    </div>
    <div class="col span_1_of_9">
        4 of 9
    </div>
    <div class="col span_1_of_9">
        5 of 9
    </div>
    <div class="col span_1_of_9">
        6 of 9
    </div>
    <div class="col span_1_of_9">
        7 of 9
    </div>
    <div class="col span_1_of_9">
        8 of 9
    </div>
    <div class="col span_1_of_9">
        9 of 9
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_10">
        1 of 10
    </div>
    <div class="col span_1_of_10">
        2 of 10
    </div>
    <div class="col span_1_of_10">
        3 of 10
    </div>
    <div class="col span_1_of_10">
        4 of 10
    </div>
    <div class="col span_1_of_10">
        5 of 10
    </div>
    <div class="col span_1_of_10">
        6 of 10
    </div>
    <div class="col span_1_of_10">
        7 of 10
    </div>
    <div class="col span_1_of_10">
        8 of 10
    </div>
    <div class="col span_1_of_10">
        9 of 10
    </div>
    <div class="col span_1_of_10">
        10 of 10
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_11">
        1 of 11
    </div>
    <div class="col span_1_of_11">
        2 of 11
    </div>
    <div class="col span_1_of_11">
        3 of 11
    </div>
    <div class="col span_1_of_11">
        4 of 11
    </div>
    <div class="col span_1_of_11">
        5 of 11
    </div>
    <div class="col span_1_of_11">
        6 of 11
    </div>
    <div class="col span_1_of_11">
        7 of 11
    </div>
    <div class="col span_1_of_11">
        8 of 11
    </div>
    <div class="col span_1_of_11">
        9 of 11
    </div>
    <div class="col span_1_of_11">
        10 of 11
    </div>
    <div class="col span_1_of_11">
        11 of 11
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_1_of_12">
        1 of 12
    </div>
    <div class="col span_1_of_12">
        2 of 12
    </div>
    <div class="col span_1_of_12">
        3 of 12
    </div>
    <div class="col span_1_of_12">
        4 of 12
    </div>
    <div class="col span_1_of_12">
        5 of 12
    </div>
    <div class="col span_1_of_12">
        6 of 12
    </div>
    <div class="col span_1_of_12">
        7 of 12
    </div>
    <div class="col span_1_of_12">
        8 of 12
    </div>
    <div class="col span_1_of_12">
        9 of 12
    </div>
    <div class="col span_1_of_12">
        10 of 12
    </div>
    <div class="col span_1_of_12">
        11 of 12
    </div>
    <div class="col span_1_of_12">
        12 of 12
    </div>
</div>

<div class="ucla campus example">
    <div class="col span_6_of_12">
        This is column 1, that spans 6 columns of 12.
    </div>
    <div class="col span_3_of_12">
        This is column 2, that spans 3 columns of 12.
    </div>
    <div class="col span_3_of_12">
        This is column 3, that spans 3 columns of 12.
    </div>
</div>

<div class="ucla campus example">

    <div class="col span_9_of_12">

        <div class="ucla campus">
            <div class="col span_12_of_12">
                Body Content 12 of 12
            </div>
        </div>

        <div class="ucla campus">
            <div class="col span_6_of_12">
                Body Content 6 of 6
            </div>
            <div class="col span_6_of_12">
                Body Content 6 of 6
            </div>
        </div>

    </div>

    <div class="col span_3_of_12">
        Menu content
    </div>

</div>
 
<div class="ucla campus example">
  <div class="col span_12_of_12">
    1 of 1
  </div>
</div>

{{ render '@grid--two' }}
{{ render '@grid--three' }}
{{ render '@grid--four' }}
{{ render '@grid--five' }}
{{ render '@grid--six' }}
{{ render '@grid--seven' }}
{{ render '@grid--eight' }}
{{ render '@grid--nine' }}
{{ render '@grid--ten' }}
{{ render '@grid--eleven' }}
{{ render '@grid--twelve' }}
{{ render '@grid--column-span' }}
{{ render '@grid--nested-columns' }}
 
/* No context defined. */

No notes defined.