• Sample Page

Tour of Whakaari/ White Island

Cruise across the Bay of Plenty and explore the inner crater of New Zealand’s most active volcano, Whakaari/White Island. Often described as a once in a lifetime trip and the highlight of a holiday spent in New Zealand, this is not to be missed! Experience roaring fumaroles, amazing colours and the sense of awe you get by stepping foot onto a live volcano!

Discover more

Tour of Whakaari/ White Island

Cruise across the Bay of Plenty and explore the inner crater of New Zealand’s most active volcano, Whakaari/White Island. Often described as a once in a lifetime trip and the highlight of a holiday spent in New Zealand, this is not to be missed! Experience roaring fumaroles, amazing colours and the sense of awe you get by stepping foot onto a live volcano!

Discover more

The Basic Auto Layout

Each column inside the grid is automatically assigned an equal share of the total. The columns are built to respect the layout over the content.

.col
.col
.col
<div class='grid'>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

No Gutters

The padding is built into the grid but can be removed with a modifier class. The padding itself is based on the
8 point grid system
but can be modified in the
variables
file.

.col
.col
.col
<div class='grid grid-nogutter'>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

Percentage Based Columns

Based on the familiar n/12 column system.

.col.col-3
.col.col-9
.col.col-4
.col.col-4
.col.col-4
.col.col-5
.col.col-2
.col.col-2
.col.col-3
<div class='grid'>
  <div class='col col-3'>
    25% (3/12)
  </div>
  <div class='col col-9'>
    75% (9/12)
  </div>
</div>

Flex Grow Columns

Based on
flex-grow
this layout style allows for dynamic content distribution. These columns will respect their given ratio and resist dropping onto a second row unlike a percentage based column.

.col.col-grow-2
.col
.col
.col.col-grow-3
.col.col-grow-2
.col
.col.col-grow-3
.col
<div class='grid'>
  <div class='col col-grow-3'>
    Grow 3 Columns
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

Fixed Columns

Add in the fixed column class and pass the column a defined width or allow content like an image to dictate the desired width. It’s recommended to fill the space with dynamic flex columns however you can mix in percent based columns too. Utilizing a fixed column with only percent based columns will make it difficult to reach 100%.

Fixed 168px
Auto Width
.col.col-fixed
.col
.col
<div class='grid'>
  <div class='col col-fixed' style='width:168px;'>
    col col-fixed
  </div>
  <div class='col'>
    col
  </div>
  <div class='col'>
    col
  </div>
</div>

Mixed Columns

This is the real power of flexbox at work in your layouts.

Fixed 168px
Dynamic Width
.col.col-fixed
.col.col-grow-2
.col
Fixed 168px
Dynamic Width
25% of Total Width
.col.col-fixed
.col.col-grow-2
.col
.col.col-3
<div class='grid'>
  <div class='col col-fixed' style='width:168px;'>
    Fixed Column
  </div>
  <div class='col col-grow-2'>
    Grow 2 Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col col-3'>
    25% (3/12)
  </div>
</div>

Content Alignment

Vertically align the content inside of a column.

.col-top
.col-middle
.col-bottom
<div class='grid'>
  <div class='col col-top' style='height:96px;'>
    Content aligned to top
  </div>
  <div class='col col-middle' style='height:96px;'>
    Content aligned to middle
  </div>
  <div class='col col-bottom' style='height:96px;'>
    Content aligned to bottom
  </div>
</div>

Column Vertical Alignment

Columns alignment relative to each other inside of the
.grid
container.

.col-align-top
.col-align-middle
.col-align-bottom
Tall column expanding
the height of
the grid container
<div class='grid'>
  <div class='col col-align-top'>
    Top Aligned Column
  </div>
  <div class='col col-align-middle'>
    Middle Aligned Column
  </div>
  <div class='col col-align-bottom'>
    Bottom Aligned Column
  </div>
  <div class='col' style='height:112px;'>
    Tall Column
  </div>
</div>

Grid Horizontal Alignment

Apply modifier classes to the
.grid
element to change the alignment of columns.

.grid-start .col.col-6
.grid-center .col.col-3
.grid-center .col.col-3
.grid-end .col.col-6
<div class='grid grid-end'>
  <div class='col col-6'>
    Aligned to the end
  </div>
</div>

Column Distribution

Distribute space around or between columns equally.

.grid-around .col.col-3
.grid-around .col.col-3
.grid-around .col.col-3
.grid-between .col.col-3
.grid-between .col.col-3
.grid-between .col.col-3
<div class='grid grid-between'>
  <div class='col col-3'>
    Equal space between columns
  </div>
  <div class='col col-3'>
    Equal space between columns
  </div>
  <div class='col col-3'>
    Equal space between columns
  </div>
</div>

Column Ordering

Change the order of columns by using the modifier classes
.col-first
to move a column to the first position or
.col-last
to move it to the last position.

1
2
3
1
2
.col-first
.col-last
2
3
<div class='grid'>
  <div class='col col-last'>
    1st Column
  </div>
  <div class='col'>
    2nd Column
  </div>
  <div class='col'>
    3rd Column
  </div>
</div>

Use
.grid-reverse
to reverse the order of all columns.

1
2
3
<div class='grid grid-reverse'>
  <div class='col'>
    1st Column
  </div>
  <div class='col'>
    2nd Column
  </div>
  <div class='col'>
    3rd Column
  </div>
</div>

Grid Nesting

Grids nest easily with no cascading conflicts. Great for complex layouts.

Auto Column

Nested inside
Nested inside
Auto Column
<div class='grid'>
  <div class='col'>
    Auto Column
    <div class='grid'>
      <div class='col'>
        Nested Inside
      </div>
      <div class='col'>
        Nested Inside
      </div>
    </div>
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>

Media Breakpoints

