Blog Component

Not to be confused with Blog Article. When a customer purchases the Blog component, the Blog Article is automatically included.

This component was originally built to act as an archive of blog posts written by staff members at the FI, but is used by clients for a variety of needs. Since it is a set of tabs with cards inside that organize by date, it is flexible as a landing page that can go to other subpages, or other similar uses.

This component has its own unique subpage template.

Mustache Files

src > templates > blog.mustache - The main template file.

Script

1. src > scripts > banno-functions.js

   • Date sorting section, makes it so the blog cards organize by date (most recent first). 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 section, makes it so that the client can have “Read More” for all of their blog links, to match design. This script will make it so the title attribute of that link includes the title of the article as entered by the client. Therefore, they won’t have an ADA issue with multiple links having the same text! 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.

   • Blog tab select function, makes it so that the tabs for the blog turn into a select dropdown on mobile. 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

   • Blog script (labeled with comments), runs the date organization and the tab title/name functions listed above. 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.

   • Blog tab trigger function, runs the tabs-to-select dropdown function listed above. 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 - Blog component CSS, controls basic styling for the Blog component; pieces that are common between all themes.

2. src > scss > themes > [yourtheme].scss - Styles specific to your theme.

Example Sites

Alabaster - Pioneer Bank (Stanley)

Rosewood - The Community State Bank