AQWA - Design System 🎨

Colors

General

You can copy any of these colours for background-color or color

    Colors for Typography

    Examples of the above swatches applied to typography.

    Backgrounds

    .bg-wavy

    .bg-gradient-1

    Typography

    f-reset (one level)

    f-reset-all (nested)

    Use this to unseat baked in styles for h1 to h6 before applying display styles.

    h1: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h2: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h3: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h4: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h5: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea
    h6: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h1 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h2 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h3 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h4 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    h5 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea
    h6 reset: Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    tagline-plain

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    This is somehow not the same as below so this should be investigated.

    tagline

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    This is somehow not the same as below so this should be investigated.

    f-tagline-a

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    f-tagline-a f-tagline-a--nude

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    f-tagline-a--large

    Dine Beneath the sea Dine Beneath the sea Dine Beneath the sea

    f-display-a

    Heading Here

    Nested inside copy classes

    Heading Here

    f-display-b

    f-display-b--large

    f-display-b--small

    f-display-b--xsmall

    Heading Here

    Heading Here Large

    Heading Here Small

    Heading Here XSmall

    f-display-c

    f-display-c--alt

    Heading Here

    Heading Here

    f-display-d

    Heading Here

    f-display-e

    Heading Here

    f-display-f

    Heading Here

    f-display-g

    Heading Here

    f-display-h

    Heading Here

    f-display-i

    Heading Here

    f-copy-b

    f-copy-b--alt

    f-copy-b2

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    Soft .f-reset

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Harder .f-reset-all

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.

    f-copy-c

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    f-copy-d

    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    ul.small-bullet-list

    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit.
    • Lorem, ipsum dolor sit amet consectetur adipisicing.
    • Lorem ipsum dolor sit amet.

    .f-list-a.f-copy-b

    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit.
    • Lorem, ipsum dolor sit amet consectetur adipisicing.
    • Lorem ipsum dolor sit amet.

    Icons

    General

    18-plus
    anchor
    assembly
    baby-face
    binoculars
    book
    bus
    calendar
    calendar-cross
    car
    car-front
    caution-sign
    check
    clock
    coffee
    compass
    document
    eat
    employee
    eye
    face-mask
    facilities
    fish
    flag
    flippers
    gift
    graduation
    heart
    heart-banner
    home
    ice-cream
    important
    jellyfish
    life-jacket
    life-jacket-water
    lightning
    logo-letter
    map
    map-marker
    mermaid
    mobile-phone
    music
    music-note
    needle
    people
    phone
    play-room
    playground
    resource
    shield-heart
    shield-star
    snorkel
    speech-bubble
    square-star
    star
    star-star
    stroller
    sun
    teacher
    thumbs-up
    ticket-dots
    ticket-star
    tickets
    turtle
    wheelchair
    icon-aqwa-foundation-clean.svg

    General Utility

    .c-icon-chevron

    .c-icon-chevron .c-icon-chevron--reverse

    .c-icon-chevron .c-icon-chevron--white

    .c-icon-chevron .c-icon-chevron--white .c-icon-chevron--reverse

    .c-icon-arrow

    Buttons

    c-button-outlined c-button-outlined--small

    c-button-outlined c-button-outlined--thin

    c-button-outlined c-button-outlined--white

    Links

    Containers

    .l-container-1

    Adds 80px margin onto the top and 40px on tablet if there is another l-container above

    .l-container-2 .mt-0

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2 .mb-0

    Removes the margin on the container below.

    .l-container-2

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2 .my-0

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-2

    Adds 120px margin onto the top and 40px on tablet if there is another container above

    .l-container-3

    Adds 154px / 120px / 40px margin onto the top if there is another container above

    .l-container-4

    Adds 192px / 125px / 40px margin onto the top if there is another container above

    padding-80

    Containers have padding top and bottom of 80px

    Gradient Strip

    Price

    From: $120

    Cards

    .c-card-long

    component-card-long.php

    Includes AQWA Entry

    AQWA Entry and Glass Bottom Boat (Age 4+)

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. General Admission is valid 9am-4pm & AQWA is open everyday! Online ticket does NOT guarantee priority entry.

    Duration: 3 hours (approx)

    From: $110

    Includes AQWA Entry

    Includes AQWA Entry

    AQWA Entry and Glass Bottom Boat (Age 4+)

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. General Admission is valid 9am-4pm & AQWA is open everyday! Online ticket does NOT guarantee priority entry.

    Duration: 3 hours (approx)

    From: $110

    Includes AQWA Entry

    Includes AQWA Entry

    AQWA Entry and Glass Bottom Boat (Age 4+)

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. General Admission is valid 9am-4pm & AQWA is open everyday! Online ticket does NOT guarantee priority entry.

    Duration: 3 hours (approx)

    From: $110

    Includes AQWA Entry

    .c-card-b

    component-card.php

    Label

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    .c-card

    component-card-barred.php

    .c-card-squared

    component-card-squared.php

    card squared

    Lorem ipsum dolor sit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione tempora illum iatem.

    Card - Review

    • John Doe
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam eget aliquam ultricies, nunc augue ultricies nisl, eget ultricies nisl nisl nec nisl. Read more
    • Lollyizsweet
      We really loved our visit. A little different to aquariums where you have to follow one trail. At AQWA you can come back to different areas and look again. We really loved the touch pool with the shar... Read more
    • John Deer
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam eget aliquam ultricies, nunc augue ultricies nisl, eget ultricies nisl nisl nec nisl. Read more

    Product Tabs

    These require actual content and currently don't have dummy content.

    Admission Tickets

    VALID ALL DAY

    Standard Entry Ticket

    SEA for yourself at AQWA! Encounter the incredible and iconic marine life of Western Australia on a spectacular underwater journey. AQWA is open daily from 9am-4pm and Entry Tickets are valid all day

    From: $19

    Features

    • Adults Only
    • AQWA Exclusive
    • Duration: Valid All Day
    • Duration: 1 - 2 hours
    • Duration: 2 - 3 hours
    • Duration: 3 - 4 hours
    • Duration: 20 - 44 minutes
    • Duration: 4 - 5 hours
    • Equipment Included
    • Free cancellation
    • Free parking
    • Fully Guided
    • Great For Teens
    • Instant Confirmation
    • Meals included
    • Mobile/E-ticket Accepted
    • Small Group
    • Toddler Friendly
    • Wheelchair Accessible

    Videos

    Component: Video Embed

    component-video-embed.php

    Components

    Video Embed

    Box Prompt (CTA General) - Also Ticket Prompt

    .c-box-prompt

    Lorem Ipsum Dolor Sit

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed dolores molestiae vitae.

    Lorem Ipsum Dolor Sit (Type: Dark)

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor lorem ipsum dolor sit.

    Text Divider

    .c-text-divider

    Activities for all ages

    l-information-row

    $28 Entry and Lunch Combo

    Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

    box-b + border-grey-d7d + c-border-between + l-padding-between

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    • Whale Watching

      22 JAN -25 JAN

      The whales are here! Western Australia’s humpback whale population has begun its annual migration south and will be passing by Perth by late August! AQWA partners with two of Perth’s premiere charter companies to host a unique whale watching experience right out of Hillarys Boat Harbour.

    l-box-promo

    Dec - Jan

    School Holidays at AQWA

    Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt.

    Component: Info Chunk

    Lorem Ipsum Dolor Sit

    Lorem Ipsum Dolor Sit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores non possimus modi aut qui. Tempora tempore eveniet libero corrupti ullam dolorum ipsa fugiat natus eligendi dolores culpa aliquam molestias neque maxime temporibus est qui, laborum error amet beatae nobis animi ex voluptates fuga? Officiis iure necessitatibus corporis adipisci aperiam, illo molestiae corrupti dolorum, accusantium vel optio consequuntur? Laudantium nemo facilis repellat blanditiis enim d

    Sections

    Section: Products Table

    section-products-table.php

    Buy Tickets

    An awesome underwater adventure awaits you at the Aquariam of Western Australia!

    Glass Bottom Boat & Entry

    From $29

    Buy Tickets

    Behind The Scenes Pass & Entry

    From $54

    Buy Tickets

    Dine Beneath the Sea

    From $195

    Buy Tickets

    Snorkel With Sharks

    From $195.00

    Buy Tickets

    Dive With Sharks

    From $195.00

    Buy Tickets

    Unique Birthday Parties

    From $50.00

    Buy Tickets

    Section: Experience Bar

    section-experience-bar.php

    ↻ Reload the page to see this correctly.

    Glass Bottom Boat & Entry

    Glass Bottom Boat & Entry

    Glide across the top of Australia's largest single aquarium in AQWA's custom glass bottom boat!

    Behind The Scenes Pass & Entry

    Behind The Scenes Pass & Entry

    For true AQWA lovers! We'll take you deeper into the aquarium and closer to our animals on a fully guided tour. Access restricted areas and ride the glass bottom boat.

    Dine Beneath the Sea

    Dine Beneath the Sea

    Spoil someone who truly deserves it at AQWA's Dine Beneath the Sea!

    Snorkel With Sharks

    Snorkel With Sharks

    Plunge into the beautiful world of AQWA’s shipwreck coast aquarium and come face to fin with sharks, stingrays and hundreds of stunning fish.

    Dive With Sharks

    Dive With Sharks

    Plunge into the beautiful world of AQWA’s shipwreck coast aquarium and come face to fin with sharks, stingrays and hundreds of stunning fish!

    Unique Birthday Parties

    Unique Birthday Parties

    Birthdays with a difference! Our bespoke party packages will create an experience your guests will never forget!