Fonts

font-3XL
font-3XL--light
font-XXL
font-XXL--light
font-XL
font-XL--light
font-L
font-L--light
font-M
font-M--bold
font-M--light
font-S
font-XS
font-XXS

Colors

Grid
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Left
Right
Main
Full
Span 4
Span 4
Span 4
Span 4
Span 4

Icons

buttons

{% include button with {
    title: "Mist Button",
    color: "mist",
  }
%}
{% include button with {
    title: "Smoke Button",
    color: "smoke",
  }
%}
{% include button with {
    title: "Silver Button",
    color: "silver",
  }
%}
{% include button with {
    title: "Iron Button",
    color: "iron",
  }
%}
{% include button with {
    title: "Slate Button",
    color: "slate",
  }
%}
{% include button with {
    title: "Charcoal Button",
    color: "charcoal",
  }
%}
{% include button with {
    title: "Dark Button",
    color: "dark",
  }
%}
{% include button with {
    title: "Angular Button",
    classes: ["angular"],
  }
%}
{% include button with {
    title: "View All Equipment",
    classes: ["angular"],
    icon: "arrow--right",
    color: "mist",
  }
%}
{% include button with {
    title: "Call to Action",
    classes: ["angular","ghost"],
    animation: "pushRight",
    icon: "arrow--right",
  }
%}
{% include button with {
    title: "Back",
    classes: ["angular","ghost"],
    icon: "arrow--left",
    animation: "translateLeft",
    order: "iconLeft",
  }
%}
{% include button with {
    title: "Next",
    classes: ["angular","ghost"],
    icon: "arrow--right",
    animation: "translateRight",
  }
%}
{% include button with {
    title: "call to action",
    classes: ["angular","ghost"],
    icon: "arrow--left",
    order: "iconLeft",
    color: "red-100",
    disabled: "true",
  }
%}

button links

{% include buttonLink with {
    title: "Read More",
  }
%}
Read More

button icons

{% include buttonIcon with {
    icon: "close",
  }
%}
{% include buttonIcon with {
    icon: "close",
    classes: ["ghost"],
  }
%}
{% include buttonIcon with {
    icon: "arrow--right",
    animation: "translateRight",
  }
%}
{% include buttonIcon with {
    icon: "arrow--right",
    classes: ["ghost"],
    disabled: "true",
  }
%}
{% include buttonIcon with {
    icon: "plus",
    animation: "rotate",
    open: "false",
    color: "mist",
  }
%}
{% include buttonIcon with {
    icon: "plus",
    animation: "rotate",
    open: "true",
    color: "mist",
  }
%}
{% include buttonDownload with {
  }
%}
{% include buttonScrollSkip with {
    scrollLabel: "Scroll",
    skipLabel: "Skip",
  }
%}
{% include buttonMenu with {
    title: "Menu",
    state: "close",
  }
%}
{% include buttonPhone with {
  }
%}
{% include buttonSearch with {
    labels: {"searchFieldPlaceholder":"Search text","searchBtn":"Search"},
    state: "closed",
  }
%}
{% include buttonSearch with {
    labels: {"searchFieldPlaceholder":"Search text","searchBtn":"Search"},
    state: "open",
  }
%}

cards

{% include card 
  with {
    card: [object Object],
  }
%}
Equipment Highlight

ROE Vanish V8T mobile LED Display.

Title 2

Title 3

{% include cardCta 
  with {
    text: Keen to join our Team? Or interested in Faber Academy?,
    tagline: Interest in Faber?,
    link: [object Object],
  }
%}
 
{% include cardNews 
  with {
    post: [object Object],
  }
%}
#
Title of a news post lorem ipsum dolores verante.
Praesent eget venenatis ex, eget mollis eros. Nullam semper nisi sapien, id preti...
d M Y 
{% include cardProduct 
  with {
    post: [object Object],
  }
%}
#
ROE Black Quartz
p / r / o / d / u / c / t / t / y / p / e 
{% include cardProduct 
  with {
    post: [object Object],
  }
%}
#
ROE Black Quartz
p / r / o / d / u / c / t / t / y / p / e 
{% include cardSolution 
  with {
    post: [object Object],
    number: 2,
  }
%}
Live events.
Lorem ipsum dolor sit amet. Quisque non enim ipsum duis commodo.
02
# 
{% include cardTeam 
  with {
    name: Jan Jonker,
    role: AV Technician,
    image: [object Object],
  }
%}

