Skip to main content

Banner

Banner displays an image to the full width of the user's screen. There are few options such as setting an image, text, text alignment and overlay color.

Layouts​

Includes the following banner layout types

  • primary
  • primary-full
  • cta
  • cta-primary
  • text
  • parallax
  • wc-bid-primary
  • carousel
  • cta-feature-cards
  • feature
  • feature-carousel

Primary layout​

This layout respects the original ratio of the image. It fits the image to the full width and set the height according to the image ratio.

Primary Full layout​

Primary Full layout displays the image to the full height of the user's screen.

CTA layout​

Provides a container to add call to action Text and a button.

CTA Primary layout​

Similar to CTA layout, but the CTA content is displayed within the banner.

Text layout​

Text layout banner displays a text without an image. The backgorund color can be changed using the apperance value.

This layout accepts a list of banners and displayed on the website in a carousel. The banner behaves as same as the primary banner layout where it displays according to the original ratio of the image.

This layout accepts a list of feature cards and displays at the bottom of the banner. The banner behaves as same as the primary banner layout where it displays according to the original ratio of the image.

This layout displays the image at full height of the user's screen, adds the title, subtitle, and a blurb at the bottom of the banner. The content alignment can be configured.

This layout displays multiple "feature" layout banners with the fade effect animation.

Title​

Displays the entered text on the banner

Alignment​

Alignment on the banner title. There are three main options.

  • center
  • left
  • right

Button​

Display a button with provded text on the center of the banner. The color of the button can be changed using the button appearance value.

Overlay​

Overlay adds a mask on top the banner so that the title text is more prominent to the user. The color of the overlay can be changed using the apperance value.

Foreground Image​

Todo

Component Space​

Component space option is a common field in all the component blocks. This helps to make sure there's space between two components.

There are three options,

  • Below
  • Above
  • None

The default is set to 'below'.

Next Component block
Next Component block
Next Component block
Site: