College Design Language System

Background Patterns

Background Patterns

See corresponding color notes at /components/detail/color

<div class="p-3">
    <h4 class="py-2" style="border-bottom:solid 4px #F15A22;font-weight:700;">Background (Standardized, new naming)</h3>
</div>
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 m-2">
    <div class="col p-4">
        <div class="bg-color border blue-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Blue Background
            <strong>CSS Class:</strong> .blue-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border blue-b-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Blue #2 Background
            <strong>CSS Class:</strong> .blue-b-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border blue-c-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Blue #3 Background
            <strong>CSS Class:</strong> .blue-c-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border white-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> White Background
            <strong>CSS Class:</strong> .white-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border white-b-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> White B Background
            <strong>CSS Class:</strong> .white-b-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border orange-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Orange Background
            <strong>CSS Class:</strong> .orange-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border orange-a11y-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Orange (Accessible) Background
            <strong>CSS Class:</strong> .orange-a11y-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border grey-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Grey #01 Background
            <strong>CSS Class:</strong> .grey-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border grey-b-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Grey #02 Background
            <strong>CSS Class:</strong> .grey-b-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border grey-c-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Grey #03 Background
            <strong>CSS Class:</strong> .grey-c-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border grey-d-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Grey #04 Background
            <strong>CSS Class:</strong> .grey-d-bg</pre>
        </div>
    </div>
    <div class="col p-4">
        <div class="bg-color border grey-e-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Grey #05 Background
            <strong>CSS Class:</strong> .grey-e-bg</pre>
        </div>
    </div>
</div>

<div class="p-3">
    <h4 class="py-2" style="border-bottom:solid 4px #F15A22;font-weight:700;">Background Patterns</h4>
</div>
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 m-2">
    <div class="col-4 p-4">
        <div class="bg-color border blue-bg stripe-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> UTSA Blue with Striped Pattern Background
            <strong>CSS Class:</strong> .blue-bg .stripe-bg</pre>
        </div>
    </div>
    <div class="col-4 p-4">
        <div class="bg-color border orange-a11y-bg stripe-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> UTSA Orange (Accessible) with Striped Background
            <strong>CSS Class:</strong> .orange-a11y-bg .stripe-bg</pre>
        </div>
    </div>
    <div class="col-4 p-4">
        <div class="bg-color border blue-b-bg stripe-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Blue #2 with Striped Pattern Background
            <strong>CSS Class:</strong> .blue-b-bg.stripe-bg</pre>
        </div>
    </div>
    <div class="col-4 p-4">
        <div class="bg-color border blue-c-bg stripe-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Blue #3 with Striped Pattern Background
            <strong>CSS Class:</strong> .blue-c-bg.stripe-bg</pre>
        </div>
    </div>
    <div class="col-4 p-4">
        <div class="bg-color border grey-b-bg stripe-bg" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> Grey #2 with Striped Pattern Background
            <strong>CSS Class:</strong> .grey-b-bg.stripe-bg</pre>
        </div>
    </div>
</div>
  • Content: 
    /* components/01-visual-styling/01-branding-standards/02-pattern/pattern.scss */
/* BEGIN pattern.scss */
//Legacy Vendor Supplied Definitions
// .bg-stripe {
	// background: -o-repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 7px, rgba(255, 255, 255, 0.1) 7px);
	// background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 7px, rgba(255, 255, 255, 0.1) 7px);
// }

// .bg-orange.bg-stripe {
// 	background-color:$orange;
// }

// .darkblue-bg.bg-stripe {
// 	background-color: $blue;
// }

// .navy-bg.bg-stripe {
// 	background-color: $blue;
// }

// .muted-blue-bg {
// 	background-color: $blue-b;
// }

// .navy-bg-stripe.bg-stripe {
// 	background-color: $blue;
// }

// .muted-blue-stripe-bg.bg-stripe {
// 	background-color: $blue-c;
// }

// .bg-cool-grey {
// 	background-color: $grey;
// }

// .bg-cool-grey-stripe {
// 	background-color: $grey-b;
// }
//New Definitions (Standardized naming)
$transpa: rgba(0, 0, 0, 0);
$transpb: rgba(255, 255, 255, 0.05);
$transpb: rgba(0, 0, 0, 0.1);

.stripe-bg {
	background: -o-repeating-linear-gradient( 45deg, $transpa, $transpa 2px, $transpb 4px, $transpa 7px);
	background: repeating-linear-gradient( 45deg, $transpa, $transpa 2px, $transpb 4px, $transpa 7px);
}

.blue-bg {
	background-color: $blue;
}
.blue-b-bg {
	background-color: $blue-b;
}

.blue-c-bg {
	background-color: $blue-c;
}

.grey-bg {
	background-color: $grey;
}

.orange-bg {
	background-color: $orange;
}
.white-bg {
	background-color: $white;
}
.orange-a11y-bg {
	background-color: $orange-a11y;
}

.grey-b-bg {
	background-color: $grey-b;
}
.grey-c-bg {
	background-color: $grey-c;
}
.grey-d-bg {
	background-color: $grey-d;
}
.grey-e-bg {
	background-color: $grey-e;
}
.grey-e {
	color: $grey-e;
}

/* END pattern.scss */
  • URL: /components/raw/background-patterns/pattern.scss
  • Filesystem Path: components/01-visual-styling/04-color/02-pattern/pattern.scss
  • Size: 1.9 KB 
{{!-- <h3>Legacy Background (Vendor Supplied)</h3>
<div class="row">
    {{#each background-legacy }}
    <div class="col-4 p-0 border">
        <div class="bg-color {{ class }}">
            <div></div>
            <pre>{{ name }}
            <span>{{ className }}</span></pre>
        </div>
    </div>
    {{/each}}
</div>

<div class="row">&nbsp;</div> --}}

{{!-- <h3>Legacy Background Patterns (Vendor Supplied)</h3>
<div class="row">
    {{#each pattern-legacy }}
    <div class="col-4 p-0 border">
        <div class="bg-color {{ class }}">
            <div></div>
            <pre>{{ name }}
            <span>{{ className }}</span></pre>
        </div>
    </div>
    {{/each}}
</div>

<div class="row">&nbsp;</div> --}}

<div class="p-3"><h4 class="py-2" style="border-bottom:solid 4px #F15A22;font-weight:700;">Background (Standardized, new naming)</h3></div>
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 m-2">
    {{#each background }}
    <div class="col p-4">
        <div class="bg-color border {{ class }}" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> {{ name }}
            <strong>CSS Class:</strong> {{ className }}</pre>
        </div>
    </div>
    {{/each}}
</div>

<div class="p-3"><h4 class="py-2" style="border-bottom:solid 4px #F15A22;font-weight:700;">Background Patterns</h4></div>
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 row-cols-xxl-5 m-2">
    {{#each pattern }}
    <div class="col-4 p-4">
        <div class="bg-color border {{ class }}" style="height:150px;"></div>
        <div class="p-3 border">
            <pre><strong>Name:</strong> {{ name }}
            <strong>CSS Class:</strong> {{ className }}</pre>
        </div>
    </div>
    {{/each}}
</div>