Images

Image File Location
New images need to be added to content/assets.

General Image Guidelines

  • For accessibility, all images must have alt tags. Alt tag can have text or if decorative, it can be empty.
  • Preferred image format is an .svg where possible.
  • If image cannot be a .svg, then a .png with a transparent background or a .jpg.
  • .png, .jpg and .gif must be sized appropriately for their use.
  • Width and height should be declared as a best practice. In the browser, width and height will hold the place for the image while the page paints and the image downloads so the page won't have content shifts.
  • You are allowed to set the max-width or max-height in the markup for images.

Dark Mode Image HTML Helper

  • Below is an example of how to implement images in your code.
  • This page is using the HTML Helper to output the final code you will see below when you expand the code examples.
  • Required fields: file path to light mode.
  • The helper will append "_dm" if not explictly stated.
  • Optional fields: classes, alt, width*, height*, style. *Best practice is to include height and width. See above.
  • If you don't need a dark mode version, use a standard img tag
Example 1 with automatically adding _dm to the dark mode image:
Example 2 with explicit dark mode image:

Logos

UWCU

UW Credit Union
View Code

UWCU Email

Dark mode is not in scope for email at this time.

UW Credit Union
View Code

Favicon, apple touch, metro tile, and more

Dark mode is not needed for these icons.

The favicon is referenced in a link tag inside the head tag. This icon can and is often located at the root of each repo.

UW Credit Union 
                
                    <link
                    rel="icon"
                    href="//static.uwcu.org/Content/assets/logos/UWCUlogos/favicon_u_uwcu.ico"
                    type="image/x-icon"
                    />
                
                

                
                    <link
                    rel="shortcut icon"
                    href="//static.uwcu.org/Content/assets/logos/UWCUlogos/favicon_u_uwcu.ico"
                    type="image/x-icon"
                    />

The apple touch icon is referenced in a link tag inside the head tag.

UW Credit Union 
                
                    <link
                    rel="apple-touch-icon"
                    href="//static.uwcu.org/content/assets/logos/uwcu/icon_u_uwcu_apple_touch.png"
                    />

The Metro Tile is referenced in a meta tag inside the head tag.

UW Credit Union 
                
                    <meta
                    name="msapplication-TileImage"
                    content=
                    "//static.uwcu.org/Content/assets/logos/uwcu/icon_u_uwcu_metro_tile.png"
                    />
                    

                    <meta
                    name="msapplication-TileColor"
                    content="#d50032"
                    />

These 6 icons are used when a user saves webbrach.uwcu.org to their home screen (not the app).

UW Credit Union UW Credit Union UW Credit Union UW Credit Union UW Credit Union UW Credit Union

This leaf only icon is used at the center of the CSS loading/processing spinner.

UW Credit Union

This icon used in templates for Platform Admin and the Change Log.

UW Credit Union
View Code

Watermark

UW Credit Union
View Code

Investment Services

UW Credit Union Wealth Management Services
View Code

VerifyU

VerifyU
View Code

External

Equal Housing Opportunity. Federally Insured by NCUA. Equal Housing Opportunity.
View Code
American Red Cross
View Code
UW Credit Union partnership with Zelle
View Code
Savvy Money Savvy Money
View Code
Like us on Facebook
View Code
Download on the App Store Get It On Google Play
View Code
Review our business on Google Google Logo
View Code
Apple Store Icon Google Play Store Icon
View Code

Mobile Wallet Buttons

|Added to Google Pay
View Code

Products

Credit Cards

Silver credit card image Black credit card image Motion W credit card image Motion W Signature credit card image Graphite Signature credit card image Gray Secure credit card image Red card image Red and Black credt card image card image
View Code

Debit Cards

Black Debit card image Bucky Debit card image Color Blocks Debit card image Madison Forward Debit card image Graphite card image Jump Around Debit card image Keith Haring Debit card image Madison College Debit card image Rainbow Debit card image Red Debit card image Silver Debit card image Terrace Chairs Debit card image Unity Debit card image UW Green Bay Debit card image UW LaCrosse Debit card image UW Milwaukee Debit card image UW Oshkosh Debit card image UW Whitewater Debit card image
View Code

Reward Central Promo Card Images

Transparent Backgrounds

Red and Black credt card image card image Red and Black credt card image card image Red and Black credt card image card image Red and Black credt card image card image
View Code

Mobile Wallet Card Images

UW Credit Union Mobile Wallet Debit Card UW Credit Union Mobile Wallet Credit Card
View Code

Checks

Member's Choice check Member's Choice check Member's Choice check Bucky Badger check Bucky Badger check Bucky Badger check Antique check Antique check Antique check
View Code

Illustrations, Icons & Graphics

App

alt="" can be left blank for icons like these because they are used in a link with link text so these can be considered decoration only.

View Code
App Setup Introduction App Setup Biometric App Setup Face ID App Setup Touch ID App Setup Pin App Setup Push Off App Setup Push On App Setup Push On
View Code

Benefits

Ticket wallet with cash in it credit score rating meter Early Payday cashback savings interest going up Fork and spoon Electric Bike No fees Money coming out of an ATM open present books
View Code

Branch & ATM

ATM location pin UW Credit Union branch location pin
View Code

Cards

ATM Card Ilustration Credit Card Ilustration Debit Card Ilustration ATM Card locked Ilustration Credit Card locked Ilustration Debit Card locked Ilustration New Credit Card Ilustration Processing Card Illustration Upgrade Card Illustration Card Security Cod
View Code

Credit Score

Credit Score Illustration
View Code

Demo

Demo Login
View Code

File Upload

Front of Drivers License
View Code

General Icons & Illustrations

All Devices Welcome Notifications Rewards Illustration
lock for email security phrase
lock icon
Calculator Illustration
Preapproval Illustration
Link Icon
Currently only used in the Rewards Admin.
No dark mode image needed at this time.
View Code

Lending

Enter Your Information Add Applicant Complete Application Complete Application Your Application is under review Add Cosigner Add your spouse's information Add Your Information
View Code

Mobile Deposit

Example Check Endorsement Example Check Endorsement Example of Check Front Example of Check Back
View Code

Onboarding

Get Our App & Start the Set Up Process On the Notifications Screen, Turn On Push Notifications Select Allow & Complete the Set Up Process Start Receiving Push Notifications Go to Manage Cards Choose Your Card, Then Temporarily Lock Card Select the Lock Button Your Card is Locked App Store Listing Graphic Spending Reports Graph
View Code

Preferred Name

A name tag that says: Hello my preferred first name is
View Code

VerifyU

Do not try to make the actual VerfiyU Key in Dark Mode. It will need to remain the light because it will be printed and Chrome has a known bug with images and printing. Also, putting this here as a reminder that this needs to be tested as the text color might be white on top of white for dark mode and a color exception will need to be made for the text.

VerifyU Key Illustration
This is used as background image. VerifyU key Background image.
Use your VerifyU Key to decode a series of numbers displayed on screen. VerifyU Authenticator App Illustration
View Code

Photos

Board of Directors

Coming in 2023

Unsorted Images