Featurettes | WVU Design System 1 | West Virginia University

Standard Featurettes

Introduced in Version 1.0.0

Featurettes Headline

Subhead goes here.

Cheerleaders running onto basketball court

Example Featurette A

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

Example Featurette B

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

Example Featurette C

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

Example Featurette D

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

Put additional info or links here.

Don’t

Do not use descriptions that vary too much in length from featurette to featurette, as this will throw the elements off balance.
Do not use photos with different aspect ratios, as this will throw the elements off balance.
Do not use photos that are blurry, or are smaller than 960 pixels wide (smaller images will be generated for the appropriate screen widths).

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

Add a wvu-featurettes partial to a template.
Set limit to 4.
Set featurettesStyle to default
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 4 into the Limit field associated with the component’s slot.
Select default from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

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.

Featurette Cards

Introduced in Version 1.0.0

Second Featurettes Headline

Subhead goes here.

Example Featurette A

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

Example Featurette B

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

Example Featurette C

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

Put additional info or links here.

Don’t

Do not use descriptions that vary too much in length from featurette to featurette, as this will throw the elements off balance.
Do not use photos with different aspect ratios, as this will throw the elements off balance.
Do not use photos that are blurry, or are smaller than 960 pixels wide (smaller images will be generated for the appropriate screen widths).

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 cards
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 cards from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

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.

Featurettes in a Backpage Main Region

Introduced in Version 1.0.0

Churning anomalies game plan. High performance keywords not enough bandwidth. Can we parallel path. Viral engagement great plan! let me diarize this, and we can synchronise ourselves at a later timepoint but are there any leftovers in the kitchen? driving the initiative forward.

Build on a culture of contribution and inclusion that jerk from finance really threw me under the bus, so five-year strategic plan blue sky thinking, nor clear blue water ramp up upstream selling. Strategic staircase can we align on lunch orders. I don't want to drain the whole swamp, i just want to shoot some alligators meeting assassin we need distributors to evangelize the new line to local markets, nor cloud strategy but data-point, but back to the drawing-board.

Example Featurette A

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

Example Featurette B

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

Example Featurette C

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

Don’t

Do not use descriptions that vary too much in length from featurette to featurette, as this will throw the elements off balance.
Do not use photos with different aspect ratios, as this will throw the elements off balance.
Do not use photos that are blurry, or are smaller than 960 pixels wide (smaller images will be generated for the appropriate screen widths).

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

Add a wvu-backpage partial to a template.
Set limit to 4.
Set featurettesStyle to cards-w-overlay

When Using the Super Template

Add a backpage component to a slot.
Enter 4 into the Limit field associated with the component’s slot.
Select cards-w-overlay from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

If you want to add a background image, upload your image to Files and label the image with {page-slug}-backpage-{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. We also have a Beginner’s Guide.

Featurette Cards w/Overlay

Introduced in Version 1.0.0

Third Featurettes Headline

Subhead goes here.

Example Featurette A

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

Example Featurette B

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

Example Featurette C

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

Example Featurette D

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

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 limit to 4.
Set featurettesStyle to cards-w-overlay
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 4 into the Limit field associated with the component’s slot.
Select cards-w-overlay from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

Apply these utility classes to component container:
text-center
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.