Connect to a smarter energy future

Keywords:

  • hero
  • The default background is bg-light To change background use background class as keyword like: bg-secondary
  • Text underneath the horizontal linegoes to the right column

button

Title

Keyword:

  • hero - but with no image uploaded.
  • Background can be changed with background classes, here bg-secondary is used

Supporting limitless ambition

Discover Management (at Scale)

Features

A default text element

  • Background is set using bg-mint.
  • The text is placed inside a container with: has-container.
  • Some padding is added by a spacer class: py-8
  • Text is styled with the lead

label

Optimise for renewables

Keywords used:

  • img-bottom to get the styling with text and image underneath,
  • container to make sure it doesn't go to the edges of the screen.

The intro text is used as the label

For an smaller image (6 columns instead of 12 columns) also use the keyword img-sm

label

Optimise for renewables

Keywords:

  • Img-right
  • Container

Extra classes added for an background color:

  • For background color: bg-dark (any bg-class can be used)
  • Rounded corners: rounded
  • Padding inside the element so the image isn't stuck to the top: pt-6

label

Optimise for renewables

Keywords:

  • Img-right
  • Container

Extra classes added for an background color:

  • For background color: bg-dark (any bg-class can be used)
  • Rounded corners: rounded
  • Padding inside the element so the image isn't stuck to the top: pt-6

Optimise for renewables

Keywords:

  • Img-left
  • Container

Text in an smaller column

Keyword: columnwidth- and the width of the column. 12 is the full width of the container. So for example if columnwidth-8 is used the text takes 8 of the 12 columns and it is pushed 2 columns from the edge so it stay's centered.

Iconlist

shortcode: iconlist

Extra options:

  • &class= Sets the bootstrap column classes, when it's not used it takes the default: col-xs-12 col-sm-6 col-md-3 mb-4
  • &panel-class= Sets an class on the panel, can be used for changing the color by adding an bg-class
  • &readmore= When used sets an link-text like Read more. Only shows when card is Active.
  • &intro-class= Can be used to change the styling of the introduction text
  • &list-class= Sets an class on the outside of the element, mainly used for creating space around the whole element by adding padding classes
  • keywords the keywords field of the cards itself can also be used to set the color of the cards, that way you can give the individual cards an differt color
  • Take control

    Individual access permissions enabling full control over your operations

  • Take control

    Individual access permissions enabling full control over your operations

  • Take control

    Individual access permissions enabling full control over your operations

  • Take control

    Individual access permissions enabling full control over your operations

Iconlist with extra options:

  • Take control

    Individual access permissions enabling full control over your operations

    More info

  • Take control

    Individual access permissions enabling full control over your operations

  • Take control

    Individual access permissions enabling full control over your operations

  • Take control

    Individual access permissions enabling full control over your operations

Blocklist 3 types

Shortcode: blocklist

Extra options:

  • &type= Sets the type of general styling of the blocklist, defaults to type 1 if not set
  • &class= Sets the bootstrap column classes, when it's not used it takes the default: col-xs-12 col-md-6 col-lg-4
  • &linklabel= Sets an link-text if used for the cards
  • &headingclass= Sets an class on the heading text, can be used for chancing the fontsize or text-color. Can only be used on blocklist type 1
  • &textfield= If set to 1 the textfield of the text of the pages is also shown in the card. Can only be used with blocklist type 2 and 3
  • &nointro= If set to 1 the introduction field of the pages is not shown on the cards
  • &list-class= Sets an class on the outside of the element, mainly used for creating space around the whole element by adding padding classes
  • Keywords The keywords of the page are used for setting an label in the cards. Can only be used with blocklist type 2 and 3

Type 1: default

  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

Type 2

  • label

    Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Button

  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

Type 3

  • label

    Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

    learn more
  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

    learn more
  • Take control

    Individual access permissions enabling full control over your operations access permissions enabling full control over your operations.

    learn more

Textlist

shortcode: textlist. Takes the text field instead of the intro text for the text on the cards

