​
Tabs

resources/js/Components/Sections/FeatureTabs.vue

This component will render features as tabs (recommended 3-4 features). You can use it for your most important features.

It accepts 4 properties:

  • data: required, list of features (you can find example in resources/js/Pages/Index.vue)
  • animate: defaults to global animation value, images will animate on tab switch
  • duration: defaults to 0.75 seconds, defines the animation duration
  • scaleOffset: defaults to 0.025, defines the scale value of animation

​
Sections

resources/js/Components/Sections/FeatureSections.vue

This component will render features in rows with images positioned left/right (recommended 2 features minimum). You can use it for your most important features.

It accepts 4 properties:

  • data: required, list of features (you can find example in resources/js/Pages/Index.vue)
  • firstPosition: defaults to right, defined the position of first image
  • animate: defaults to global animation value, images will animate when in viewport
  • class: optional, list of classes to apply to wrapper

​
Cards

resources/js/Components/Sections/FeatureCards.vue

This component will render features as cards in grid layout (up to 3 per row on the biggest screens).

It accepts 5 properties:

  • data: required, list of features (you can find example in resources/js/Pages/Index.vue)
  • centered: defaults to false, defines the content alignment (left or centered)
  • animate: defaults to global animation value, icons will animate when in viewport
  • class: optional, list of classes to apply to wrapper
  • classIcon: optional, list of classes to apply to icon
Key benefitsLogo blocks