Media breakpoint classes define the screen size a column should go to 100%. The small
.col-sm
snaps to 100% at 480px,
.col-md
at 624px, and
.col-lg
at 744px. The breakpoint classes will overwrite any other percentage or grow based modifier class. Nesting grids can create more complex responsive layouts.

.col.col-md
.col.col-md
.col.col-lg
.col.col-sm
.col.col-5.col-sm
.col.col-lg
.col.col-grow-2.col-md
.col.col-md
.col.col-lg
<div class='grid'>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
  <div class='col'>
    Auto Column
  </div>
</div>
  • My husband and I have just done the early morning sunrise tour. It was a very special experience for us and we would highly recommend it to everyone.

    WendyG84
    Whakatane, New Zealand

  • He gave us an informative and interesting talk about the carvings, and the history of Ngati Porou - both distant and recent. Everyone in the group was very impressed.

    8Hazel8
    Auckland, New Zealand

  • At the site of the phenomenal carvings, Monty shared the stories of Ngati Porou - just fascinating. The picnic was delicious and elegantly presented. A most excellent adventure for visitors from far and near.

    Elisabeth E
    Auckland, New Zealand

FOLLOW US

The seed planting that all visitors get to take part in on one of our tours is for the purpose of native plant re-generation on Maunga Hikurangi. Local, native trees in Raukumara Forest Park include rata, rimu, tawa, totara, kahikatea and beech. 🍒🌲

Be part of the eco-project by joining one of our tours, and experience the incredible views - perfect for a photo opportunity!

Discover more on the ‘Experiences’ page of our website.

📷: @belinda.macdonald 

#nzwinter #tairawhitigisborne #maungahikurangi #mthikurangi #firstlight #gisborne #sunrise #aotearoa #kahikateaberries
Winter is upon us, yet the sun still rises each morning over Maunga Hikurangi. Join us for a day of culture on our Haramai Day Tour Experience! Stand with nine huge, carved sculptures as you listen to stories of our local history.

Find out more on our website under ‘Experiences’. 

#nzwinter #tairawhitigisborne #maungahikurangi #mthikurangi #firstlight #gisborne #sunrise #aotearoa #suncarvings
A great shot of the first glimpse of sunlight from up here on Maunga Hikurangi! @lisaexplorerku started her hike up the maunga at 3:45am to make the most of her trip! 😲 It looks like it was well worth it to get this picture of the sun casting its golden rays 🌞✨

 📷: @lisaexplorerku 

#nzwinter #tairawhitigisborne #maungahikurangi #mthikurangi #firstlight #gisborne #sunrise #aotearoa
Matariki, the Māori New Year, te Tau Hou Māori, was on June 24th. This is best the time to celebrate the past year with family and friends, and to look forward to the future. How did you celebrate over the weekend?

Maunga Hikurangi is the first place in the world to see the start of the new year. ✨🙌

📷: @matarikifestivalakl 

#nzwinter #tairawhitigisborne #maungahikurangi #mthikurangi #firstlight #gisborne #sunrise #aotearoa #matariki
We are getting into the peak of winter now! But misty Maunga Hikurangi will still provide a spectacular sunrise on those clear mornings. If you’re planning to view the first light from the top of our maunga, be sure to wear lots of layers, appropriate footwear and a headtorch. The brisk air will surely wake you up ⛰🌞🧤

Check out our latest blog on our website to see what else you might want to bring.

📷: @mattcrawfordphoto 

#nzwinter #tairawhitigisborne #maungahikurangi #mthikurangi #firstlight #gisborne #sunrise #aotearoa
The winter school holidays are quickly approaching. Looking for something a little bit different to do with the kids? Bundle up and try a day trip with us to the top of Maunga Hikurangi. Less of a commitment for the kids in your group than our sunrise tour, the Haramai Day Tour Experience takes about 4 hours, includes a light lunch featuring local produce and an exhilarating 4WD adventure! 🏔😎

#maungahikurangi #haramaidaytour #tairawhitigisborne #firstlight #gisborne #sunrise #aotearoa
We pride ourselves on being the first to see the sun’s light each day. But our region is home to a number of famous lookouts to watch the sun rise and set from, like the iconic East Cape lighthouse. 

About 20kms from Te Araroa, enjoy a scenic drive there followed by a 20 minute walk up to the lighthouse itself. It might not be as tall as Maunga Hikurangi, but it’s a slice of history and makes for a great Instagram shot while you’re here! ♥

📷: @tairawhitigisbornenz 

#beachraces #carpediem #adventure ##tairawhitigisborne #maungahikurangi #firstlight #gisborne #sunrise #aotearoa
Everyone who does our Te Urunga-Tu Sunrise tour has a unique experience. Greeting the sun’s first rays and planting a native seedling is truly memorable. If you’ve made it to the top of our maunga, what was your highlight?

#tairawhitigisborne #maungahikurangi #firstlight #gisborne #sunrise #aotearoa
Aside from the beautiful views and landscape, our tours also offer a taste of local cuisine and produce. This nourishing lunch prepared by Hati Nati café of kumara salad, kangawaru (a sweetbread made from kumara, corn grit and flour), fruit and juice is a welcome bite after pushing to the top of our maunga! Well done, and hello world! 🥪🌱

#tairawhitigisborne #maungahikurangi #firstlight #gisborne #sunrise #aotearoa
No one can deny the comfort and warmth of a classic Kiwi pie. But what about a paua pie? This unique spin on a cultural fave is what roadside hot spot, Café 35 in Tokomaru Bay,has become known for. So stop in and step up your pie game today! 🥧☕ 

📸: @cafe35toko

#cafe35 #tokomarubay #tairawhitigisborne #maungahikurangi #firstlight #ruatoria #gisborne #sunrise #aotearoa
top