News listing

Use the news listing component to provide a news listing on your web page.

Add the component to your page

When you are editing your page using page-builder:

  1. Add a component to your page by clicking the widgets Add component button or by adding a content block (by clicking the add_circle button) then clicking the add component button.

  2. Locate the news listing Squiz core component within the component browser and then click the Select button.

    news listing component select

  3. This will add the news listing component to your page.

Configure the news listing component

news listing fields

  1. The add_circle Add button allows you to add additional news. When the component loads you will have an unpopulated news card that you can fill in . This is covered in the [news-configuration] section.

  2. This setting defines the maximum number of news items that will display in a row when viewing your page in a desktop browser.

  3. This allows you to choose the heading level for the news title.

  4. This applies a highlighting style to the first news.

  5. This controls whether your cards display a call-to-action button.

  6. Controls if there is a link displayed allowing the user to see all news.

The following options configure individual news items:

news listing news fields

  1. The delete button will remove the news.

  2. Enter a title for the news.

  3. (Optional) Enter the date.

  4. This field allows you to provide descriptive text, links, images, or a combination of these for your news.

  5. (Optional) Choose an image that you have already uploaded to the CMS to display as the news thumbnail.

  6. (optional) Allows you to add categories for your news by clicking the add_circle button. You will get a field in which you can type a category label. You can also add additional categories and reorder the category list.

  7. This specifies if you are linking to another page in the CMS or an external, user-specified link.

  8. Depending on what link type you select you will see one or two fields to specify your link.

    Call-to-action button - Matrix asset

    This is displayed for Matrix asset picker links and allows you to choose the CMS page to which your card links.

    Call-to-action button - Text

    This is displayed for user-specified links and defines the link text.

    Call-to-action button - URL

    This is displayed for user-specified links and defines the link URL.

  9. This controls how the link is opened when you click it. For example, open in a new page.

  10. The add_circle Add button allows you to add additional news.