UW Credit Union's Marketing-approved font for the Web is Arial. Our font stack is font-family: Arial, Helvetica, sans-serif. Our base font size is 16px for XS, SM and 14px for MD+.
Font Sizes
UW Credit Union sets font sizes for headings <h1> through <h6>. We also offer the ability to override the default font size on any element using the font size utility classes.
Note: Font sizes classes should be applied to block elements only, such as <p> or <div>. Applying these classes to inline elements, such as <span>, will result in incorrect line height.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
View Code Hide Code
Element
Class
.txt-jumbo
<h1>
.txt-xxxlarge
<h2>
.txt-xxlarge
<h3>
.txt-xlarge
<h4>
.txt-large
<h5> <h6>
.txt-default-size
.txt-med
<small>
.txt-small
.txt-small
Using .txt-caps with this class improves readability.
.txt-xsmall
.txt-xsmall
This class is for special cases only. It's small size affects readability. Using .txt-caps with this class improves readability.
.txt-xxsmall
.txt-xxsmall
This class is for special cases only. It's small size affects readability. Using .txt-caps with this class improves readability.
Font Styling
You can override the deafult font styling on any element using the font style utility classes.
Bold text.
Normal font weight on what would otherwise be bold text.
Italic text.
Capital Text.
A paragraph with default line spacing. Cupcake ipsum dolor sit amet cake sweet liquorice marzipan. Donut pie apple pie topping sweet. Lemon drops marshmallow pie halvah marshmallow soufflé cotton candy. Chupa chups pudding pie wafer cheesecake caramels dragée halvah danish.
Text with Less Line Spacing
View Code Hide Code
Class
.txt-bold
.txt-normal
Apply a normal font weight to otherwise bold text.
.txt-italic
.txt-caps
When displaying a word in all caps, such as on or off, it is important to use this class rather than typing the text in capital letters. A screenreader will spell out a word typed in capital letters, such as "O" "N", instead of reading the word "on".
.txt-line-normal
This should not be used for a large body of text, but only in special cases where reduced spacing is necessary. This class must be applied to a block element, such as a <p> or <div>, to have the desired effect.
Text Alignment
Left-aligned text.
Center-aligned text.
Right-aligned text.
View Code Hide Code
Lists
Indented Lists:
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Left-Aligned Lists:
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
View Code Hide Code
Classes
.spaced
Optional
Increase spacing between list items
.lower-alpha
Optional
For ordered lists only—use lower alpha characters instead of numbers.
.no-indent
Optional
Remove the left indent.
.no-bullet
Optional
Remove the bullet and left indent in front of each list item.
Colors
UW Credit Union's colors follow a Marketing-approved color palette.
Text & Link Colors
In the absence of color classes, elements will use the default gray text color and the default aqua link color.
Color classes may be applied to any element. Child elements and anchor tags will assume the text color from any parent with a color specified.
Child elements and anchor tags can define their own color to override a parent's color specification.
View Code Hide Code
Class
Hex Value
.txt-gray
#505152
Default text color.
This color is defined for <body>. Therefore, this class is only needed to set the default color on text that would normally be another color, i.e. text inside an <a>.
.txt-med-gray
#606164
.txt-light-gray
#858689
Secondary text. This light color reduces the visual prominence of text on the page.
.txt-faint-gray
#bbb
Icons only. This color does not offer enough contrast against a white background and should not be used for text.
.txt-aqua
#018aac
Link color.
Only use this color for links and clickable text. Do not use this color for headlines or other pieces of static text.
.txt-dark-blue
#00729a
Non-clickable highlight color.
Use this color for headlines or static pieces of text that aren't clickable. Not to be used as link text. Must be used as bold text or headline text. May not be used as normal body text, because this color doesn't offer enough differentiation from gray.
.txt-orange
#d46a00
Non-clickable highlight color; attention-grabbing.
Use this color to draw attention to headlines or static pieces of text that aren't clickable. May be used as normal body text, bold text or headline text. Not to be used as link text.
.txt-error-red
#d3001a
Error messages.
Use this color for error messages, including input validation errors. May be used as normal body text, bold text or headline text.
.txt-warn-yellow
#d2a801
Warning message headlines.
Use this color for warning message headlines or bold text. May not be used as normal body text, because there is not enough contrast against a white background at smaller font sizes.
.txt-success-green
#568701
Success message headlines.
Use this color for success message headlines or bold text. May not be used as normal body text, because there is not enough contrast against a white background at smaller font sizes.
.txt-info-blue
#018aac
Info message headlines.
Use this color for info message headlines or bold text. May not be used as normal body text, because this color is reserved for links.
Background Colors
To ensure proper contrast of text against background, only use the color combinations displayed below. Other color combinations may not be accessible.
An element with a light background color does not need a text color specified.
An element with a dark background color must have a text color specified. A default text color is not assumed.
.txt-white-reversed - This color has a slightly reduced opacity to prevent it from appearing too stark in contrast to a dark gray background. It stills "looks" white.
.txt-med-gray-reversed - Use sparingly for text. Good for icons.
.bg-aqua .txt-white
#00859b
#fff
.bg-dark-aqua .txt-white
#005968
#fff
.bg-dark-aqua - For use in special cases only. This is not a primary color in our palette.
.bg-dark-blue .txt-white
#01426a
#fff
.bg-orange .txt-white
#e57200
#fff
.bg-dark-orange .txt-white
#ca4e00
#fff
.bg-error-red .txt-white
#d3001a
#fff
.bg-success-green .txt-white
#73b401
#fff
Icons
Arrows & Chevrons
.icon-chevron-left
Denotes a link that navigates the user "back"
.icon-chevron-right
Denotes a link that opens a new page or navigates the user "forward"
.icon-chevron-down
Opens a section of content
.icon-chevron-up
Closes a section of content
.icon-triangle-down
Opens a flyout or dropdown menu
.icon-triangle-up
Closes a flyout menu
.icon-arrow-down
Indicates a decrease, such as a decrease in spending. Also used for "Pull to Refresh" functionality when user is pulling down.
.icon-arrow-up
Indicates an increase, such as an increase in spending. Also used for "Pull to Refresh" functionality after user has released.
Triggers "edit multiple" mode; Used by Web Pay, Account History and Secure Messages
Delete or Close
.icon-x
Closes an overlay, hides an element, or clears text out of an input field.
(Plain versus circle treatment is determined based on the containing element.)
.icon-x-circle
Closes an overlay, hides an element, or clears text out of an input field.
(Plain versus circle treatment is determined based on the containing element.)
.icon-trash
Deletes an item
Documents & Folders
.icon-document
Single document, such as a PDF
.icon-documents
Multiple documents
.icon-folder
Closed Folder - Used to group files and indicate a file structure. The children of a closed folder are hidden.
.icon-folder-open
Open Folder - The children of an open folder are visible.
.icon-printer
Print
Profile & Messages
.icon-user-circle
Profile
.icon-mail
Inbox
.icon-mail-outline
Inbox, 0 New Messages - Used by Mobile App
.icon-notification
Notification
.icon-notification-outline
Notification
.icon-dot
Dot to indicate unread notification
Settings
.icon-cog
Settings - Used by Mobile App
Contact Information
.icon-home
Address
.icon-mail
Email address
.icon-phone
Phone number or phone call
.icon-mobile
Mobile number
.icon-mobile-outline
Mobile number
.icon-text
Text message
Secure Messages
.icon-mail
Unread message
.icon-mail-open
Read message
.icon-mail-open-outline
Read message
.icon-reply
Reply
.icon-compose
Compose
Organize
.icon-organize-fill
Organize Trigger - Indicates items in a grid can be moved up/down or left/right
.icon-move
Organize Handle - Used to drag an item up/down or left/right
.icon-move
Reorder Trigger - Indicates items can be moved up/down
Opens a help popover
Alternately, denotes a link to Help content
Security
.icon-key
Icon used for U-Key
Icon Links
View Code Hide Code
Icon Sizes
View Code Hide Code
Icons in a List
List item 1
List item 2
List item 3
List item 4
"List" with 1 item (div)
View Code Hide Code
Icons Beside Content
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu fringilla purus. Suspendisse sit amet tempus magna,
quis accumsan ligula. Sed egestas ipsum in arcu sollicitudin dictum. Maecenas pretium sit amet massa venenatis eleifend.
Duis lacinia turpis velit, ac facilisis mi porta eu.
View Code Hide Code
Decoration
Horizontal Rules
Use horiztonal rules to divide page content into logical sections. Vertical margins are automatically reduced on XS and SM screen sizes to save screen real estate.
View Code Hide Code
Classes
.condensed
Reduce space above and below the horizontal rule
.on-light-gray
Use this class when the hr is on .bg-light-gray or other container with background: #eee;, such as the Web Branch template background, to darken the color of the line for better visibility.
.on-faint-gray
Use this class when the hr is on .bg-faint-gray to darken the color of the line for better visibility.
Ribbons
A ribbon is used to denote a Favorite Account. A ribbon can be placed in any container that implements the .has-ribbon class.
View Code Hide Code
Use .ribbon-container.xsmall to position a standalone ribbon next to one line of text.
Joint Checking
***1204
View Code Hide Code
Classes
.ribbon
Required
The standard ribbon size. Fits comfortably next to an account nickname with balances below.
.small
Optional
Fits comfortably next to a single line of text.
.large
Optional
Fits comfortably next to large headlines.
Classes
.ribbon-container.xsmall
Optional
Used for positioning an xsmall ribbon next to a single line of text.
Badges
2
3
3
View Code Hide Code
Spinners
Loading...
Loading...
Loading...
View Code Hide Code
Progress Bar
Use the progress bar to present feedback to the user during time-consuming operations, such as uploading an image.
20%
100%
View Code Hide Code
Progress Circle
Use the progress circle to show the user progress toward a goal.
View Code Hide Code
Utilities
Padding & Margin Utilities
Use the padding and margin utilty classes to override the default padding or margin on any element.
p,m = padding,margin
a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
xs, s, m, l, xl, n = xsmall (3px), small (5px), medium (10px), large (20px), extra-large (30px), none (0px)
.pas (padding all small) .mbs (margin bottom small)
UW Credit Union uses 4 major breakpoints, which offer 5 target device/viewport sizes for controlling layout.
PX
Size
CSS Suffix
Devices
< 480px
Extra Small
*-xs
Phones
< 768px
Small
*-sm
Phones / Phablets
< 980px
Medium
*-md
Tablets (Portrait)
< 1260px
Large
*-lg
Tablets (Landscape) / Desktop
>= 1260px
Extra Large
*-xl
Desktop
Visibility
UW Credit Union uses utility classes to control visibility of elements at different device or viewport sizes. When an elelent is visible, its display is set to display: block;. Resize your browser window to see how the window size affects each element's visibility.
.visible-xs
.visible-sm
.visible-md
.visible-lg
.visible-xl
.visible-xs .visible-sm
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.hidden-xl
.hidden-xs .hidden-sm
View Code Hide Code
Visibility for Inline Elements
When you need to control visibility on an inline element, such as <span>, use the utility classes for inline visibility. This is helpful for shortening link and button text to fit small screens. When an elelent is visible, its display is set to display: inline;. Resize your browser window to see how the viewport size affects the visibility of the link text below.
UW Credit Union uses a mobile-first, fluid grid system that scales up to 12 columns as the device or viewport size increases. Our grid system is based on the Bootstrap grid system, but uses our breakpoints (defined above) and is always fluid, which means the .container is always full-width.
Grid Rules
Rows must be placed within a .container for proper alignment and padding.
Use .rows to create horizontal groups of columns.
Content should be placed within columns, e.g. .col-xs-4, and only columns may be immediate children of rows.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, 3 equal columns would use 3 .col-xs-4.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
Example: Stacked to Horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices before becoming horizontal on larger devices and desktop.
.col-md-4
.col-md-4
.col-md-4
View Code Hide Code
Example: Responsive Column Width
Using more than one col-* class will allow you to change a column's width based on device/viewport size.
.col-xs-6 .col-md-4
.col-xs-6 .col-md-8
View Code Hide Code
Example: Offsetting Columns
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
.col-md-4
.col-md-4 .col-md-offset-4
View Code Hide Code
Example: Column Ordering
Change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
UW Credit Union has responsive utility classes for floating or indenting page content.
Floats
Use the .right-* and .left-* classes to float content at and above the device/viewport size indicated by *. For example, using .right-md will apply float:right; at the medium, large and extra large screen sizes.
.right-md
.left-md
View Code Hide Code
Indents
Use the .indent-* and .left-* class to indent content at and above the device/viewport size indicated by *. For example, using .indent-md will indent the content at the medium, large and extra large screen sizes.
Example of .indent-md
This text is indented on medium screens and larger to aid in establishing visual hierarchy with neighboring content. On smaller screens, where screen real estate is limited, it is not indented to allow more horizontal space for the text.
View Code Hide Code
Centering Content
Use the .center-container and .center classes to center content. A block element which is centered must have a defined width.
Centered block element with defined width.
Centered inline-block element.
View Code Hide Code
Boxes
Boxes typically contain a small amount of information that needs to stand apart from neighboring content. Boxes work best when inside of another container, such as a .tile.
A box with a border.
A box with a shadow.
A box with a solid background.
A sharp box. *ouch*
View Code Hide Code
Classes
.box
Required
Makes the element a block element; applies padding and margins
.deco
Optional
Adds a border
.sharp
Optional
Removes rounded corners. Special cases only. Good for times when box needs to be flush with edges of its container.
.bg-*
Optional
Applies a background color. See Background Colors for a list of color choices.
Messages
UW credit Union has standard styles for four types of user interface messages: Success, Warning, Error and Information.
Stand Alone Messages
A success message
Follow up information about the message, if needed.
A warning message
Follow up information about the message, if needed.
An error message
Follow up information about the message, if needed.
An info message
Follow up information about the message, if needed.
When .box-left-cap is used on a gray background, add the .shadowed class to give it more separation from the background.
A success message
View Code Hide Code
Classes
.box-left-cap
Sets a thicker left border
.success
Makes the left border green
.warn
Makes the left border yellow
.error
Makes the left border red
.info
Makes the left border aqua
.orange
Make the left border orange
.shadowed
Adds a drop shadow; For use when the box sits on a gray background
Message Dismissable
NEW
2 new widgets have been added.
View Code Hide Code
Status Messages
Completed
Completed
Paper Check #W986786
View Code Hide Code
Failed
Failed
This transfer did not complete.
View Code Hide Code
Processing
Processing
This transfer will complete soon.
View Code Hide Code
Deleted
Deleted
This transfer has been deleted.
View Code Hide Code
Warning
Warning
Info about the warning.
View Code Hide Code
Tiles
Tiles are used to group sections of content on a page. Tiles should stand alone against the background of the page and should usually not be nested inside another tile, box or other styled container.
Basic Tile
Tile Header
Tile content.
Tile footer.
View Code Hide Code
Tiles with Header Actions
Use a .row-group to add a header action to the tile.
A tile with a link in the header uses .row-group for layout. If there is not be enough room on XS screens to avoid line wrapping, hiding words using the inline visibility utility classes is recommended.
View Code Hide Code
You can also use an .icon for the header action.
Header Next 5
A solid tile with an icon used as the action.
View Code Hide Code
Tile with Condensed Header
Use the .condensed class in special cases where the visual weight of the standard height header is too heavy.
Use sparingly. This style is for use in special cases where the icon enhances understanding of the content. An icon should not be added solely for decoration.
Tile Header
Tile content.
View Code Hide Code
Error Tile
Use the error tile when the error is the only information on the page. To include an error inside an existing tile, use the boxed error message.
Use the responsive .table-* classes to display tabular data as a table on larger devices/viewports and stacked at smaller sizes.
CSS Table
Column 1
Column 2
Column 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
View Code Hide Code
Apply any of the .bg-* classes to add a background color to an entire row, or an individual cell.
Column 1
Column 2
Column 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
View Code Hide Code
Classes
.table-*
Required
An element that renders as a table at * screen sizes and above.
Currently supports XS, SM, and MD sizes.
.deco
Optional
Applies a border around the element and borders under each row when not rendering as a table.
Applies borders around each table cell when rendering as a table.
.center
Optional
Centers the table in its container.
.auto-width
Optional
Sets the width to auto so the table shrinks around its content and doesn't extend to full width
Classes
.table-header
Optional
Child of .table-*
A header row which labels the columns.
This element is visible and renders as a table row when its parent renders as a table. Otherwise it is hidden.
Flexbox allows you to do a lot more to layout content or data. Centering vertically and horizontally becomes easier as well as other things.
To start using flexbox as a layout, add either .flex-row or .flex-column to the parent container of the items you would like to flex.
Next, you have the option add to some additional classes to the parent how you would like the children to align and/or flow. Some of these you get for free by just adding .flex-row or .flex-column (see classes tagged with "default").
Lastly, you have addtional classes you can add to the children how you would like individual children to align, grow, shrink, or be a certain column size at different breakpoints.
Flexbox Row
Direction
Use .flex-row or .flex-row-reverse on the parent <div> to make the children flex horizontally.
.flex-row
1
2
3
View Code Hide Code
.flex-row-reverse
1
2
3
View Code Hide Code
Row Verticle Alignment
Optional use of .align-items-* classes on the parent <div> to align the children vertically.
Parent needs to have a height larger than the content for this to be noticible.
Default is .align-items-stretch so you get this automatically with adding class .flex-row or .flex-row-reverse. This makes the children all of equal height and is unique to flexbox.
.align-items-flex-start
1
2
3
.align-items-center
1
2
3
.align-items-flex-end
1
2
3
.align-items-baseline
1
2
3
.align-items-stretch (default)
1
2
3
Row Horizontal Alignment
Optional use of .justify-content-* classes on the parent <div> to align the children horizontally.
Parent width needs to be wider than the content for this to be noticible.
Default is .justify-content-flex-start so you get this automatically with adding class .flex-row or .flex-row-reverse
.justify-content-flex-start (default)
1
2
3
.justify-content-center
1
2
3
.justify-content-flex-end
1
2
3
.justify-content-space-around
1
2
3
.justify-content-space-between
1
2
3
Row Wrap
Optional use of .flex-* classes on the parent <div> to wrap or not wrap the children.
Default is to .flex-nowrap and you get this automatically with adding class .flex-row or .flex-row-reverse.
.flex-nowrap (default)
1
2
3
.flex-wrap
1
2
3
.flex-wrap-reverse
1
2
3
Row Content Alignment
Optional use of .align-content-* classes on the parent <div> to align the content vertically.
Parent needs to have a height larger than the content for this to be noticible.
Default is .align-items-start so you get this automatically with adding class .flex-row or .flex-row-reverse.
.align-content-flex-start (default)
1
2
3
4
5
6
.align-content-center
1
2
3
4
5
6
.align-content-flex-end
1
2
3
4
5
6
.align-content-space-between
1
2
3
4
5
6
.align-content-space-around
1
2
3
4
5
6
Flexbox Column
Direction
Use .flex-column or .flex-column-reverse on the parent <div> to make the children flex vertically.
.flex-column
1
2
3
View Code Hide Code
.flex-column-reversed
1
2
3
View Code Hide Code
Column Horizontal Alignment
Optional use of .align-items-* classes on the parent <div> to align the children horizontally.
Parent needs to have a width larger than the content for this to be noticible.
Default is .align-items-stretch so you get this automatically with adding class .flex-column or .flex-column-reverse.
.align-items-flex-start
1
2
3
.align-items-center
1
2
3
.align-items-flex-end
1
2
3
.align-items-stretch (default)
1
2
3
Column Verticle Alignment
Optional use of .justify-content-* classes on the parent <div> to align the children vertically.
Parent needs to have a height larger than the content for this to be noticible.
Default is
.justify-content-flex-start so you get this automatically with adding class .flex-column or .flex-column-reverse.
.justify-content-flex-start (default)
1
2
3
.justify-content-center
1
2
3
.justify-content-flex-end
1
2
3
.justify-content-space-around
1
2
3
.justify-content-space-between
1
2
3
Column Wrap
Optional use of .flex-* classes on the parent <div> to wrap or not wrap the children.
Default is to .flex-nowrap and you get this automatically with adding class .flex-column or .flex-column-reverse.
.flex-nowrap (default)
1
2
3
.flex-wrap
1
2
3
.flex-wrap-reverse
1
2
3
Column Content Alignment
Optional use of .align-content-* classes on the parent <div> to align the content horizontally.
Parent needs to have a width larger than the content for this to be noticible.
Default is .align-content-flex-start so you get this automatically with adding class.flex-column or .flex-column-reverse.
.align-content-flex-start (default)
1
2
3
4
5
6
.align-content-center
1
2
3
4
5
6
.align-content-flex-end
1
2
3
4
5
6
.align-content-space-between
1
2
3
4
5
6
.align-content-space-around
1
2
3
4
5
6
Flexbox Children
Alignment
Optional use of .align-self-* classes on the children to align the children vertically in a .flex-row or horizontally in a .flex-column.
A .flex-row will need to have a height larger than the content for this to be noticible.
A .flex-column will need to have a width larger than the content for this to be noticible.
.flex-row .align-self-*
auto
flex-start
center
flex-end
baseline
baseline
stretch
.flex-column .align-self-*
auto
flex-start
center
flex-end
stretch
Grow (default is flex-grow:0)
Optional use of .flex-grow-* classes on the children.
Default is flex-grow:0 and you get this automatically with .flex-row or .flex-column classes on the parent.
.flex-row .flex-grow-* (1-6)
1
1
1
1
1
1
2
1
1
1
1
1
3
1
1
1
1
1
4
1
1
1
1
1
5
1
1
1
1
1
6
1
1
1
1
1
.flex-column .flex-grow-* (1-6)
1
1
1
1
1
1
2
1
1
1
1
1
3
1
1
1
1
1
4
1
1
1
1
1
5
1
1
1
1
1
6
1
1
1
1
1
Shrink (default is flex-shrink:1)
Optional use of .flex-shrink-* classes on the children.
Default is flex-shrink:1 and you get this automatically with .flex-row or .flex-column classes on the parent.
.flex-shrink-1 (default)
.flex-shrink-0
.flex-shrink-1 (default)
.flex-shrink-1
.flex-grow-1 .flex-shrink-1
Minions ipsum tank yuuu! Ti aamoo! Hana dul sae butt ti aamoo! Underweaaar jiji tank yuuu!
Tatata bala tu ti aamoo! Belloo! Tulaliloo para tú chasy bappleees tank yuuu! Chasy jeje. Tatata bala tu gelatooo bappleees jiji underweaaar belloo! Poulet tikka masala bappleees. Gelatooo poopayee bananaaaa hahaha uuuhhh butt bappleees aaaaaah ti aamoo! Tulaliloo baboiii po kass bappleees bee do bee do bee do bee do bee do bee do daa hana dul sae bappleees bappleees hahaha. Hahaha baboiii poulet tikka masala me want bananaaa! Bee do bee do bee do tulaliloo potatoooo tank yuuu! Underweaaar jiji tank yuuu! Wiiiii tank yuuu! Tatata bala tu po kass daa me want bananaaa! Gelatooo potatoooo wiiiii jiji uuuhhh baboiii bee do bee do bee do. Pepete uuuhhh jeje belloo! Daa bananaaaa me want bananaaa!
.flex-shrink-1
.flex-shrink-1 (default) and .flex-shrink-0
.flex-shrink-0
.flex-grow-1 .flex-shrink-1
Minions ipsum tank yuuu! Ti aamoo! Hana dul sae butt ti aamoo! Underweaaar jiji tank yuuu!
Tatata bala tu ti aamoo! Belloo! Tulaliloo para tú chasy bappleees tank yuuu! Chasy jeje. Tatata bala tu gelatooo bappleees jiji underweaaar belloo! Poulet tikka masala bappleees. Gelatooo poopayee bananaaaa hahaha uuuhhh butt bappleees aaaaaah ti aamoo! Tulaliloo baboiii po kass bappleees bee do bee do bee do bee do bee do bee do daa hana dul sae bappleees bappleees hahaha. Hahaha baboiii poulet tikka masala me want bananaaa! Bee do bee do bee do tulaliloo potatoooo tank yuuu! Underweaaar jiji tank yuuu! Wiiiii tank yuuu! Tatata bala tu po kass daa me want bananaaa! Gelatooo potatoooo wiiiii jiji uuuhhh baboiii bee do bee do bee do. Pepete uuuhhh jeje belloo! Daa bananaaaa me want bananaaa!
.flex-shrink-0
Flexbox Columns
Using .flex-col-* classes will allow you to change a column's width base on device/viewport size. All columns once side by side will be of equal height. This is unique to flexbox.
Example: Stacked to Horizontal
.flex-col-xs-12 .flex-col-md-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.flex-col-xs-12 .flex-col-md-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex.
.flex-col-xs-12 .flex-col-md-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex. Proin metus enim, mattis vitae felis quis, tristique hendrerit sapien. In blandit turpis turpis. Aenean felis metus, maximus vitae pulvinar sit amet, iaculis ac nisl. Ut congue commodo enim et euismod. Mauris posuere felis auctor ante egestas sagittis ac id enim.
View Code Hide Code
Example: Responsive Column Width
.flex-col-xs-6 .flex-col-md-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.flex-col-xs-6 .flex-col-md-8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex. Proin metus enim, mattis vitae felis quis, tristique hendrerit sapien. In blandit turpis turpis. Aenean felis metus, maximus vitae pulvinar sit amet, iaculis ac nisl. Ut congue commodo enim et euismod. Mauris posuere felis auctor ante egestas sagittis ac id enim.
View Code Hide Code
Example: Stacked to Horizontal with 2nd column not having a fixed percentage at medium and above. 2nd column just fills the remaining space left over by the other columns.
.flex-col-xs-12 .flex-col-md-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.flex-col-xs-12 .flex-col-md
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex. Proin metus enim, mattis vitae felis quis, tristique hendrerit sapien. In blandit turpis turpis. Aenean felis metus, maximus vitae pulvinar sit amet, iaculis ac nisl. Ut congue commodo enim et euismod. Mauris posuere felis auctor ante egestas sagittis ac id enim.
.flex-col-xs-12 .flex-col-md-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex.
.flex-col-xs-12 .flex-col-md-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex.
View Code Hide Code
Example: Responsive column with 2nd column not having a fixed percentage and just fills the remaining space.
.flex-col-xs-6 .flex-col-md-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.flex-col-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex. Proin metus enim, mattis vitae felis quis, tristique hendrerit sapien. In blandit turpis turpis. Aenean felis metus, maximus vitae pulvinar sit amet, iaculis ac nisl. Ut congue commodo enim et euismod. Mauris posuere felis auctor ante egestas sagittis ac id enim.
View Code Hide Code
Link Areas
Use a link area to position the content and link in a row on MD+ screens, and drop the link below the content on XS, SM screens.
Use .allow-breakword for a link area that may contain content wider than its container to prevent the text from flowing offscreen. This requires setting explicit width on .link-area_content and .link-area_action (can use .cell-xs-* classes), and setting .txt-breakword on the element that may have long text.
A clickable/tappable area of content consisiting of three parts - the content, the link text, and the link icon.
On MD, LG, XL - all three items appear in a row
On SM, XS - the link text and icon appear below the content
.non-stacking
Optional
Extends .link-area
All three parts of (content, link and icon) appear in a row on all screen sizes
.allow-breakword
Optional
Extends .link-area
Allow the use of .txt-breakword within the link-area by switching table layout mode to fixed
Requires setting an explicit width on .link-area_content and .link-area_action (can use .cell-xs-* classes)
.condensed
Optional
Extends .link-area
Reduces the vertical padding
Classes
.link-area_divider
Optional
Child of .link-area_content
A <hr /> to divide the content from the link on XS, SM screens
Classes
.link-area_content
Required
Child of .link-area
A container for the content portion of the link area
.link-area_content_inner
Required
Child of .link-area_content
An inner container for the content portion
This extra node needed for controlling layout and is always the only child of .link-area_content.
Classes
.link-area_action
Required
Child of .link-area
The actionable part of the link area, consisting of the link text and icon
.link-area_action_text
Required
Child of .link-area_action
The link text
.link-area_action_icon
Required
Child of .link-area_action
The icon
Row Groups
Row groups work together with the grid system to create a horizontal row of items separated by vertical lines.
Use any of the .bg-* classes to create a row with a solid background.
Apply less vertical padding to the items in the row
.inset-top
Optional
Extends .row-group
A row items with an inset shadow effect on the top.
This gives a drawer effect, as if the row slid out from under the element above it.
Classes
.row-group_item
Required
Child of .row-group
An item in the row
The col-* classes are used as containers for each .row-group_item to set the desired width
.no-deco
Optional
An item with no left border
Classes
.row-group_item_trigger
Optional
Child of .row-group_item
An indicator, i.e. .icon-triangle-down, that designates the item as clickable
This class controls the positioning of the element.
List Groups
Attached List (Default)
Use the .list-group class to create a list of items that are attached on all devices/viewport sizes.
Note: If the content should not be presented in a <ul> or <ol> the .list-group classes can be used on other elements, such as <div>, as shown in the second example below.
A container for a list of items. Items are attached at all screen sizes by default.
.condensed
Optional
Extends .list-group
A list of items with less vertical padding.
.inset-left
Optional
Extends .list-group
A list of attached items with an inset shadow effect on the left. This gives a drawer effect, as if the list slid out from under the element next to it.
.inset-top
Optional
Extends .list-group
A list of attached items with an inset shadow effect on the top.
This gives a drwarer effect, as if the list slid out from under the element above it.
Classes
.list-group_item
Required
An individual item in the list.
.no-deco
Optional
Extends .list-group_item
An item without a border.
.deco-top-thick
Optional
Extends .list-group_item
An item with a thick top border.
.deco-bottom-thick
Optional
Extends .list-group_item
An item with a thick bottom border.
.has-tab-title
Optional
Extends .list-group_item
Controls margin and padding on the list item to allow space for the tab
Classes
.list-group_item_trigger
Optional
Child of .list-group_item
An indicator, i.e. .icon-chevron-right, that designates the item as clickable
This class controls the positioning of the element.
Classes
.tab-title
Optional
A title that looks like a tab in between list items
Unattached List
Use the .list-group-unattached class to create a list of items that are unattached on all devices/viewports.
Add a .ribbon and use the .has-ribbon class with any .list-group_item where a ribbon is needed. Use the .has-empty-ribbon class to allow space where a ribbon would be to keep item text aligned on medium and larger devices/viewports.
Extends .list-group
A list whose items have less vertical paddding and less bottom margin
Classes
.list-group_item
Required
A item in the list
.has-ribbon
Optional
Extends .list-group_item
Adds space for the ribbon on all screen sizes.
Note: You must include a .ribbon as a child of the .list-group_item
.has-empty-ribbon
Optional
Extends .list-group_item
Adds space for the ribbon on MD+ screens only.
Convertible Lists
Use the .list-group-convertible class to create a list of items that are unattached on smaller devices/viewports and attached at medium and larger sizes.
Use .list-group-convertible with .table-md to create a list of tabular data that is stacked on small devices/viewports and presented in table format at larger sizes.
Finance Charge
+1.00
Mar
31
2015
TFR FROM CK 12345601
Finance Charge
+1.00
$56.23
Balance
Gifts & Charities
+500.00
Mar
31
2015
MOBILE DEPOSIT
Gifts & Charities
+500.00
$56.23
Balance
View Code Hide Code
Classes
.list-group-convertible
Required
A list whose items are attached on small devices/viewports and attached on medium and larger sizes
Classes
.reveal-trigger
Optional
Child of .list-group_item
A clickable area to reveal more content.
Menus
Basic Menu
Use .list-group-unattached with .menu-links to create a list of menu items.
Creates an expandable type of menu; can be used to toggle icons
Uses the list-group styles.
Coming Soon
Flyouts & Popovers
Flyouts and popovers are used to reveal extra informational content or links when clicked.
Popovers
Use popovers to reveal useful information that should not be visible unless needed by the user, such as on-page help.
I am text that needs explanation.
View Code Hide Code
Classes
.popover-container
Required
A container for the popover to set positioning
.active
Required
Extends .popover-container
A class applied via javascript when the popover is open
.popover-trigger
Required
The icon or text that opens the popup when clicked.
Classes
.popover
Required
A container for the contents of the popover
.popover_title
Required
Child of .popover
A container for the title of the popover
.popover_content
Required
Child of .popover
A container for the popover contents
.popover_arrow
Required
Child of .popover
The arrow for the popover to point to the parent trigger.
.top
Optional
Extends .popover_arrow
Positions the arrow at the top of the popover
.bottom
Optional
Extends .popover_arrow
Positions the arrow at the bottom of the popover
.right
Optional
Extends .popover_arrow
Positions the arrow at the right of the popover
.left
Optional
Extends .popover_arrow
Positions the arrow at the left of the popover
Flyouts
Use flyouts to reveal lists of links. Flyouts are presented as a modal on XS, SM screen sizes and as a flyout menu on MD+. Two styling options are available: dark and light. The dark list of links is only applied on MD+ screen sizes.
A container for a clickable/tapple trigger, and associated content that is hidden by default
.flyout_trigger
Required
Child of .flyout
The element that when clicked/tapped causes the content to appear. (Controlled via Javascript.)
.flyout_content
Required
Child of .flyout
Extends .dropdown_content
The content
.flyout_content_title
Required
Child of .flyout_content
The content title which only displays on XS, SM to give context to the content
Classes
.dropdown
Required
A container for content that is hidden by default (i.e. flyout menu)
Takes over the whole viewport and applies a dark background on smalls screens.
.under-pill-btn
Optional
Extends .dropdown
Indents the drop down menu content so it sits under the flat edge of the button only
.dropdown_content
Required
Child of .dropdown
Extends .flyout_content
Content drops down below on MD+ screens, like a traditional HTML select element.
Content pops up as an overlay box on XS/SM screns, like a modal.
Buttons
UW Credit Union's button styles can be applied to <a>, <button> and <input type="submit"> elements.
Button Layout: Large vs. Small Buttons
Large buttons are the width of their text plus padding on medium and larger devices/viewports, and sit side-by-side. These buttons stretch to full width on small and extra small devices/viewports (to increase the hit area) and sit stacked on top of each other.
Small buttons are the width of their text plus padding on all devices/viewports, and always sit side-by-side (as space permits).
Any button, regardless of size, can be set to take up the full width of its container by using the .full-width class.
Primary Button
This button should be used for the primary action on a form or the most likely action a user will take. In most scenarios, only one of these buttons should appear on a screen.
For example, a primary button is used to move the user forward in a wizard.
Set the button to stretch to the full width of its container at all device/viewport sizes
Hollow Button
This button should be used for secondary action(s) on a page or form.
Due to the lightweight visual styling on this button, it can be used on a page multiple times without overwhelming the design.
For example, a hollow button is used to move the user backward in a wizard. It can also be used to offer "Edit" and "Delete" functionality for lists of items.
Set the button to stretch to the full width of its container at all device/viewport sizes
Pill Button
The pill button is a stylized version of flat or hollow button that is well-suited to stand alone on a page, rather than being part of a button group. There are many style combinatiosn available. Below are those currently in use in Web Branch.
An aqua, hollow, pill-shaped button (default color)
.small
Optional
Make the button a small pill shape
.xsmall
Optional
Make the button an extra small pill shape
.full-width
Optional
Set the button to stretch to the full width of its container at all device/viewport sizes
Disabled Button
This button should be used very sparingly.
In most cases, if a user cannot take a particular action, the button should not be there at all. However, in certain circumstances it can be helpful to show where the button will be once the action is available.
A hollow, circular button for an extra large button
Button Group
A button group is a container for a group of .btns. The .btn-group facilitates applying proper margins between buttons when they stack on small devices/viewports and when they sit side by side on larger devices/viewports.
The left-most button stacks above on small screens. This is the default behavior.
Wizards should be used for linear, multi-step workflows.
First Step
The first step has a "Next Step »" button only.
Wizard Title
1Current Step Title
2
3
4
5
View Code Hide Code
Middle Steps
Middle steps include "Next Step »" and "« Previous Step" buttons.
Wizard Title
1
2
3 Current Step Title
4
5
Sub Title for a Group of Fields
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet ullamcorper consectetur. Vivamus mollis pretium facilisis. Donec sodales volutpat cursus. Nulla facilisi. Fusce in orci non turpis tincidunt blandit eu sed massa.
Sub Title for a Group of Fields
View Code Hide Code
Second-to-Last Step
On the second-to-last step, an orange heading reminds the user to review what they have entered before proceeding.
The primary button should tell the user exactly what hitting the button is going to do. In some wizards, this text might be decided based on user input. (i.e. "Transfer Now" vs. "Schedule Transfer"). (No forward arrow » on this button.)
Wizard Title
1
2
3
4 Current Step Title
5
Please verify your information before continuing.
Item 1:
Data entered
Item 2:
Data entered
View Code Hide Code
Last Step
The last step includes a stautus message - Green for Success, Red for Error, or Yellow for Warning.
A hollow button offers a way to return to previous page. (No » or « on this button)
Wizard Title
1
2
3
4
5 Confirmation
Transfer Complete
Time Stamp:
2/18/2013 4:37 PM Central Time
Transaction ID:
123456
Item 1:
Data entered
Item 2:
Data entered
View Code Hide Code
Wizard Nav Sizes
The wizard nav accommodates two sizes. Standard - The preferred size. Condensed - For use when the number of steps exceeds the available horizontal space.
Check the progress nav at each step to make sure it fits on a 320px wide screen. If the progress nav is too wide for a certain step, consider shortening the step title.
1
2
3 Current Step Title
4
5
1
2
3 Current Step Title
4
5
View Code Hide Code
Wizard Nav Alternate Option
When the number of steps greatly exceeds the available horizontal space, the nav can be reduced to a "Step 1 of n" style.
Step 1
of 12
Step 12 of 12
View Code Hide Code
Classes
.wizard
Optional
The container for the wizard. Applies white background drop shadow around the entire wizard.
.wizard_progress
Required
Child of .wizard.
A container for the progress nav.
.wizard_content
Required
Child of .wizard.
A container for the wizard content.
Classes
.nav-progress
Required
The progress nav
.condensed
Required
Extends .nav-progress.
A more horizontally-condensed version of the progress nav.
Classes
.nav_item
Required
Child of .nav-progress.
An individual item in the nav
.first
Optional
Extends .nav_item.
The first item in the progress nav
.visited
Optional
Extends .nav_item.
An item that has been visited in the progress nav
.selected
Optional
Extends .nav_item.
The current step in the progress nav
.after-selected
Optional
Child of .nav-progress.
The next item in the progress nav
Classes
.nav-item_step-number
Required
Child of .nav-item.
The step number
Toggles
UW Credit Union uses toggles as follows:
Toggles are used to perform an action when there are 2 choices.
For example, use a toggle to turn a setting on or off. (Note: The action should happen right away. No need to press another button to save the choice.)
Use a toggle to show/hide a section of a form/page.
One of the choices should always be selected by default. You should never see a toggle with both choices unselected.
A toggle should not fire validation. Both choices should be valid.
Basic Toggles
A basic toggle usually stands alone on a page. Due to its heavy visual weight, it is not recommended to stack basic toggles in a list. Use the Pill Toggles instead.
When one toggle's value means "Off" or "No", that toggle should be gray. Omit the .positive class from that toggle to make it gray.
YesNo
YesNo
View Code Hide Code
When neither toggle means "Off" or "No", both toggles should be orange.
NowLater
NowLater
View Code Hide Code
Classes
.toggle
Required
A container for the toggle buttons.
.narrow
Optional
A narrow container for toggle buttons.
.btn.toggle_item
Required
The buttons of the toggle.
.toggle_item.pressed
Optional
Denotes the button that is currently selected; Applies a solid background color to indicate it is selected.
.toggle_item.positive
Optional
Denotes that button is not an "Off" or "Disabled" value; Applies an orange background when pressed.
Pill Toggles
Use the pill toggles for settings. Pill toggles have less visual weight and are are well-suited to appear stacked in a list of items.
OnOff
OnOff
View Code Hide Code
ShowHide
ShowHide
View Code Hide Code
Classes
.toggle-pill
Required
A container for overlapping, pill-shaped toggle buttons.
.narrow
Optional
A narrow container for toggle buttons.
Inputs
UW Credit Union uses a combination of standard browser inputs and custom inputs in order to create the best user experience regardless of device or screen size.
Labels
To ensure accessibility, every input must have a corresponding label.
View Code Hide Code
Classes
.input-label
Required
.screen-reader-only
Optional
If the expected input can be inferred from other information on the screen by a sighted user, use this class to present the label to screen readers only.
.txt-normal
Optional
Remove bold formatting.
Attributes
for
Required
Must match the ID of the associated input.
Text Boxes
UW Credit Union uses the standard browser input for text boxes.
A note about this field.
View Code Hide Code
Use a prepended text box to add an icon to the beginning of a text box. Use sparingly.
View Code Hide Code
Date Boxes
Only use a prepended input for a date field with an associated popup calendar when selecting a date near today's date, such as Transfer Date. Otherwise, use a plain text input without a popup calendar for selecting a date far from today's date, such as Date of Birth or ID Issue Date.
(mm/dd/yyyy)
View Code Hide Code
Classes
.input-text
Required
MD+
Input width set to fixed value for cross-browser consistency
XS, SM
Input width set to 100% to maximize tappable area
.narrow
Optional
XS - XL
Input width set to fixed value to indicate a short response is expected, such as zip code
.extra-narrow
Optional
XS - XL
Input width set to fixed value to indicate a 1-2 character response is expected, such as state or middle initial
.full-width
Optional
XS - XL
Input width set to 100%
Classes
.input-prepend
Required
A container for an input or inputs with an unattached, styled block to the left containing a label or icon.
MD+
Input width set to fixed value for cross-browser consistency
XS, SM
Input width set to 100% to maximize tappable area
.input-prepend_label
Required
A span or label that sits to the left of an input
.input-prepend_input
Required
Child of .input-prepend
Extends .input-text
An input that sits to the right of a label
Attributes
type
Required
="text"
maxlength
Required
Select Lists
UW Credit Union uses a custom control for select lists. The control works like an HTML select on MD+ screens, and pops up in an overlay on XS/SM screens. Unlike a standard HTMl <select>, HTML content can be included in each option.
A note about this field.
Joint Checking ***5203 Avail: $4,509.32
View Code Hide Code
Classes
.input-select
Required
A container for a custom select list. The <select> element is hidden and replaced by a more stylized drop down menu.
The trigger and the list of options stretch to 100% width inside this container. Conrol the width of this container
to control the width of the trigger and the list of options.
MD+
The list acts like an HTML select and drops down below the trigger.
XS, SM
The list pops up as a modal box above the page content.
.has-ribbon
Optional
Extends .input-select
An input select which leaves room for a ribbon in the list items
.input-select_trigger
Required
Child of .input-select
An element that when clicked, opens the drop down menu
.input-select_list
Required
Child of .input-select
An unordered list of select options
.input-select_list_item
Required
Child of .input-select_list
A single item in the list
Text Area
UW Credit Union uses the standard browser input for text areas.
View Code Hide Code
Classes
.input-text-area
Required
MD+
Input width set to fixed value for cross-browser consistency
XS, SM
Input width set to 100% to maximize tappable area
.full-width
Optional
XS - XL
Input width set to 100%
Attributes
rows
Required
Scroll Box
UW Credit Union uses read only text areas to display prefilled information (such as a long agreement to terms), which scroll via mouse or gesture.
View Code Hide Code
Classes
.input-scrollbox
Required
MD+
Input width set to fixed value for cross-browser consistency
XS, SM
Input width set to 100% to maximize tappable area
.full-width
Optional; Recommended
XS - XL
Input width set to 100%
Attributes
rows
Required
readonly
Required
readonly
Checkboxes
UW Credit Union uses a custom control to replace the standard browser input for radio buttons. This ensures the radio button will be large enough to tap on mobile devices.
View Code Hide Code
Use the .input-group_option-wrapper along with .input-group_description to create a checkbox list with boxed items.
View Code Hide Code
Classes
.input-group_option-wrapper
Optional
Child of .input-group
A container for .input-group_option and .input-group_description.
Adds a shadowed box around the item.
If an .input-group_description is present, this wrapper should be used.
.input-group_option
Required
Child of .input-group
Displays as a CSS table to ensure the checkbox is always sitting alone to the left.
Attributes
role
Required
"checkbox"
aria-checked
Required
true/false/mixed
tabindex
Required
0
Allows this element to receive focus
Classes
.input-group_option_input
Required
Child of .input-group_option
A container for the checkbox. Displays as a CSS table-cell.
.input-group_option_text
Required
Child of .input-group_option
A container for the label element and other text associated with the checkbox. Displays as a CSS table-cell.
.input-group_description
Optional
Child of .input-group_option-wrapper
An optional container used when an input-group_option needs further text
Allows for responsive indenting via the .indent-sm and .indent-md classes.
Radio Buttons
UW Credit Union uses a custom control to replace the standard browser input for checkboxes. This ensures the checkbox will be large enough to tap on mobile devices and gives us the ability to present a checkbox in a half-checked state.
View Code Hide Code
Use the .input-group_option-wrapper along with .input-group_description to create a radio list with boxed items.
View Code Hide Code
Use the responsive grid system to better present the content if appropriate, such as with a list of images.
View Code Hide Code
Radio button lists can include an item that expands to reveal further required input.
View Code Hide Code
If all of the items in the liste xpand to reveal futher inputs, using .input-group_option-wrapper to add a box around each item is recommended.
View Code Hide Code
Element
<fieldset>
Required
Ensures accessibilty by grouping all radio buttons together as a set of related inputs.
Attributes
role
Required
"radiogroup"
Element
<legend>
Required
Ensures accessibilty by labeling the group of radio buttons.
Classes
.input-label
Optional
Classes
.input-group_option-wrapper
Optional
Child of .input-group
A container for .input-group_option and .input-group_description.
Adds a shadowed box around the item.
If an .input-group_description is present, this wrapper should be used.
.input-group_option
Required
Displays as a CSS table to ensure the checkbox is always sitting alone to the left.
Attributes
role
Required
"radio"
aria-checked
Required
true/false
tabindex
Required
0
The radio button that should receive focus when a user tabs into the radio button group. If no radios are selected, this is the first radio in the group. Otherwise, it is the selected radio.
-1
All other radio buttons in the list.
Classes
.input-group_option_input
Required
A container for the radio button. Displays as a CSS table-cell.
.input-group_option_text
Required
A container for the label element and other text associated with the radio button. Displays as a CSS table-cell.
.input-group_description
Optional
Child of .input-group_option-wrapper
An optional container used when an input-group_option needs further text
Allows for responsive indenting via the .indent-sm and .indent-md classes.
Search Boxes
View Code Hide Code
Add any of the .bg-* background color classes to .input-append when the search box appears in a container with a background color.
Use .input-append-double when two icon buttons are needed.
View Code Hide Code
Use .input-prepend to place the search icon in front of the input. This should be used when a search executes immediately as the user types, without the need to "Submit".
Note: The .input-append class is also used to place an "X" icon at the end of the input field. Start typing in the field below to see the "X" appear.
View Code Hide Code
Classes
.input-append
Required
A container for a text input and icon button
.input-append-double
Required
A container for a text input and two icon buttons
.input-pepend
Optional
A container for a text input and icon button that sits at the beginning of the input field. For use when a search executes immediately as the user types, without the need to "Submit".
.full-width
Optional
An input box that stretches to the full width of its container
.bg-aqua
Optional
An input box that appears on an aqua background
.bg-dark-orange
Optional
A input box that appears on a dark orange background
Attributes
type
Required
="text"
maxlength
Required
placeholder
Required
The placeholder is required if the input box does not have an associated input-label
