Annual Report
Overview
The Annual Report template uses a series of sections, monklets, and link lists styled to match your site to display animated information recapping the previous year. All monklets are labeled as "Annual Report" and are for use on this layout only. Sections can be re-ordered and edited as needed and have all the same functionality as other sections on your site (meaning you can add background colors, parallax, background images, dark background functionality, etc.)
Animation
To add animations to any number, you will add % % around the number. For example, "%4979% weekly attendance" would animate the number 4979 but "weekly attendance" would not be animated. The animation can only be applied to numbers, not other text.
Anchor Navigation
To add a heading to the anchor navigation, you will enter the word you want to display in the "Description" field of the section. If you do not want there to be a link to the section in the navigation, simply leave this field blank.
Monklets
Below is a list of the Monklets that are available for use on this template. A couple of things to note:
- To animate numbers, you will add % % around the numbers, for example, %4797% weekly attendance
- All monklets use the "find=" parameter to find a link list. For example, {{annual-report-image-left-monklet|find="annual-report-attendance-linklist"}}
- In order to have no extra padding between monklets, you can insert them into the same section. For example, the Attendance Monklet and the Attendance Stats Monklet are inserted in the same section, like in the image below
The Annual Report - Letter Monklet uses a link list to display a styled title and subtitle with an image to the right, as well as a blockquote below. The blockquote will only display the first few lines and then a "load more" button will display. If the user clicks "load more" the rest of the letter will display below.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-letter-monklet|find="annual-report-letter-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "Subtitle" will display below. The "Image" will display to the right, and the "description" is the blockquote below.
To display additional content below the blockquote, you can insert WYSIWYG content right below the monklet directly in the section, and it will also load with the "load more" button.
The Annual Report - Image Left Monklet will display an image on the left, and a title, subtitle, description, and link on the right.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-image-left-monklet|find="annual-report-attendance-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "Subtitle" will display below. The "Image" will display to the left, and the "description" is the paragraph text below. The "Link" and the "CTA Button" will display the button text below the paragraph.
In order to animate the numbers, you will need to add % % around whatever numbers you want animated.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-attendance-stats-monklet|find="annual-report-attendance-stats-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, the "description" is the paragraph text below, and the "icon class" is the icon that displays above the name.
In order to animate the numbers, you will need to add % % around whatever numbers you want animated.
A list of icons available on your site can be found here: https://beltway.org/_assets/fonts/icomoon/demo.html
The Annual Report - Image Right Monklet will display an image on the right, and a title, subtitle, and description on the left. To make the image fullwidth, choose the "fullwidth container" checkbox in the section.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-image-right-monklet|find="annual-report-next-steps-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "Subtitle" will display below. The "Image" will display to the right, and the "description" is the paragraph text below.
In order to animate the numbers, you will need to add % % around whatever numbers you want animated.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-box-stats-monklet|find="annual-report-next-steps-box-stats-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "description" is the paragraph text below. The alternating gray backgrounds is hardcoded and cannot be updated. If there are fewer than 4 items, they will expand to fill the width of the page container.
In order to animate the numbers, you will need to add % % around whatever numbers you want animated.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-columns-monklet|find="annual-report-serve-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "description" is the paragraph text below. The "Link" and the "CTA Button" will display the button text below the paragraph. You can do more or less than 2 items and the columns will expand or contract to fill the space.
The Annual Report - Video Right Monklet will display an image on the right, and a title, subtitle, and description on the left. To make the image fullwidth, choose the "fullwidth container" checkbox in the section.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-video-right-monklet|find="annual-report-story-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "Description" will display below. The "Link" and "CTA Button" will display below the description. The "Embedded Video" will display to the right.
To use this monklet, you will create a link list using the steps below. You will insert the monklet and use the "find=" parameter to display the contents of the link list. An example would look like this: {{annual-report-missions-monklet|find="annual-report-missions-linklist"}}
To add content to the link list, you will go to Content > Link Lists > Add a New Link List. The "Name" of the link list is the title at the top, and the "Subtitle" displays below. The "description" is the paragraph text and the "Link" and the "CTA Button" will display the button text below the paragraph.
