QF View Pattern Library

Colors

Quickfind Color 1

Class: blue

Quickfind Color 2

Class: red

Quickfind Color 3

Class: dark

Quickfind Color 4

Class: gray

Quickfind Color 5

Class: light

Headers

Heading 1

Heading 2

Imperdiet sed euismod nisi porta lorem mollis. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Dignissim suspendisse in est ante in nibh mauris cursus mattis. A erat nam at lectus urna duis. Molestie a iaculis at erat pellentesque adipiscing commodo. Sit amet massa vitae tortor. In fermentum et sollicitudin ac orci phasellus egestas. Nisl nunc mi ipsum faucibus vitae aliquet. Lorem ipsum dolor sit amet consectetur adipiscing elit. Dui sapien eget mi proin sed libero enim sed faucibus.

BLOCKQUOTE: Ut diam quam nulla porttitor massa id. Neque convallis a cras semper auctor neque vitae. Posuere ac ut consequat semper viverra nam libero justo.

Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Bibendum enim facilisis gravida neque convallis a cras. Est velit egestas dui id ornare. Auctor urna nunc id cursus metus aliquam eleifend mi. Hac habitasse platea dictumst quisque sagittis purus sit amet. Ipsum suspendisse ultrices gravida dictum. Varius duis at consectetur lorem donec massa sapien faucibus. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Posuere morbi leo urna molestie at elementum eu facilisis. Lectus sit amet est placerat in.

Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Bibendum enim facilisis gravida neque convallis a cras. Est velit egestas dui id ornare. Auctor urna nunc id cursus metus aliquam eleifend mi. Hac habitasse platea dictumst quisque sagittis purus sit amet. Ipsum suspendisse ultrices gravida dictum. Varius duis at consectetur lorem donec massa sapien faucibus. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Posuere morbi leo urna molestie at elementum eu facilisis. Lectus sit amet est placerat in.

Heading 3

Heading 4

Heading 5
Heading 6

Buttons

Default Button Style 1 Button Style 2 Button Style 3 Default Borderless

Lists

Unordered List
Ordered List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Table Styles

Individual coverage reward ($400 maximum) Dependent coverage reward ($800 maximum) Spouse reward ($150 maximum)
Rally Health Survey* $100 $200 $50
Annual Physical $150 $300 $50
Biometric screening $150 $300 $50
QuitPower program $100 $200 $100
Real Appeal $100 $200 $100
Maternity Support Program $100 $100 $100
Three Rally Missions $50 $50 $25
One Rally Challenge $50 $50 $25

accordion more details

author: CBonade
meta: none
notes: this view simply includes expand boxes with a single variable as a modifier
view: expand-box-more-details

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

accordion

author: CBonade
meta: none
notes: to ensure that any number of Accordion groups can be added, we use a unique id on each group.
type: group
view: accordion

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

callout box

author: Cbonade
meta: pcqf_button_link, pcqf_button_name, pcqf_color
notes: Colors available: red, light, dark
type: single
view: callout-box

Sample Pattern Library

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

card group small

author: tbunch
meta: none
notes: accepts title, content
type: group
view: card-group-small

Group Post Title 1

Learn more

Group Post Title 2

Learn more

Group Post Title 3

Learn more

card group

author: tbunch
meta: none
notes: accepts title, content, featured image
type: group
view: card-group

Group Post Title 1

Just a short snippet goes in here. Learn more

Group Post Title 2

Just a short snippet goes in here. Learn more

Group Post Title 3

Just a short snippet goes in here. Learn more

columns

author: Ramos
meta: none
notes:
type: group
view: column-tiles

Column Box 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Column Box 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Column Box 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

contact

author: tbunch
meta: pc_description, pc_url, pc_phone_number, pc_administrator, pc_email
notes: icons should be named contacts-phone.svg, contacts-email.svg, contacts-web.svg
type: group
view: contacts

Contacts

Contact 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Contact 2

Lorem ipsum dolor sit amet...

details list icons

author: Cbonade
meta: pcqf_buton_link, pcqf_button_name
notes: supports an icon being added to the left of the detail item sourced from featured image
type: group
view: details-list

Lorum Ipsum Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

I'm a button

Lorum Ipsum Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

I'm a button

details list

author: tbunch
meta: none
notes:
type: group
view: details-list

Lorum Ipsum Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Lorum Ipsum Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

full width callout

author: Cbonade
meta: pcqf_button_link, pcqf_button_name, pcqf_color
notes: Colors available: red, light, dark
type: single
view: full-width-callout

Sample Pattern Library

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

group header text

author: CBonade
meta: none
notes: only accepts post content
type: single
view: group-header-text

This is an h2 embedded in the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

image left right

author: Cbonade
meta: pcqf_button_link, pcqf_button_name, pcqf_image_position
notes: View swaps with the image on the left or the right using meta image_position
type: single
view: callout-box

Sample Pattern Library

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

outline callout

author: Cbonade
meta: none
notes: Colors available: red, light, dark
type: single
view: callout-box

Sample Pattern Library

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

split layout

author: Cbonade
meta: pcqf_image_position
notes: image_position left or right determines the orientation
type: single
view: split-layout
Awesomeness :: Pattern Library

Split Layout 1

tabs

author: CBonade
group:
meta: only accepts post content
notes:
view: Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

text

author: CBonade
meta: none
notes: only accepts post content
view: text

This is an H2 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H3 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H4 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

video band

author: Cbonade
meta: pcqf_video_embed, pcqf_video_section_title
notes:
type: single
view: video

Video Title 1

This is an H2 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H3 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H4 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

Video Title 1

This is an H2 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H3 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H4 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

Video Title 1

This is an H2 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H3 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

This is an H4 heading inside the post content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus.

Learn More

Connect with Benefits

XPO Benefit Center

  • 855.376.7276

    Press 1 for English
    Press 2 for Spanish
    Monday through Friday
    8 a.m. to 8 p.m. Eastern Time