This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Paragraphs

1: 1 Column
2: 2 Columns
3: 3 Columns
4: 4 Columns
5: All Amenities
6: Banner
7: Blog Posts Listing
8: Branches Popup (All)
9: Branches Popup (Class)
10: Categories Listing
11: Class Location
12: Class Sessions
13: Classes Listing
14: Code
15: Featured Blog Posts
16: Featured Content
17: Featured Highlights
18: Featured News Posts
19: Gallery
20: Grid columns
21: Grid Content
22: Group Schedules
23: Latest Blog Posts
24: Latest Blog Posts (Branch)
25: Latest Blog Posts (Camp)
26: Latest News Posts
27: Latest News Posts (Branch)
28: Latest News Posts (Camp)
29: Limited Time Offer
30: Location finder
31: Location finder filters
32: Membership info
33: Microsites menu
34: News Posts Listing
35: Program Registration (Daxko)
36: Promo Card
37: Schedule search form
38: Schedule search list
39: Secondary Description and Sidebar
40: Session Time
41: Simple Content
42: Small Banner
43: Social Post Listing
44: Social Share Icons
45: Story Card
46: Teaser
47: Webform

Welcome to YMCA Website Services Paragraphs.

Paragraphs are bits of content, components, from component based design ideology. In a scope of YMCA Website Services architecture paragraphs are based on Paragraphs Drupal module.

The core idea of paragraphs is to have a nice looking and behaving widget for adding predefined content blocks right in place, without referencing external entities. Keep in mind, that paragraphs are not reusable types. For having reusable type look for blocks or entities in terms of Drupal 8.

Paragraphs were created for making UX better and super convenient.

1 - 1 Column

This is a paragraph type that will be used for implements a paragraph with 1 column.

Fields

Name	Machine name	Required	Description
Line Above	field_prfg_display_line_above	No	Display a line above the column.
Column	field_prgf_1c_column	No	Enter column body.
Paragraph Title	field_prgf_1c_title	No	Enter title to display at the top of 1 column paragraph.
Paragraph Description	field_prgf_1c_description	No	Enter description to display under the 1 column paragraph title.

2 - 2 Columns

This is a paragraph type that will be used for implements a paragraph with 2 column.

Fields

Name	Machine name	Required	Description
Line Above	field_prfg_display_line_above	No	Display a line above the column.
Left Column	field_prgf_2c_left	No	Enter left column body.
Right Column	field_prgf_2c_right	No	Enter right column body.

3 - 3 Columns

This is a paragraph type that will be used for implements a paragraph with 3 column.

Fields

Name	Machine name	Required	Description
Line Above	field_prfg_display_line_above	No	Display a line above the column.
Left Column	field_prgf_3c_left	No	Enter left column body.
Center Column	field_prgf_3c_center	No	Enter center column body.
Right Column	field_prgf_3c_right	No	Enter right column body.
Paragraph Title	field_prgf_title	No	Enter title to display at the top of 3 columns paragraph.

4 - 4 Columns

This is a paragraph type that will be used for implements a paragraph with 4 column.

Fields

Name	Machine name	Required	Description
Line Above	field_prfg_display_line_above	No	Display a line above the column.
First Column	field_prgf_4c_1st	No	Enter first column body.
Second Column	field_prgf_4c_2nd	No	Enter second column body.
Third Column	field_prgf_4c_3rd	No	Enter third column body.
Fourth Column	field_prgf_4c_4th	No	Enter forth column body.
Button	field_prgf_4c_button	No	Button with link to display under 4 column paragraph
Paragraph Title	field_prgf_title	No	Enter title to display at the top of 4 columns paragraph.
Paragraph Description	field_prgf_description	No	Enter description to display under the 4 columns paragraph title.

5 - All Amenities

Provide a paragraph with a table view shows list of Branches.

Fields

Name	Machine name	Required	Description
All amenities	field_field_prgf_amnts_view	No	Predefined reference to a view to display all amenities.
Title	field_prgf_title	No	Enter title which is going to be displayed on top of the paragraph.

6 - Banner

This is a paragraph type that will be used for the banner content.

Fields

Name	Machine name	Required	Description	Notes
Headline	field_prgf_headline	Yes	Headline of the banner.	Plain text, 255 characters
Color	field_prgf_color	Yes	Reference field for choosing the term from “Color” vocabulary.
Image	field_prgf_image	No	Entityreference to media image. Single value.
Description	field_prgf_description	No	WYSIWYG field without summary.
Link	field_prgf_link	No	Link field that should store internal and external links.

