Finsweet Implementation

Modals

These are examples of modal combinations Modal Trigger + Modal using Finsweet Modals.
The attributes

Script needs to be in the <head>

You always need a script to make Finsweet related impementation to work, but this one should be included in the <head> by default

<!-- [Attributes by Finsweet] Modal -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-modal@1/modal.js"></script>

Finsweet Open ID (trigger), Finsweet Close ID (close button) and Finsweet Modal ID's (modal) numbers followed by the dash(-) always has to stay the same, in order for the modal to open.

‍

Example:

  • Finsweet Open ID => "open-1234"
  • Finsweet Close ID => "close-1234"
  • Finsweet Modal ID => "modal-1234

Current IDs
Location modal - has none uses the default, open, close and modal
Course modals - from 1000 to 1500
Waiver modal - uses 9999
Supervision ratio modals - from 3000 to 3500
‍

‍Read more in the Finsweet Modal Documentation

‍

‍

Combination 1: VerticalCard + CourseModal

In this case, the Vertical Card includes the Finsweet Open ID (trigger) props and the CoursesModal includes the Finsweet Close ID (close button) and Finsweet Modal ID's (modal) props.

So all you need to do is add the same numbered ID's n the props!

Name

Left Text

Small text

Right Text

Bottom Left Text

Bottom Left Text

Intro to Bouldering

Heading

Members $150

Heading

Heading
Heading

Unordered list

  • Item A
  • Item B
  • Item C

Button Text

Combination 2: Supervision Card + Supervision Modal

In this case, the SupervisionCard includes the Finsweet Open ID (trigger) props and the SupervisionModal includes the Finsweet Close ID (close button) and Finsweet Modal ID's (modal) props.

Heading
Heading

Supervision Ratios

Heading

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Combination 3: Create your own trigger + Simple Modal

If you don't want to use The VerticalCard or the SupervisionCard, you can always add the Open ID to another trigger.
In this case just add the attribute fs-modal-element="open-XXXX" to the trigger element

Click Me

Modal Title

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

CMS Tabs

We mainly use CMS Tabs for the ImageGallery Section, which is used in
- Coaches & Instructors Section in Yoga Page, Courses Page & Youth Page.
- Partners Section in Community Events Page

Insert Script

As it says on Step 1 on the CMS Tabs Page, copy the Script & paste it inside the <head> of the page where you want to use the Coaches & Instructors Section or Partners Section. In the Webflow case, it will be inside page settings custom code.

<!-- [Attributes by Finsweet] CMS Tabs -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmstabs@1/cmstabs.js"></script>