Colors

Icons

buttons

{% include button with {
    title: "Mist Button",
    color: "mist",
  }
%}
{% include button with {
    title: "Smoke Button",
    color: "smoke",
  }
%}
{% include button with {
    title: "Silver Button",
    color: "silver",
  }
%}
{% include button with {
    title: "Iron Button",
    color: "iron",
  }
%}
{% include button with {
    title: "Slate Button",
    color: "slate",
  }
%}
{% include button with {
    title: "Charcoal Button",
    color: "charcoal",
  }
%}
{% include button with {
    title: "Dark Button",
    color: "dark",
  }
%}
{% include button with {
    title: "Angular Button",
    classes: ["angular"],
  }
%}
{% include button with {
    title: "View All Equipment",
    classes: ["angular"],
    icon: "arrow--right",
    color: "mist",
  }
%}
{% include button with {
    title: "Call to Action",
    classes: ["angular","ghost"],
    animation: "pushRight",
    icon: "arrow--right",
  }
%}
{% include button with {
    title: "Back",
    classes: ["angular","ghost"],
    icon: "arrow--left",
    animation: "translateLeft",
    order: "iconLeft",
  }
%}
{% include button with {
    title: "Next",
    classes: ["angular","ghost"],
    icon: "arrow--right",
    animation: "translateRight",
  }
%}
{% include button with {
    title: "call to action",
    classes: ["angular","ghost"],
    icon: "arrow--left",
    order: "iconLeft",
    color: "red-100",
    disabled: "true",
  }
%}

button links

{% include buttonLink with {
    title: "Read More",
  }
%}
Read More

button icons

{% include buttonIcon with {
    icon: "close",
  }
%}
{% include buttonIcon with {
    icon: "close",
    classes: ["ghost"],
  }
%}
{% include buttonIcon with {
    icon: "arrow--right",
    animation: "translateRight",
  }
%}
{% include buttonIcon with {
    icon: "arrow--right",
    classes: ["ghost"],
    disabled: "true",
  }
%}
{% include buttonIcon with {
    icon: "plus",
    animation: "rotate",
    open: "false",
    color: "mist",
  }
%}
{% include buttonIcon with {
    icon: "plus",
    animation: "rotate",
    open: "true",
    color: "mist",
  }
%}
{% include buttonDownload with {
  }
%}
{% include buttonScrollSkip with {
    scrollLabel: "Scroll",
    skipLabel: "Skip",
  }
%}
{% include buttonMenu with {
    title: "Menu",
    state: "close",
  }
%}
{% include buttonPhone with {
  }
%}
{% include buttonSearch with {
    labels: {"searchFieldPlaceholder":"Search text","searchBtn":"Search"},
    state: "closed",
  }
%}
{% include buttonSearch with {
    labels: {"searchFieldPlaceholder":"Search text","searchBtn":"Search"},
    state: "open",
  }
%}

cards

{% include card 
  with {
    card: [object Object],
  }
%}
Equipment Highlight

ROE Vanish V8T mobile LED Display.

Title 2

Title 3

{% include cardCta 
  with {
    text: Keen to join our Team? Or interested in Faber Academy?,
    tagline: Interest in Faber?,
    link: [object Object],
  }
%}
 
{% include cardNews 
  with {
    post: [object Object],
  }
%}
#
Title of a news post lorem ipsum dolores verante.
Praesent eget venenatis ex, eget mollis eros. Nullam semper nisi sapien, id preti...
d M Y 
{% include cardProduct 
  with {
    post: [object Object],
  }
%}
#
ROE Black Quartz
p / r / o / d / u / c / t / t / y / p / e 
{% include cardProduct 
  with {
    post: [object Object],
  }
%}
#
ROE Black Quartz
p / r / o / d / u / c / t / t / y / p / e 
{% include cardSolution 
  with {
    post: [object Object],
    number: 2,
  }
%}
Live events.
Lorem ipsum dolor sit amet. Quisque non enim ipsum duis commodo.
02
# 
{% include cardTeam 
  with {
    name: Jan Jonker,
    role: AV Technician,
    image: [object Object],
  }
%}