ASI Documentation Custom Pages
Find a Store 02150
Chat
Find a Store 02150Chat

ASI Stylesheet Reference

https://content.valuecityfurniture.com/assets/css/asi-main-styles.min.css

HEADING STYLES

ASI HEADING 1

ASI HEADING 2

ASI HEADING 3

ASI HEADING 4

ASI HEADING 1 with h3 style

ASI HEADING 3 with h1 style

DEFAULT HEADING STYLES

ASI HEADING 1

ASI HEADING 2

ASI HEADING 3

ASI HEADING 4

TEXT STYLES

paragraph lead text .asi-lead class

uppercase text .text-uppercase

lowercase text .text-lowercase

text align left .text-left class

text align center .text-center class

text align right .text-right class

COLOR STYLES

.asi-red

.asi-brand-red

.asi-brand-red-2

.asi-brand-red-2

.asi-darker

.asi-dark

.asi-lt-gray

.asi-md-gray

.asi-gray-4

.asi-latte

.asi-tan

.asi-dark-blue

.asi-blue

.asi-new-blue

.asi-teal

.asi-green

.asi-orange

.asi-tangerine

brand color palette

  • .asi-red-bg | HEX: #DB131A

  • .asi-white-bg | HEX: #FFFFFF

  • .asi-darker-bg | HEX: #181818

  • .asi-md-gray-bg | HEX: #525050

  • .asi-gray-4-bg | HEX: #414141

  • .asi-lt-gray-bg | HEX: #F0F0F0

accent color palette

  • HEX: #EFEFEA | .asi-tan-bg

  • HEX: #9b9688 | .asi-latte-bg

  • HEX: #3DA0EB | .asi-blue-bg

  • HEX: #5892A0 | .asi-new-blue-bg

  • HEX: #35537C | .asi-dark-blue-bg

  • HEX: #4D9B93 | .asi-teal-bg

  • HEX: #79BD10 | .asi-green-bg

  • HEX: #FF8500 | .asi-orange-bg

  • HEX: #FF6F07 | .asi-tangerine-bg

  • HEX: #231F20 | .asi-dark-bg

BUTTON STYLES

Button Colors and Utility Classes
Anchor tags wrap a button element for buttons that link to external pages. For buttons that are used with JS or to run some type of functionality, in most cases you should use just the button element without the anchor tags.

Use the utility classes from above for the button background and/or font color. 

						
							<div class="asi-content-button">
							    <a href="/financing">
							        <button class="asi-mix-button asi-red-bg" type="button">BUTTON</button>
							    </a>
							<div>
						
					
						
							<a href="/financing">
							    <button class="asi-mix-button asi-red-bg" type="button">BUTTON</button>
							</a>