Skip to main content

News Articles

Display a series of news articles.

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

Standard News Articles

Introduced in Version 1.0.0

Don’t

  • Don’t use thumbnail images unless you have a thumbnail for all of the news stories that appear.
  • Don’t use thumbnails that have different sizes.

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 blog
  • Set featurettesID to {id-of-the-parent-you-want-to-target} (The ID can be found in the page’s CleanSlate URL e.g. https://cleanslate.wvu.edu/sites/303/pages/10758/editor. To see the URL, hover over the link to the page or blog in the Pages tab and look at your browser’s URL preview)
  • 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 blog from the “Featurettes Style” dropdown menu associated with the component’s slot.
  • Set Featurettes ID to {id-of-the-parent-you-want-to-target} (The ID can be found in the page’s CleanSlate URL e.g. https://cleanslate.wvu.edu/sites/303/pages/10758/editor. To see the URL, hover over the link to the page or blog in the Pages tab and look at your browser’s URL preview)

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.

News Articles in a Blob

Introduced in Version 1.0.0

Second Featurettes Headline

Subhead goes here.

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.