Extra options:

  • &class= Sets the bootstrap column classes, when it's not used it takes the default: col-xs-12 col-md-6 col-lg-4
  • &list-class= Sets an class on the outside of the element, mainly used for creating space around the whole element by adding padding classes
  • Residential

    Feel at home with us

    Our platform provides the essential building blocks for the residential ecosystem of today and tomorrow. We support every charging point, simplify the reimbursement of business electricity costs and make it possible to charge as much as possible on wind and sun, thereby saving both co2 and costs.

  • Residential

    Feel at home with us

    Our platform provides the essential building blocks for the residential ecosystem of today and tomorrow. We support every charging point, simplify the reimbursement of business electricity costs and make it possible to charge as much as possible on wind and sun, thereby saving both co2 and costs.

  • Residential

    Feel at home with us

    Our platform provides the essential building blocks for the residential ecosystem of today and tomorrow. We support every charging point, simplify the reimbursement of business electricity costs and make it possible to charge as much as possible on wind and sun, thereby saving both co2 and costs.

Tablist

Shortcode: tablist

subheading

Optimise for renewables

Tristique sed a mauris quam consectetur tincidunt. Ultricies integer duis sagittis dictum eu nibh nisi. Dui amet sed condimentum rutrum viverra sagittis ut. Amet tellus feugiat elit mattis. Ornare in vitae amet suspendisse diam velit egestas at. Lorem nisi donec euismod turpis pretium.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Counter

Shortcode: counter (This one takes the data from the homepage)

How it works:

The title field is used for the values, it has to be given in this format: Counter: 0:1.49: billion

  • Counter text to let the code know it's an counter
  • Start value
  • End value
  • Some text, this one is optional
  • All have to be split with an :

Extra options

  • &class= Sets the bootstrap column classes, when it's not used it takes the default: col-xs-12 col-lg-6 col-xl-3 mb-4
  • &list-class= Sets an class on the outside of the element, mainly used for creating space around the whole element by adding padding classes
  • 1

    charge points to roam immediately

  • 0 billion

    kWh provided via charging

  • 1 years

    the undisputed smart charging leader

  • 0 billion

    electric km powered

Marquee

