Back To Top Skip to Content

Colors

These are the colors used throughout the site. Each has been assigned to a variable in the "framework/variables.scss" file.

Brand

Secondary

Grays


Typography

These are our basic typographic styles. Make updates in the "framework/typography.scss" file.

Headings Bold


Heading One

Myriad Pro Bold

Heading Two

Myriad Pro Bold

Heading Three

Myriad Pro Bold

Heading four

Myriad Pro Bold

Heading Five
Myriad Pro Bold

Heading Six
Myriad Pro Bold

Headings Regular


Heading One

Myriad Regular

Heading Two

Myriad Regular

Heading Three

Myriad Regular

Heading four

Myriad Regular

Heading Five
Myriad Regular

Heading Six
Myriad Regular

Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Default Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu. John Doe

Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula est, aliquam eu blandit ac, dictum nec erat.
  • Nulla quis sapien non lacus rutrum mollis suscipit scelerisque velit. In hac habitasse platea dictumst.
  • Duis in justo tincidunt, luctus ligula sed, placerat diam. Morbi eget tellus ipsum. Fusce iaculis maximus sem eget tincidunt.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula est, aliquam eu blandit ac, dictum nec erat.
  2. Nulla quis sapien non lacus rutrum mollis suscipit scelerisque velit. In hac habitasse platea dictumst.
  3. Duis in justo tincidunt, luctus ligula sed, placerat diam. Morbi eget tellus ipsum. Fusce iaculis maximus sem eget tincidunt.

Buttons

These are our basic button styles. Make updates in the "framework/buttons.scss" file.

Default

.btn

.btn.btn--secondary

.btn.btn--gray

.btn.btn--link


Arrows

Btn with Arrow

Read More

Go Back


Sizes

.btn.btn--xs

.btn.btn--sm

.btn.btn--lg

.btn.btn--xl

.btn.btn--block


Forms

These are our basic form styles. Make updates in the "framework/forms.scss" file.

Please enter your full name.
http://

Panels

These are our basic panel styles. Make updates in the "site/panel.scss" file.

Title goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Title goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Title goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Title goes here

Lorem ipsum dolor sit amet, consetetur

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Online Banking

Accordions

These are our accordion styles. Make updates in the "framework/accordions.scss" file.

This is an accordion header.

Adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat culpa. Pariatur ullamco aute sunt esse adipisicing. Excepteur eu non eiusmod occaecat commodo commodo et ad ipsum elit. Pariatur sit adipisicing sunt excepteur enim nostrud pariatur incididunt.

This is an accordion header.

Adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat culpa. Pariatur ullamco aute sunt esse adipisicing. Excepteur eu non eiusmod occaecat commodo commodo et ad ipsum elit. Pariatur sit adipisicing sunt excepteur enim nostrud pariatur incididunt.

This is an accordion header.

Adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat culpa. Pariatur ullamco aute sunt esse adipisicing. Excepteur eu non eiusmod occaecat commodo commodo et ad ipsum elit. Pariatur sit adipisicing sunt excepteur enim nostrud pariatur incididunt.

Tabs

These are our tab styles. Make updates in the "framework/tabs.scss" file.

Lorem ipsum dolor sit amet, consetetur

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Online Banking
Do do adipisicing adipisicing ut fugiat culpa consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. Pariatur incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea. Laboris nisi adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur. Fugiat cupidatat commodo magna et aliqua elit sint cupidatat dolor sint aute ullamco.
Aliqua proident occaecat do do. Adipisicing ut fugiat culpa consequat. Ullamco aute sunt esse adipisicing irure excepteur eu non eiusmod occaecat commodo commodo. Ad ipsum elit esse pariatur sit adipisicing sunt excepteur. Nostrud pariatur incididunt duis commodo mollit esse veniam.

Cards/Article Tiles

These are our Card styles. Make updates in the "framework/cards.scss" file.

Default

Title Goes Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Title Goes Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Title Goes Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Center

Title Goes Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Title Goes Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Title Goes Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Blog


Summary Sections

These are our summary section styles. Make updates in the "site/summary-section.scss" file.

Community & Sponsorship

At Velocity, we view our community relations not as extracurricular, but as a commitment. We believe in the credit union philosophy of “people helping people,” and one of our values is social responsibility. We were born and raised right here in Austin, and folks here have trusted us for over 70 years. We are proud to contribute to our community by actively participating as a member of the Austin family.

See All Community Events

Civic Pride

We proudly support organizations that help improve the lives of our members through financial education, safety and wellness. We participate in city-sponsored events with community partners including the Austin Police Department and Austin and Cedar Park Chamber of Commerce, as well as many non-profit organizations whose goal is to help our members, children, pets and veterans. Additionally, we help support local businesses through the Austin Independent Business Alliance (AIBA).

The Arts

We are a proud supporter of the Austin Theatre Alliance, and a long-time corporate sponsor of the historic Paramount theatre.

Community & Sponsorship

Every year, our Board of Directors awards three graduating seniors a $5,000 scholarship to the college or university of their choice. An ongoing scholarship of $2,000 is available to winners in previous years. This is the 26rd year for our scholarship program, and to date we have awarded almost $190,000 in scholarships. Applications for the current years will be available online and at any Velocity branch by mid-January.

Learn More

Videos

These are our video modal styles. Make updates in the "site/video-modal.scss" file.

Optional Text Lorem ipsum dolor sit amet consetetur.

Optional Text lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Optional Text Lorem ipsum dolor sit amet consetetur.

Optional Text lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Optional Text Lorem ipsum dolor sit amet consetetur.

Optional Text lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Media List

These are our media list styles. Make updates in the "site/medai-list.scss" file.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Notices

These are our basic notice styles. Make updates in the "framework/notices.scss" file.

Success Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Info Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Warning Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Error Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.


Tables

These are our table styles. Make updates in the "framework/tables.scss" file.

Col 1 Col 2 Col 3 Col 4
Row 1 / Col 1 Row 1 / Col 2 Row 1 / Col 3 Row 1 / Col 4
Row 2 / Col 1 Row 2 / Col 2 Row 2 / Col 3 Row 2 / Col 4
Row 3 / Col 1 Row 3 / Col 2 Row 3 / Col 3 Row 3 / Col 4
Row 4 / Col 1 Row 4 / Col 2 Row 4 / Col 3 Row 4 / Col 4
Col 1 Col 2 Col 3 Col 4


Modals

These are our modal styles. Make updates in the "framework/modals.scss" file.


Tooltips

These are our tooltip styles. Make updates in the "framework/tooltips.scss" file.



Responsive Embeds

We offer a utility style for responsive embeds. For this and other utility classes, checkout out the "framework/utilities.scss" file.


Pagination

These are our pagination styles. Make updates in the "framework/pagination.scss" file.


Icons

We use Font Awesome as our default icon font. For more icons and documentation, visit http://fortawesome.github.io/Font-Awesome/

Or, to generate your own icon set, you may use the IcoMoon App.


Loading Elements

These are our built-in options to add loaders to a section or page. Make updates in the "loading.scss" file.


Social Sharing

We have some built-in functions that make use of data attributes to make sharing on common social networks easier. You can find out more by viewing the "lib/wl-share.js" file.


Favicons

These are our website favicons and app icons.


iPad 3 Retina (144x144)


iPhone 4 Retina (114x114)


iPad (72x72)


iPhone Apple Touch (57x57)


Favicon Retina (32x32)


Favicon (16x16)