Skip to main content
Design System
Use / Download Contribute

Testimonials

Quotes from people that help show how awesome you or your organization are.

Find a bug? Create an issue.
Have an idea for a new component? Tell us.

Standard Testimonial

Introduced in Version 1.0.0

Featurettes Headline

Subhead goes here.

Data-point. Who's responsible for the ask for this request? touch base accountable talk for knowledge is power and marketing computer development html roi feedback team website pushback.

Placeholder

Example Profile A

Job Title

Put additional info or links here.

Don’t

  • Don’t use a quote that is so long that it becomes hard to scan.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-featurettes partial to a template.
  • Set align to middle.
  • Set limit to 1.
  • Set featurettesStyle to testimonials
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.

When Using the Super Template

  • Add a featurettes component to a slot.
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.
  • Select middle from the Slot Alignment dropdown menu associated with the component’s slot.
  • Enter 1 into the Limit field associated with the component’s slot.
  • Select testimonials from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

  • Apply these utility classes to component container:
    py-5 bg-wvu-blue text-white text-center wvu-bg-vignetting--50 wvu-bg-pattern-blue
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-featurettes-{instance-number}-background.

If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. Also see our guide on how featurettes work. We also have a Beginner’s Guide.

Multiple Testimonials

Introduced in Version 1.0.0

What our partners are saying

Data-point. Who's responsible for the ask for this request? touch base accountable talk for knowledge is power and marketing computer development html roi feedback team website pushback.

Placeholder

Example Profile A

Job Title

Data-point. Who's responsible for the ask for this request? touch base accountable talk for knowledge is power and marketing computer development html roi feedback team website pushback.

Placeholder

Example Profile B

Job Title

Data-point. Who's responsible for the ask for this request? touch base accountable talk for knowledge is power and marketing computer development html roi feedback team website pushback.

Placeholder

Example Profile C

Job Title

Put additional info or links here.

Do

  • If you display multiple quotes, use quotes that are roughly equal in length.

Don’t

  • Don't use quotes that are so long that they become hard to scan.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-featurettes partial to a template.
  • Set limit to 3.
  • Set featurettesStyle to testimonials
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.

When Using the Super Template

  • Add a featurettes component to a slot.
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.
  • Enter 3 into the Limit field associated with the component’s slot.
  • Select testimonials from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

  • Apply these utility classes to component container:
    py-5 bg-wvu-neutral--black text-white text-center wvu-bg-vignetting wvu-bg-pattern-grid-transparent wvu-bg-blend-mode-luminosity--80
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-featurettes-{instance-number}-background.

If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. Also see our guide on how featurettes work. We also have a Beginner’s Guide.

Testimonial in a Blob

Introduced in Version 1.0.0

Second Featurettes Headline

Subhead goes here.

Data-point. Who's responsible for the ask for this request? touch base accountable talk for knowledge is power and marketing computer development html roi feedback team website pushback.

Placeholder

Example Profile D

Job Title

Put additional info or links here.

CleanSlate Implementation Notes What’s this?

This uses the Featurettes component with customizable panels.

When Using a Shared Partial

There are no shared partials that correspond to a custom featurette. We recommend making your own custom partial (you can copy the code from the featurette above), then dropping in any shared partials you want to use into each column.

When Using the Super Template

  • Add a featurettes component to a slot.
  • Select Custom from the “Featurettes Style” dropdown menu associated with the component’s slot.
  • Add other components to any of the remaining available slots.
  • Set the “Where to Display” option to the appropirate location.
  • Assign an instance number that is unique.

If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. Also see our guide on how featurettes work. We also have a Beginner’s Guide.

Testimonial Hero

Introduced in Version 1.0.0

Featurettes Headline

We need a paradigm shift draft policy ppml proposal. Closing these latest prospects is like putting socks on an octopus prairie dogging. Goalposts closer to the metal fire up your browser. Killing it product management breakout fastworks for it's about managing expectations for those options are already baked in with this model ultimate measure of success.

Example Profile E

Biology, Class of ’22

Put additional info or links here.

Do

  • List Item

Don’t

  • List Item

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

  • Add a wvu-featurettes partial to a template.
  • Set align to left.
  • Set limit to 1.
  • Set featurettesStyle to testimonials
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.

When Using the Super Template

  • Add a featurettes component to a slot.
  • For each featurette you want to display, create a page, then label the page with {page-slug}-featurettes-{instance number} corresponding to the component that contains the featurettes component e.g. home-featurettes-1.
  • To show a description for each featurette, go to Properties > Custom Data then edit the Description field in each page that will display as a featurette.
  • To show a thumbnail image, upload an image to CleanSlate, copy the thumbnail URL (go to Files then Edit the file you want), then for the page you wish to assign the thumbnail, go to that pages Properties > Custom Data, and paste the URL into either the Thumbnail URL or Thumbnail URL Square field. Do not use the full URL of the image, however. Your URL will look like this: http://designsystem.wvu.edu/files/d/8bb6c9ef-41e9-4528-b6ba-91cda89c597c/27518a0052xx.jpg but you need to omit beginning http://designsystem.wvu.edu part, the d/ and whatever is after the trailing slash (including the slash), in this case /27518a0052xx.jpg. So you would paste in /files/8bb6c9ef-41e9-4528-b6ba-91cda89c597c.
  • Select left from the Slot Alignment dropdown menu associated with the component’s slot.
  • Enter 1 into the Limit field associated with the component’s slot.
  • Select testimonials from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

  • Apply these utility classes to component container:
    py-6 bg-wvu-neutral--black text-white wvu-bg-vignetting wvu-bg-position-lg-center-left--80
  • If you want to add a background image, upload your image to Files and label the image with {page-slug}-featurettes-{instance-number}-background.

If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. Also see our guide on how featurettes work. We also have a Beginner’s Guide.