Pre Footer

Description

The Pre Footer component is a versatile section designed to be placed before the main footer of a web page. It consists of two main areas: a content area for displaying text or other components, and an action area for buttons. The component features a customizable gradient background and responsive layout, making it suitable for various design needs.

Installation

sabaccui add preFooter

Usage

Here are examples of how to use the Pre Footer component in a Storyblok block:

Example with one button

Example with two buttons

Schema

content

• Type: bloks
• Description: Allows adding multiple content components to the left side of the pre-footer.
• Restrictions: Only components with the tag ID 47875 are allowed.

actions

• Type: bloks
• Description: Allows adding multiple button components to the right side of the pre-footer.
• Restrictions: Only button components are allowed.

gradient

• Type: option
• Description: Sets the gradient style for the background of the pre-footer.
• Options:
  • Primary: primary
  • Secondary: secondary
  • Dark: dark
  • Light: light
  • Black: black
  • White: white

Notes

1. The Pre Footer component uses a grid layout with 2 columns to create a responsive design that adapts to different screen sizes.
2. The gradient background is implemented using Tailwind CSS classes and can be easily customized or extended.

Best Practices:

• Keep the content concise and focused to maintain a clean and effective pre-footer section.
• Use contrasting colors for the gradient and text to ensure readability.
• Limit the number of action buttons to avoid overwhelming the user.
• Ensure that the Pre Footer component complements the overall design of your website and doesn't clash with the main footer.