7 - Blog Posts Listing

This is dynamic paragraph that renders the latest blog posts and utilizes exposed filters.

Location
Category
Text

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

8 - Branches Popup (All)

This is dynamic paragraph that renders the locations selection popup, based on current node.

Relates to:

[Schedule search list](Schedule search list.md)
[Classes Listing](Classes Listing.md)

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

9 - Branches Popup (Class)

This is dynamic paragraph that renders the locations selection popup, based on current node.

Relates to:

[Class Sessions](Class Sessions.md)
[Class Location](Class Location.md)

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

10 - Categories Listing

This is dynamic paragraph that renders all published categories according to current program page.

It uses sticky at the top option and order items based on published date(newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

11 - Class Location

This is dynamic paragraph that renders the locations class location view mode, based on url query parameter location with a valid id.

Relates to [Branches Popup (Class)](Branches Popup (Class).md).

When the page has a location parameter the Branches Popup paragraph will make an “Edit” link on this paragraph visible. That link triggers the Branches Popup to open.

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

12 - Class Sessions

This is dynamic paragraph that renders the class session instances, based on url query parameter location with a valid id.

Relates to [Branches Popup (Class)](Branches Popup (Class).md).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

Displayed table

Location(should be displayed in case if &location=% not in the URL. Otherwise should be hiddedn.
Time + date
Registration(link)
Details
- Online registration
- Ticket required
- In membership
Age Min - Max

Use cases

Use case 3: Class page WITHOUT location popup 3.1 Location in specified URL

When I open Class page WITHOUT location popup on page
And I have location=% in the URL
We skip cookie whether is empty or exist
Results should be filtered based on location from URL
In sidebar we should see location teaser

3.2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

When I open Class page WITHOUT location popup on page
And I don’t have a preferred branch
Or I have a preferred branch
And I don’t have location=% in the URL
Results should contain all branches
In sidebar we should see “All locations….”

Use case 4: Class page WITH location popup 4.1 Location in specified URL

When I open Class page WITH location popup on page
And I have location=% in the URL
We skip cookie whether is empty or exist
Results should be filtered based on location from URL
In sidebar we should see location teaser
Location is sidebar should have “Edit” link that will open location popup

4.2 Preferred branch is empty and no location in URL or Preferred branch is selected and no location in URL

When I open Class page WITH location popup on page
And I don’t have a preferred branch
Or I have a preferred branch
And I don’t have location=% in the URL
Results should contain all branches
In sidebar we should see “All locations….”
Location popup should be shown (Unless only one location is associated with the class)

13 - Classes Listing

and classes listing filters

Classes Listing - should display all published classes grouped by activity.

Classes Listing Filters - this paragraph should disply filter form for “Classes Listing” with following fields:

Location
Program
Sub-program
Activity

Relates to [Branches Popup (All)](Branches Popup (All).md).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

Use cases

Use case 1: Classes Listing paragraph on a Program subcategory page WITHOUT location popup paragraph 1.1 Preferred branch is selected and no location in URL

When I open Program subcategory page with Classes Listing WITHOUT location popup on page
And I have a preferred branch
And I don’t have location=% in the URL
Filter by location should be predefined based on cookie
Results should be filtered

1.2 Preferred branch is empty and no location in URL

When I open Program subcategory page with Classes Listing WITHOUT location popup on page
And I don’t have a preferred branch
And I don’t have location=% in the URL
Filter by location should show “All”
Results should be shown for all branches

1.3 Location in specified URL

When I open Program subcategory page with Classes Listing WITHOUT location popup on page
And I have location=% in the URL
We skip cookie whether is empty or exist
Filter by location should show branch from URL
Results should be filtered

Use case 2: Classes Listing paragraph on a Program subcategory page WITH location popup 2.1 Preferred branch is selected and no location in URL

When I open Program subcategory page with Classes Listing WITH location popup on page
And I have a preferred branch
And I don’t have location=% in the URL
Location popup shouldn’t be shown
Filter by location should be predefined based on cookie
Results should be filtered

2.2 Preferred branch is empty and no location in URL

When I open Program subcategory page with Classes Listing WITH location popup on page
And I don’t have a preferred branch
And I don’t have location=% in the URL
Filter by location should show “All”
Results should be shown for all branches
Location popup should be shown

2.3 Location in specified URL

When I open Program subcategory page with Classes Listing WITH location popup on page
And I have location=% in the URL
We skip cookie whether is empty or exist
Location popup shouldn’t be shown
Filter by location should show branch from URL
Results should be filtered

14 - Code

Provide paragraph containing a Code block. Can be used to embed Youtube video for instance.

Fields

Name	Machine name	Required	Description
Code	field_prgf_code_block	Yes	Block reference to Code block. Create a new one or pick up an existed Code block.

15 - Featured Blog Posts

This is a paragraph type that will be used for the featured stories.

Fields

Name	Machine name	Required	Description
Headline	field_prgf_headline	No	Headline of the banner.
Blog Posts	field_fblog_posts	Yes	Multiple values. Reference field to Blog posts.

16 - Featured Content

This is a paragraph type that will be used for the featured content.

Fields

Name	Machine name	Required	Description
Headline	field_prgf_headline	No	Headline of the featured content.
Description	field_prgf_description	No	Textarea for the description/body with WYSIWYG, without summary.
Link	field_prgf_link	No	Link field that supports internal and external URLs.
Style	field_prgf_grid_style	Yes	Select list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Column description	field_prgf_fc_clm_description	No	Multiple values. Textarea for the column with WYSIWYG, without summary.

17 - Featured Highlights

Provides a paragraph containing blocks of specific types positioned as 2, 3 or 4 blocks per row.

Fields

Name	Machine name	Required	Description
Title	field_prgf_title	No	Paragraph title.
Style	field_prgf_grid_style	Yes	Select list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row.
Featured Highlights block	field_prgf_block_ref_unlim	Yes	Create a new one or pick up an existing block of given types: Featured Highlight Block, Basic Block, Simple Block, Date block.

18 - Featured News Posts

This is a paragraph type that will be used for the featured news.

Fields

Name	Machine name	Required	Description
Headline	field_prgf_headline	No	Headline of the banner.
News Posts	field_fnews_posts	Yes	Multiple values. Reference field to News posts.

19 - Gallery

This is a paragraph type that will be used for the gallery content.

Fields

Name	Machine name	Required	Description
Headline	field_prgf_headline	Yes	Headline of the gallery.
Description	field_prgf_description	No	WYSIWYG field without summary.
Link	field_prgf_link	No	Link field that should store internal and external links.
Images	field_prgf_images	No	Entityreference to media image. Multiple values.

20 - Grid columns

This is a paragraph type that will be used for field_grid_columns the in Grid Content paragraph.

Fields

Name	Machine name	Required	Description
Description	field_prgf_grid_clm_description	No	Textarea for the description/body with WYSIWYG, without summary.
Headline	field_prgf_clm_headline	No	Headline of the grid content.
Icon	field_prgf_clm_icon	No	Entityreference to media asset. Should allow to upload svgs.
Icon class	field_prgf_clm_class	No	Input field that allows to add the font-awesome icons needed. Description - “Provide a “Font Awesome” icon mane, e.g. flag, car, info. Overrides image Icon.”
Link	field_prgf_clm_link	No	Link field that supports internal and external URLs.

21 - Grid Content

This is a paragraph type that will be used for the grid content stories.

Fields

Name	Machine name	Required	Description
Style	field_prgf_grid_style	Yes	Select list with following values: 2:2 items per row, 3:3 items per row, 4:4 items per row
Content	field_grid_columns	Paragraph	Grid columns
Description	field_prgf_grid_clm_description	No	Textarea for the description/body with WYSIWYG, without summary.
Headline	field_prgf_clm_headline	No	Headline of the grid content.
Icon	field_prgf_clm_icon	No	Entityreference to media asset. Should allow to upload svgs.
Icon class	field_prgf_clm_class	No	Input field that allows to add the font-awesome icons needed. Description - “Provide a “Font Awesome” icon mane, e.g. flag, car, info. Overrides image Icon.”
Link	field_prgf_clm_link	No	Link field that supports internal and external URLs.

22 - Group Schedules

This is dynamic paragraph that renders the group schedules from GroupEx Pro.

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and is configurable in form display.

23 - Latest Blog Posts

This is dynamic paragraph that renders the latest blog posts that are promoted to the front page.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

24 - Latest Blog Posts (Branch)

This is dynamic paragraph that renders the latest blog posts associated with a branch.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

25 - Latest Blog Posts (Camp)

This is dynamic paragraph that renders the latest blog posts associated with a camp.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

26 - Latest News Posts

This is dynamic paragraph that renders the latest news posts that are promoted to the front page.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

27 - Latest News Posts (Branch)

This is dynamic paragraph that renders the latest news posts associated with a branch.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

28 - Latest News Posts (Camp)

This is dynamic paragraph that renders the latest news posts associated with a camp.

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

29 - Limited Time Offer

This Paragraph add limited time offer for Home Page based on Landing Page CT.

Fields

Name	Machine name	Required	Description
Subtitle	field_lto_subtitle	No	Enter subtitle for Limited time offer.
Link	field_lto_link	No	Add link for Latest time offer.
Title	field_lto_title	No	Enter title for the Limited Time Offer.

30 - Location finder

This is paragraph that renders the Location finder block.

Location finder block contains locations views displays with branches, camps and facilities.

Fields

Name	Machine name	Required	Description
Location finder	field_prgf_location_finder	No	Block reference to the location_finder block. Should have default value and should be hidden in form display.

31 - Location finder filters

This is paragraph that renders the Location finder map with pins and filters.

Fields

Name	Machine name	Required	Description
Location finder	field_prgf_location_finder	No	Block reference to the location_finder block. Should have default value and should be hidden in form display.
Tags style	field_prgf_lf_tags_style	Yes	Tags style that will be used for map tags filter. Default - checkboxes. Second option is multiselect widget with checkboxes.

32 - Membership info

This is a paragraph type that will be used for field_mbrshp_info the in Membership CT.

Fields

Name	Machine name	Required	Description
Location	field_mbrshp_location	No	Select list with locations (branches). Single value.
Link	field_mbrshp_link	No	Link field to provide the membership redirect URL.
Join Fee	field_mbrshp_join_fee	No	Dollar value for how much someone has to pay to join.
Monthly Rate	field_mbrshp_monthly_rate	No	Dollar value for the monthly fee of the membership.

33 - Microsites menu

Provide paragraph containing a microsites menu block.

Fields

Name	Machine name	Required	Description
Menu Block	field_prgf_block_ref	Yes	Block reference to the view/block. Create a new one or pick up an existed menu block.
Hide Main Menu	field_prgf_ms_menu_hide_menu	No	Whether to hide or not the main website menu.

34 - News Posts Listing

This is dynamic paragraph that renders the latest news posts and utilizes exposed filters.

Location
Category
Text

It uses sticky at the top option and order items based on published date (newest at the top).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

35 - Program Registration (Daxko)

This is paragraph that renders the Programs Search Block.

Programs Search Block provides a form to search programs from Daxko.

Relates to: Daxko

Daxko & Program Registration (Daxko) configuration must be setup before the Program Registration paragraph will work.

Configuration setting at /admin/config/development/daxko/programs-search

Fields

Name	Machine name	Required	Description
Program registration block	field_prgf_reg_block	No	Block reference to the programs_search_block block. Should have default value and should be hidden in form display.

36 - Promo Card

This is a Paragraph type that will be used for the Promo Cards.

Fields

Name	Machine name	Required	Description
Title	field_prgf_title	No	Title of the Promo Card.
Headline	field_prgf_headline	Yes	Headline of the Promo Card.
Description	field_prgf_description	No	WYSIWYG field without summary.
Link	field_prgf_link	No	Link field that should store internal and external links.

37 - Schedule search form

This is dynamic paragraph that renders the session instances filters for [Schedule search list](Schedule search list.md).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

38 - Schedule search list

This is dynamic paragraph that renders the session instances, based on url parameters, and or filters from [Schedule search form](Schedule search form.md).

Relates to [Branches Popup (All)](Branches Popup (All).md).

Fields

Name	Machine name	Required	Description
Block	field_prgf_block	Yes	Block reference to the view/block. Should have default value and should be hidden in form display.

Use cases

Use case 1: Schedule search list paragraph on a page WITHOUT location popup paragraph 1.1 Preferred branch is selected and no location in URL

When I open Schedule search list page WITHOUT location popup on page
And I have a preferred branch
And I don’t have location=% in the URL
Filter by location should be predefined based on cookie
Results should be filtered

1.2 Preferred branch is empty and no location in URL

When I open Schedule search list page WITHOUT location popup on page
And I don’t have a preferred branch
And I don’t have location=% in the URL
Filter by location should show “All”
Results should be shown for all branches

1.3 Location in specified URL

When I open Schedule search list page WITHOUT location popup on page
And I have location=% in the URL
We skip cookie whether is empty or exist
Filter by location should show branch from URL
Results should be filtered

Use case 2: Schedule search list paragraph on a page WITH location popup 2.1 Preferred branch is selected and no location in URL

When I open Schedule search list page WITH location popup on page
And I have a preferred branch
And I don’t have location=% in the URL
Location popup shouldn’t be shown
Filter by location should be predefined based on cookie
Results should be filtered

2.2 Preferred branch is empty and no location in URL

When I open Schedule search list page WITH location popup on page
And I don’t have a preferred branch
And I don’t have location=% in the URL
Filter by location should show “All”
Results should be shown for all branches
Location popup should be shown

2.3 Location in specified URL

When I open Schedule search list page WITH location popup on page
And I have location=% in the URL
We skip cookie whether is empty or exist
Location popup shouldn’t be shown
Filter by location should show branch from URL
Results should be filtered

39 - Secondary Description and Sidebar

This is a Paragraph type that will be used for the paragraphs with left (secondary description) and right (sidebar) blocks.

Fields

Name	Machine name	Required	Description
Left Column	field_prgf_left_column_block	No	Block reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.
Right Column	field_prgf_right_column_block	No	Block reference to: Basic Block, Code Block, Date block or Simple Block. Create a new one or pick up an existed block.

40 - Session Time

This is a paragraph type that will be used for field_session_time the in Session CT.

Fields

Name	Machine name	Required	Description
Date & Time	field_session_time_date	No	This will use Drupal date/time fields & should be a single date field with ’end date’ and ’end time’ option enabled.
Days	field_session_time_days	No	Checkboxes with following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

41 - Simple Content

Simple Content is used for adding text to the pages.

Fields

Name	Machine name	Required	Description
Content	field_prgf_description	Yes	WYSIWYG field without summary.

42 - Small Banner

This is a paragraph type that will be used for the banner content.

Fields

Name	Machine name	Required	Description	Notes
Color	field_prgf_color	Yes	Reference field for choosing the term from “Color” vocabulary.
Headline	field_prgf_headline	Yes	Headline of the Small banner.	Plain text, 255 characters
Image	field_prgf_image	No	Entityreference to media image. Single value.
Description	field_prgf_description	No	WYSIWYG field without summary.

43 - Social Post Listing

This is dynamic paragraph that renders the latest social posts that were imported from social networks.

Fields

Name	Machine name	Required	Description
Title	field_prgrf_sl_title	No	Title for block with social posts.
Description	field_prgrf_sl_description	No	Description for block with social posts.
Social List	field_prgrf_sl_block	No	Reference to views block which select posts and show them as masorny grid.

44 - Social Share Icons

This is a paragraph type that will be used for the add social media share. See more How to configure AddThis

Fields

Name	Machine name	Required	Description	Notes

45 - Story Card

This is a Paragraph type that will be used for the Story Cards.

Fields

Name	Machine name	Required	Description
Title	field_prgf_title	No	Title of the Story Card.
Headline	field_prgf_headline	Yes	Headline of the Story Card.
Link	field_prgf_link	No	Link field that should store internal and external links.

46 - Teaser

This is a paragraph type that will be used for the teaser content.

Fields

Name	Machine name	Required	Description
Title	field_prgf_title	No	Title of the Teaser.
Image	field_prgf_image	No	Entityreference to media image. Single value.
Description	field_prgf_description	No	WYSIWYG field without summary.
Link	field_prgf_link	No	Link field that should store internal and external links.

47 - Webform

This is a paragraph type that will be used for the embedding webforms.

Fields

Name	Machine name	Required	Description
Embedded Webform	field_prgf_webform	No	Embedded webform entityreference (select). Single value.
Default webform submission data (YAML)	field_prgf_webform_default_data	No	YAML code for passing in default values to webform.
Webform status	field_prgf_webform_status	No	Status of webform on render. Radio with 2 options, open or closed (Closed prevents further submissions).