Interactions

Learn about interactions, and how to best use them in the Base System

1.0 Interactions

This page provides guidance on implementing interactions that align with the Base System Framework. Interactions enhance the user experience by adding dynamic behaviors to your elements, such as hover effects, animations, or state changes. Proper naming and structuring of interactions ensure consistency and ease of management within your project.

2.0 Naming Format for Interactions

When adding interactions, follow a structured naming format to make them easy to discover and manage within the interactions UI:

Format: [Category] + [Element] + [Action]

• [Category]: Define the broad category of the interaction (e.g., Navigation, FAQ, Testimonial). This helps group similar interactions together.

• [Element]: Specify the section, div, button, or other elements to which the interaction is applied. This indicates where the interaction is happening.

• [Action]: Describe the action taken, such as "Open," "Close," "Hover On," or "Scroll." This clarifies what the interaction does.

3.0 Example Interactions

Here are some examples of interaction names following the above convention:

• Navigation Button Hover On: Adds a hover effect to a button in the navigation.

• FAQ Section Scroll: Triggers an animation when the FAQ section scrolls into view.

• Testimonial Carousel Next Slide: Advances to the next slide in a testimonial carousel when a button is clicked.

Interaction Name	Category	Element	Action
FAQ Accordion Open	FAQ	Accordion	Open
FAQ Accordion Close	FAQ	Accordion	Close
Navigation Dropdown Open	Navigation	Dropdown	Open
Navigation Dropdown Close	Navigation	Dropdown	Close
Testimonial Cards Scroll	Testimonial	Cards	Scroll
Navigation Link On	Navigation	Link	Hover On
Navigation Link Off	Navigation	Link	Hover Off

3.0 General Usage

3.1 Element Type

• Consistency: Use consistent naming conventions across your project to make interactions easy to find and understand.

• Simplicity: Keep interactions simple and intuitive to avoid overwhelming users.

• Performance: Optimize interactions to ensure they don't negatively impact page load times or responsiveness.

However, If an icon has a shadow which is not handled well by SVG then we will use an image.

3.2 Class Naming

Class naming for sections follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Default Sections: Default sections use descriptive names based on the amount of padding

  • Example: Section Large, Section Small, Section X Small

• Custom Sections: Use section as a suffix to the parent category, can use any styles

  • Example: Testmonial Section, Pricing Section