Twig Components

Banner

Banner is a component to be used mainly on homepages, as an hero banner with image, video or slideshow capabities.

{% include "components/banner.twig"
  with {
    css: 'is-fullheight-with-navbar'
    data: banners
  }
%}

• data is the array used for the banner contents, the following schema should be used.

[
  {
    "title": "",
    "subtitle": "",
    "image": "",
    "type": {
      "id": "image"
    },
    "animation": {
      "id": "slide"
    }
  }
]

• type.id can be "image" or "vídeo"

• animation.id can be "slide" or "fade"

Grid

Component used to draw grids of card elements.

{% include "components/grid.twig"
  with {
    id: 'sectionid',
    css: {
      grid: '',
      card: '',
      image: 'has-hover-scale-up',
      title: 'has-text-weight-bold has-text-primary',
      subtitle: '',
      detail: 'class-of-detail-button'
    },
    columns: {
      desktop: 3,
      tablet: 2,
      mobile: 1
    },
    data: arr,
    dataOnly: false,
    hasDetail: false,
    imageMode: 'background',
    animation: {
      type: 'fade',
      duration: 500,
      delay: 500,
      stagger: 25
    }
  }
%}

• columns is a property that allow you to define the number of elements in each breakpoint. Any breakpoint can be used.

• data is the array used for the grid contents, the following schema should be used.

{
  "title": "",
  "subtitle": "",
  "summary": "",
  "image": "",
  "link": ""
}

• dataOnly is a property that is used to add more content dynamically when dealing with pagination, so the default value is false, but should be set to true if the grid is created inside an ajax request and you want to add that content to an existing grid.

• hasDetail if true creates a button with the link of the card

• imageMode is a property that allows to define if the card will use the image as image-background (should be set to background) or as an img tag.

• animation is an object to set animation on the cards, it can be removed and no animation will occur. The valid types of animation is "fade". The delay can create a global delay in miliseconds for the animation and the stagger is the amount of miliseconds of interval of each card animation, if is set to 0 all the cards will show up at the same time, defining a positive value will create a cascade effect on the animation.

Parallax (full width block)

Component used to draw a full width block (image or background-color) with an optional text and button. It's also possible to define the behavior on scroll of the component.

{% include "components/parallax.twig"
  with {
    css: '',
    type: 'none',
    image: '/contents/slide3.jpg',
    backgroundColor: '#333333',
    title: {
      css: 'has-font-weight-bold is-uppercase',
      text: 'Title goes here'
    },
    button: {
      css: 'is-primary',
      text: 'Login here',
      link: 'javascript:UTILS.showModal(\'login\')'
    }
  }
%}

• type property can be none (static background), scroll (uses javascript to make a parallax effect), attached (uses background-attachment, so is more performant)

Modal

Menu

Pagination

Breadcrumb

Search