UI & Components Guide

Global Styles


Typography


Heading Level 1 with line-above class- 48px

Small Heading Level 1 – 36px

Heading Level 2 – 34px

Heading Level 3 – 22px

Heading Level 4/5 -18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor massa, pharetra quis orci eget, euismod facilisis metus. Integer dapibus scelerisque dolor sed tristique. Duis non consectetur arcu, in gravida massa. Maecenas porttitor, justo ac mollis commodo, tellus nisl suscipit lacus, id lobortis tellus mauris vitae eros. Ut maximus placerat ex, nec consequat libero vulputate molestie. Etiam nulla augue, feugiat non augue in, fermentum varius risus. Integer nec commodo lacus. Aenean efficitur justo ut dui suscipit posuere. Praesent interdum auctor nisi, eget blandit sapien mollis at. In lobortis nunc id ex venenatis euismod. Etiam euismod libero sapien.

Pellentesque et erat nec mauris consequat cursus at eget sem. Proin eu quam non ante pretium iaculis. In ultrices interdum feugiat. Nam condimentum maximus nunc eget finibus. Aliquam ipsum diam, maximus eget ante id, ornare consequat tortor. Donec tincidunt accumsan dolor, sed ullamcorper ex viverra et. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam elementum, turpis quis faucibus facilisis, sapien tellus maximus libero, nec rhoncus tellus felis nec ante. Nam sodales congue arcu id mattis. Pellentesque libero ipsum, venenatis ac tellus eget, eleifend dignissim nunc. 16px

Normal list item

  • List item one
  • List item two
  • List item three

List item with “List Checkmark Setting” enabled and size = “large”

  • List item one
  • List item two
  • List item three

List item with “List Checkmark Setting” enabled and size = “small”

  • List item one
  • List item two
  • List item three

Colours


Red / #E0182D

Body Grey / #3D4F5C

Blue / #007BFF

Light Grey / #F5F7FA

Title Black / #041B2B

Bootstrap 5


For additional spacing and layout controls, bootstrap grid and helper classes can be used on elements.
For details info see these guides:
https://getbootstrap.com/docs/5.1/layout/grid/
https://getbootstrap.com/docs/5.1/utilities/spacing/
Note: Only certain “Grid”/”Layout” and “Utility” classes have been added to the theme, not all bootstrap classes.

Useful classes:
p-0 (no padding),
m-0 (no margins),
“d-none d-md-block” (only visible on desktop)
“d-md-none” (only visible on mobile)
responsive parameters: “sm”, “md, “lg”, “xl”,
p-sm-5 (larger padding for screens bigger than “sm”),

Animations


Animate in

Animate in left

Animate In Right

Animate in Up

Animate In Down

Backgrounds

Trio Belt Background – outer with full parallax

Quintet Spread Background (with position 85, 50 )

Components


Buttons


Primary – 14px & 16px font size variation.

Button Outlined

Blank Button

Underlined Button

Jumbo Button

Right Arrow Button (Main Colours Supported)

Icons


Navigation & Markers

Payment Solution Icons

Features Page Icons

Merchant Logos

Integration Logos

Grayscale hover fx on logos

Forms / inputs


    Can't find the answer you're looking for?

    Our customer service team is ready to help.






    Accordions (FAQs)


    Heading / Title goes here for an accordion (can choose tags h2,h3, etc.)

    Chevron Icon

    Heading / Title goes here for an accordion (can choose tags h2,h3, etc.)

    Chevron Icon

    Heading / Title goes here for an accordion (can choose tags h2,h3, etc.)

    Chevron Icon

    Asking a FAQ as h3?

    Chevron Icon

    Asking a FAQ as h3?

    Chevron Icon

    Tabs


    Content beings 1

    Content ends 1

    Content beings 2

    Content ends 2

    Content beings 3

    Content ends 3

    Slider / Carousel Component


    Content Slider – accepts most blocks, can choose amount of slides visible, animation settings etc.

    Slide 1

    Slide 2

    Slide 3

    Slide 4


    Case Studies Carousel – a shortcode which gets posts from Case Studies, and generates the layout.

    Card Component


    Tooltip Component


    Hover over element and tool tip content fades in

    HOVER OVER ME

    MMMM I’m content shown on hover, you can set my max width too

    Layouts


    Hero Layouts


    Standard Hero

    The Ultimate Online Payment Solution

    Experience fast and secure online payments from anywhere in the world with South Africa’s leading payment gateway.

    Half Height

    Solutions

    Flexible payment solutions for your business needs

    Big Wave Hero

    Solutions

    Ecommerce solutions to suit any sized business

    We offer merchants full integration flexibility alongside a host of payment features. Whether you use an existing shopping cart system or have a custom built website, PayFast is the go-to payment facilitator for all businesses.

    Case Study Component


    “COVID-19 has bred a lot of new businesses and ideas in South Africa, creating self-starter opportunities and propelled existing companies into the world of ecommerce. Your ecommerce store needs to stand out from the rest.“

    Table Layout

    add class to group “group-table”


    Payment Method

    Fees (excl VAT)

    Credit and Cheque Card

    The world’s most popular online payment method.

    3.5% plus R 2.00

    Credit and Cheque Card Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R19.00 (ex VAT)

    Instant EFT

    An electronic funds transfer that gets verified instantly.

    2.0% (minimum R 2.00)

    Instant EFT Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R10.00 (ex VAT)

    Masterpass

    A digital wallet that streamlines the checkout process.

    3.5% plus R 2.00

    Masterpass Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R19.50 (ex VAT)

    SnapScan

    A free ‘scan to pay’ app for convenient online shopping.

    3.5% plus R 2.00

    SnapScan Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R19.50 (ex VAT)

    Debit Card

    A popular payment option for many South African shoppers.

    3.5% plus R 2.00

    Debit Card Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R19.50 (ex VAT)

    Mobicred

    An online account that gives buyers access to credit.

    3.5%

    Mobicred Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R17.50 (ex VAT)

    Scode

    A platform for buyers to pay for online purchases in-store.

    4.5% plus R 5.00

    Scode Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R27.50 (ex VAT)

    Zapper

    A free ‘scan to pay’ app for convenient online shopping.

    3.5% plus R 2.00

    Zapper Fees:

    Only pay 3.5% plus R 2.00 per transaction

    Example:

    Transaction cost: R500.00

    You only pay: R19.50 (ex VAT)

    Timeline Layouts


    Horizontal

    2007

    PayFast founded by Jonathan Smit and Andy Higgins

    2008

    First Instant EFT transaction

    2009

    First credit card transaction

    2010

    Integration to Prestashop & WooCommerce

    2012

    Integration to Shopify

    2013

    Vertical

    1969

    Moon Landing

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor massa, pharetra quis orci eget, euismod facilisis metus.

    2001

    Space Odyssey!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor massa, pharetra quis orci eget, euismod facilisis metus.

    10191

    Dune

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor massa, pharetra quis orci eget, euismod facilisis metus.

    000

    End

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor massa, pharetra quis orci eget, euismod facilisis metus.

    Legal Terms


    What’s on this page

    Sections

    Legal Terms Component Title

    This block layout uses it’s internal anchor tags (set under advanced -> HTML anchor) to display the list on the left of contents within the legal terms block…when setting anchors use all_lowercase_with_underscores_as_spaces

    Title 1

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    • Disable Checkmarks for default bullet point style
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque.
    • Nunc dignissim risus id metus.

    Title 2

    Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

    Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

    Title 3

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

    Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

    Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi

    Call Out Component (footer)


    added via “elements” settings