Profiles

When Using a Shared Partial

• Add a wvu-featurettes partial to a template.
• Set limit to 3.
• Set featurettesStyle to profiles
• 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 profiles from the “Featurettes Style” dropdown menu associated with the component’s slot.

Element Styles

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

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.

When Using a Shared Partial

• Add a wvu-profiles partial to a template.
• For each profile you want to display, create a page using the Profile template, then label the page with {page-slug}-profiles-{instance number} corresponding to the component that contains the profile listing e.g. staff-directory-profiles-1.
• To show a description for each profile, go to Properties > Custom Data then edit the Description field in each page that corresponds to a profile.
• 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 the 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 profiles component to a slot.
• For each profile you want to display, create a page using the Profile template, then label the page with {page-slug}-profiles-{instance number} corresponding to the component that contains the profile listing e.g. staff-directory-profiles-1.
• To show a description for each profile, go to Properties > Custom Data then edit the Description field in each page that corresponds to a profile.
• 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 the 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.

Element Styles

• If you want to add a background image, upload your image to Files and label the image with {page-slug}-profiles-{instance-number}-background.