← Showcase Site Components

News Component

The OLD version of this component was similar to the Blog component–make sure you have pulled the correct webdev_showcase repo and copied the most recent files into your directory before starting on this!

This component is used for clients to put upcoming events for their bank, using cards for a blurb of the “article”. The cards automatically organize by date and hide if empty.

This component has its own unique subpage template.

Mustache Files

src > templates > news-search.mustache - The main template file.

Script

  1. src > scripts > banno-functions.js

    • Date sorting function. On sites with the newest file setup, this will be automatically un-commented if the componentBlog value in the package.json is set to true. On older sites, you will need to manually un-comment this script.
    • Article link setup, to allow client to put “read more” for all links to match design, and script will make each link title attr unique. On sites with the newest file setup, this will be automatically un-commented if the componentBlog value in the package.json is set to true. On older sites, you will need to manually un-comment this script.
    • Filter/search functionality. On sites with the newest file setup, this will be automatically un-commented if the componentBlog value in the package.json is set to true. On older sites, you will need to manually un-comment this script.
    • News reset filter/search. On sites with the newest file setup, this will be automatically un-commented if the componentBlog value in the package.json is set to true. On older sites, you will need to manually un-comment this script.

  2. src > scripts > script.js - Script for fixing link attr so it’s ADA compliant, if they have links that are the same. On sites with the newest file setup, this will be automatically un-commented if the componentBlog value in the package.json is set to true. On older sites, you will need to manually un-comment this script.

Styling

  1. src > scss > themes > _general.scss - The “Cards” section has relevant styling.
  2. src > scripts > [yourtheme].scss
    • The “Cards” section has relevant styling.
    • News Search Component page section has other styling for things including the search

Example Sites

Rosewood - First American Bank & Trust