Shortcode: gallery with subtype marquee. The parentid is the id of the page where the gallery images are added. (this one takes the logo's from the gallery of the logo home element)

Carousel shortcode takes the pages from the career page:

Widget: carousel

Extra options:

  • &pagedots= set to 1 to show pagedots
  • &prevnext= set to 1 to show prev/next buttons
  • &subtype= set the subtype of the carousel for different styling, but only testimonial is currently used on this website
  • &li-class= Bootstrap columns for setting the width of the carousel cards

Downloads

Shortcode: document. This one takes the data from the downloads page

Extra options

  • The introduction field of an element is used for setting background classes, defaults to bg-gradient-primary
  • EV Smart Charging: Optimising with Renewable Energy

    Download the whitepaper

    Electric vehicle smart charging optimises power distribution and leads to considerable savings for grid operators, charge point operators (CPOs), charge point owners, and EV drivers. Learn how to connect to the future with smart, real-world solutions.

    In this whitepaper, you will learn:

    • What is smart charging?
    • Why use smart charging?
    • How does smart charging work?
    • What is GreenFlux's unique smart charging offer?

  • Eichrecht: what you need to know to operate in Germany

    Download the whitepaper

    Are you a charge point operator (CPO) or an eMobility service provider in Germany? Learn about the German calibration law and how it may apply to your business case.

    In this whitepaper, you will learn:

    • What is Eichrecht and when does it apply?
    • For what business cases does Eichrecht apply?
    • To whom does Eichrecht apply?
    • What opportunities and challenges exist in the market?
    • and a lot more.

  • GreenFlux migrates Eneco's 3,500 charge points

    Download the case study

    GreenFlux successfully migrated Eneco eMobility’s 3,500 charge points to its platform, thereby ensuring the operator’s future business scalability and achieving cost savings, among other benefits.

    Learn how Eneco consolidated a group of legacy charging stations onto the GreenFlux platform while maintaining business continuity and gaining:

    • improved data communications security
    • more efficient asset management
    • price transparency compliance
    • business and operational scalability
    • additional savings

Case studies

Shortcode: caselist. This one takes the data from the case studies page

Extra information

  • It only takes cases that are active

Button Variants

Primary Buttons: btn btn-primary / btn btn-outline-primary

Dark Buttons: btn btn-dark / btn btn-outline-dark

Secondary Buttons: btn btn-secondary / btn btn-outline-secondary

Medium Buttons: btn btn-medium / btn btn-outline-medium

Success Buttons: btn btn-success / btn btn-outline-success

Success-Light Buttons: btn btn-success-light / btn btn-outline-success-light

Success-Soft Buttons: btn btn-success-soft / btn btn-outline-success-soft

Success-Dark Buttons: btn btn-success-dark / btn btn-outline-success-dark

Light Buttons: btn btn-light / btn btn-outline-light

Lighter Buttons: btn btn-lighter / btn btn-outline-lighter

Light-Grey Buttons: btn btn-light-grey / btn btn-outline-light-grey

Mint Buttons: btn btn-mint / btn btn-outline-mint

Info Buttons: btn btn-info / btn btn-outline-info

White Buttons: btn btn-white / btn btn-outline-white

Small Buttons: btn btn-primary btn-sm / btn btn-outline-primary btn-sm

Extra Small Buttons: btn btn-primary btn-xs/ btn btn-outline-primary btn-xs

Btn more: btn-more / btn-more-right / btn-more-hover / btn-more-right-hover

  • Background an text classes give the same color as the buttons.
  • Background classes are used to give an element an background color.
  • Text classes are used to give text an color.

Background Classes (bg-)

  • bg-primary
  • bg-dark
  • bg-secondary
  • bg-medium
  • bg-success
  • bg-success-light
  • bg-success-soft
  • bg-success-dark
  • bg-light
  • bg-lighter
  • bg-light-grey
  • bg-mint
  • bg-info
  • bg-white

Extra backgrounds, used in the downloads page

  • bg-gradient-primary
  • bg-gradient-success
  • bg-gradient-light

Text Classes (text-)

  • text-primary
  • text-dark
  • text-secondary
  • text-medium
  • text-success
  • text-success-light
  • text-success-soft
  • text-success-dark
  • text-light
  • text-lighter
  • text-light-grey
  • text-mint
  • text-info
  • text-white

Margin and padding

  • Margin: Creates space outside the element’s border, pushing it away from surrounding elements. Use classes like m-2 for a general margin or mt-2 for specific top margin. Margin does not affect the element’s actual size, just the distance around it.

  • Padding: Adds space inside the element’s border, between the content and the border. Use classes like p-2 for padding on all sides or pt-2 for specific top padding. Padding increases the total size of the element as it grows the space around the content within the element.

Margin Classes (m-)

  • m-0 - margin: 0 !important;
  • m-1 - margin: 0.25rem !important;
  • m-2 - margin: 0.5rem !important;
  • m-3 - margin: 1rem !important;
  • m-4 - margin: 1.5rem !important;
  • m-5 - margin: 2rem !important;
  • m-6 - margin: 2.5rem !important;
  • m-7 - margin: 3rem !important;
  • m-8 - margin: 3.5rem !important;
  • m-9 - margin: 4rem !important;
  • m-10 - margin: 4.5rem !important;
  • m-11 - margin: 5rem !important;

Margin Side and Axis Classes

Top (mt-)

  • mt-0 through mt-11

Right (mr-)

  • mr-0 through mr-11

Bottom (mb-)

  • mb-0 through mb-11

Left (ml-)

  • ml-0 through ml-11

Horizontal (mx-)

  • mx-0 through mx-11

Vertical (my-)

  • my-0 through my-11

Padding Classes (p-)

  • p-0 - padding: 0 !important;
  • p-1 - padding: 0.25rem !important;
  • p-2 - padding: 0.5rem !important;
  • p-3 - padding: 1rem !important;
  • p-4 - padding: 1.5rem !important;
  • p-5 - padding: 2rem !important;
  • p-6 - padding: 2.5rem !important;
  • p-7 - padding: 3rem !important;
  • p-8 - padding: 3.5rem !important;
  • p-9 - padding: 4rem !important;
  • p-10 - padding: 4.5rem !important;
  • p-11 - padding: 5rem !important;

Padding Side and Axis Classes

Top (pt-)

  • pt-0 through pt-11

Right (pr-)

  • pr-0 through pr-11

Bottom (pb-)

  • pb-0 through pb-11

Left (pl-)

  • pl-0 through pl-11

Horizontal (px-)

  • px-0 through px-11

Vertical (py-)

  • py-0 through py-11