Test

Page Header

render_header_page( array(
    "strapline"     => "Test",
    "title"          => "Page Header",
    "bg_image"       => "https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg",
    "button"         => true,
    "link_text"      => "Read more",
    "link_url"       => "#",
    "icon_right"     => "",
    "btn_skin_color" => "",
    "new_tab"        => false,
    "curve_color"    => "white",
    "bg_position"    => ""
) );
Strapline

Post Header

2 April 2019
render_header_post(array(
    "strapline" => "Strapline",
    "title" => "Post Title",
    "post_date" => "2 April 2019",
    "bg_image" => "https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg",
    "curve_color" => "white",
    "bg_position" => "center center"
));
Strapline

Profile Header

render_header_profile(array(
    "strapline" => "Strapline",
    "title" => "Profile Header",
    "profile_image" => "https://www.mtn.com/wp-content/uploads/2019/02/Wwa-leader-bod-pfnhleko@2x.jpg",
    "bg_image" => "https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg",
    "curve_color" => "white",
    "bg_position" => "center center"
));

Cards

render_text_link_card( array(
    "title"    => 'Customer Representative',
    "subtitle" => 'East London',
    "date"     => '7 days ago',
    "link_url" => '#career',
    "new_tab"  => true,
    "type"     => 'career',
) );
render_text_link_card( array(
    "title"     => 'Anti-corruption',
    "link_url"  => '/link',
    "file_size" => '133 KB',
    "type"      => 'download',
) );

Profile Card

PF Nhleko

Non-Executive Chairman
render_profile_card( array(
    "img_path"  => 'https://www.mtn.com/wp-content/uploads/2019/02/Wwa-leader-bod-pfnhleko@2x.jpg',
    "full_name" => 'PF Nhleko',
    "role"      => 'Non-Executive Chairman',
    "link_url"  => '#Nhleko',
) );

Profile Info Card

PF Nhleko

Non-Executive Chairman

BSc Civil Engineering (Ohio State University), MBA (Atlanta University)
render_profile_info_card( array(
    "img_path"    => 'https://www.mtn.com/wp-content/uploads/2019/02/Wwa-leader-bod-pfnhleko@2x.jpg',
    "full_name"   => 'PF Nhleko',
    "role"        => 'Non-Executive Chairman',
    "description" => 'BSc Civil Engineering (Ohio State University), MBA (Atlanta University)',
    "link_url"    => '#Nhleko',
) );

Tiny Cards

default

render_tiny_card( array(
    "icon"        => 'mdi mdi-airballoon',
    "button_text" => 'Data',
    "button_link" => '#data',
) );

bottom-text black

3GB Ram
render_tiny_card( array(
    "bottom_text" => '3GB Ram',
    "icon"        => 'mtn-icon mtn-icon-phone',
    "skin"        => 'black',
    "type"        => 'bottom-text',
) );

top-bottom-text img_url

2017
Best Internet Provider
render_tiny_card( array(
    "top_text"    => '2017',
    "bottom_text" => 'Best Internet Provider',
    "img_url"     => 'https://itouch.co.za/img/africaCom-logo.png',
    "type"        => 'top-bottom-text',
) );

large play

render_tiny_card( array(
    "icon"        => 'mdi mdi-currency-btc',
    "button_text" => 'Phones',
    "button_link" => '#large',
    "skin"        => 'play',
    "type"        => 'large',
) );

tall momo

Some label text
render_tiny_card( array(
    "bottom_text" => 'Some label text',
    "icon"        => 'mtn-icon mtn-icon-phone',
    "button_text" => 'View',
    "button_link" => '#view',
    "skin"        => 'momo',
    "type"        => 'tall',
) );

hr-text


Orders can take up to 3 weeks
render_tiny_card( array(
    "bottom_text" => 'Orders can take up to 3 weeks',
    "icon"        => 'mtn-icon mtn-icon-phone',
    "type"        => 'hr-text',
) );

round

render_tiny_card( array(
    "icon" => 'mtn-icon mtn-icon-phone',
    "type" => 'round',
) );

All options (defaults):

render_link_card( array(
    "tag"          => '',
    "title"        => '',
    "sub_title"    => '',
    "description"  => '',
    "img_path"     => '',
    "link_url"     => '',
    "link_text"    => '',
    "fab"          => false,
    "btn_skin"     => 'yellow',
    "tag_skin"     => 'yellow',
    "img_position" => 'center center',
    "new_tab"      => false,
    "large"        => false,
));

large default momo

render_link_card( array(
    "tag"          => 'Mobile Phones',
    "title"        => 'Best Selfie Cameras',
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"     => '#link-card',
    "link_text"    => 'View now',
    "btn_skin"     => 'momo',
    "tag_skin"     => 'momo',
    "large"        => true,
) );

large description/fab

render_link_card( array(
    "tag"          => 'Phones',
    "title"        => 'Samsung\'s next flagship',
    "description"  => 'Lorem ipsum doler sit amet, consectetur adipiscing elit. Curabitur',
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"     => '#link-card',
    "fab"          => true,
    "new_tab"      => true,
    "large"        => true,
) );

Default

render_link_card( array(
    "tag"          => 'Mobile Phones',
    "title"        => 'Best Selfie Cameras',
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"     => '#link-card',
    "link_text"    => 'View now',
) );

With description/fab + different skin tag

render_link_card( array(
    "tag"          => 'Phones',
    "title"        => 'Samsung\'s next flagship',
    "description"  => 'Lorem ipsum doler sit amet, consectetur adipiscing elit. Curabitur',
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"     => '#link-card',
    "fab"          => true,
    "btn_skin"     => 'white',
    "tag_skin"     => 'yellow',
) );

Deal (use subtitle for larger yellow text)

render_link_card( array(
    "title"        => '20Gb data Medium',
    "sub_title"    => 'R199pm x24',
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"     => '#link-card',
    "fab"          => true,
) );

Solution (No description + fab)

render_link_card( array(
    "tag"          => 'Cloud',
    "title"        => 'Co-location',
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"     => '#link-card',
    "fab"          => true,
    "btn_skin"     => 'white',
    "tag_skin"     => 'white',
) );

Image Cards

render_image_card( array(
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
) );

Image Card with text

render_image_card( array(
    "img_path"     => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "img_position" => 'center center',
    "title"        => 'MTN Title',
    "subtitle"     => 'This is a subtitle'
) );

Product Card

Contract

Samsung

Galaxy 9


My contract
x 24 months

render_product_card( array(
    "img_url"     => 'https://purepng.com/public/uploads/large/purepng.com-mobile-phone-with-touchmobilemobile-phonehandymobile-devicetouchscreenmobile-phone-device-231519332728kouyj.png',
    "brand"       => 'Samsung',
    "name"        => 'Galaxy 9',
    "tag"         => 'Contract',
    "currency"    => 'R',
    "price"       => '1000',
    "info_1"      => 'My contract',
    "info_2"      => 'x 24 months',
    "link_url"    => '#',
    "like_button" => false,
    "swap_button" => true,
) );

Checkout Card

Samsung Galaxy 9

My Smart S contract

R100

Once-off

render_checkout_card( array(
    "title"             => 'Samsung Galaxy 9',
    "subtitle"          => 'My Smart S contract',
    "currency"          => 'R',
    "price"             => '100',
    "price_description" => 'Once-off',
) );

Search Result Card

render_search_result_card( array(
    "title"       => 'MTN Announces trading update for the year ended 31 December 2018',
    "description" => 'MTN has announced its trading update for the year ended 31 December 2018. MTN expects to report an almost doubling in earnings with growth in full year headline earnings per share forecast at between 80% and 90%. MTN further noted that headline earnings per share were negatively impacted by a number of once-off and non-cash […]',
    "link_url"    => 'https://www.mtn.com/mtn-announces-trading-update-for-the-year-ended-31-december-2018/',
    "fab_color"   => 'yellow',
    "bg_color"    => '',
) );

Play Pass Card

render_play_pass_card( array(
    "img_path" => 'https://mybroadband.co.za/news/wp-content/uploads/2014/07/YouTube-Logo.jpg',
    "name"     => 'YouTube',
    "currency" => 'R',
    "price"    => '20.45',
    "quantity" => '1',
    "unit"     => 'hr',
) );

Masonry Card

Tag

Title

Description text

Tag

Title

Description text

Tag

Title

Description text

$mtn_options = array(
    "tag"         => 'Tag',
    "title"       => 'Title',
    "description" => 'Description text',
    "img_path"    => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "link_url"    => '#link',
    "size"        => 'medium',
    "data_year"   => '2019',
    "data_cat"    => 'news',
);

render_masonry_card( $mtn_options );

Selectable Card

Data & Network

Financial Services

Data & Network

Financial Services

Data & Network

Services

render_selectable_card( array(
    "label"    => 'Data & Network',
    "skin"     => 'yellow',
    "icon"     => 'mdi mdi-account',
    "selected" => false,
) );
render_selectable_card( array(
    "label"    => 'Financial Services',
    "skin"     => 'yellow',
    "icon"     => 'mtn-icon mtn-icon-wifi',
    "selected" => true,
) );
check_circle
R899

Sharepoint
Option 2

check_circle
R899

Sharepoint
Option 2

check_circle
R899

Sharepoint
Option 2

check_circle
R899

Sharepoint
Option 2


render_selectable_card( array(
    "label"       => 'R899',
    "description" => 'Sharepoint Option 2',
    "skin"        => 'black',
    "selected"    => false,
    "type"        => 'hr',
) );
render_selectable_card( array(
    "label"       => 'R899',
    "description" => 'Sharepoint Option 2',
    "skin"        => 'black',
    "selected"    => true,
    "type"        => 'hr',
) );

Video Card

render_video_card( array(
    "type"       => 'youtube',
    "video_path" => 'https://www.youtube.com/embed/JzE-hXJ_inU',
    "poster_img" => '',
) );

Form

Input

render_form_input( array(
    'type' => 'text',
    'placeholder' => 'Name of company',
    'icon' => 'mdi mdi-office-building',
    'id' => 'mtn-company-name',
    'name' => 'mtn-company-name',
    'required' => true/false
) );

Textarea

render_form_textarea( array(
    'id' => 'mtn-company-name',
    'name' => 'mtn-company-name',
    'required' => false,
) );

Checkboxes

Checkbox label

render_form_checkbox( array(
    'title' => 'South and East Africa',
    'value' => 'South and East Africa',
    'id'    => 'checkbox-2',
    'name'  => 'mtn-regions[]',
) );

Radio buttons

Radio buttons label

render_form_radio( array (
    'title' => 'Middle East and North Africa',
    'value' => 'Middle East and North Africa',
    'id'    => 'radio-1',
    'name'  => 'mtn-radio-regions[]'
) );

Upload field

Please upload company profile and or any other supporting documentation. (PDF,Word,Excel)

render_vertical_spacer('20');
render_form_input( array(
    'type'        => 'file',
    'placeholder' => '',
    'icon'        => 'mdi mdi-file-document-outline',
    'id'          => 'mtn-job-documents',
    'name'        => 'mtn-job-documents',
    'required'    => false
) );

Select

Select field (default)

$mtn_options = [
    "id"             => "form_select",
    "name"           => "form_select",
    "selected"       => "",
    "select_options" => [
        [
            'option' => 'Select Country',
            'value'  => '',
        ],
        [
            'option' => 'Cameroon',
            'value'  => 'cameroon',
        ],
        //...
];
render_form_select( $mtn_options );

Select field with image and dropup and selected option

$mtn_options = [
    "id"             => "country_select",
    "name"           => "country_select",
    "style_class"    => "outline-white-bg-black",
    "image"          => true,
    "form"           => false,
    "dropup"         => true,
    "selected"       => "South Africa",
    "select_options" => [
        [
            'option' => 'Select Country',
            'value'  => ''
        ],
        [
            'option' => 'Cameroon',
            'value'  => 'cameroon',
            'image'  => esc_url( "https://www.mtn.com/wp-content/themes/mtn-theme/images/cameroon.svg" ),
        ],
        //...
];
render_form_select( $mtn_options );

Grey dropdown/select

$mtn_options = [
    "id"             => "dropdown",
    "name"           => "dropdown",
    "style_class"    => "",
    "form"           => true,
    "selected"       => "South Africa",
    "select_options" => [
        [
            'option' => 'Select Country',
            'value'  => ''
        ],
        [
            'option' => 'Cameroon',
            'value'  => 'cameroon',
        ],
        //...
];
render_form_select( $mtn_options );

Separators

Image Separator

See above

render_image_separator( array(
    "top_color"     => 'white',
    "bottom_color"  => 'white',
    "img_path"      => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "img_position"  => 'top center',
) );
                                

Separator

See above

render_separator( array( "top_color" => 'white', "bottom_color" => 'grey' ) );
                                

Image Separator with icon

See above

render_image_separator( array(
    "top_color"     => 'grey',
    "bottom_color"  => 'white',
    "img_path"      => 'https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg',
    "img_position"  => 'top center',
    "icon"          => 'mtn-icon mtn-icon-phone',
    "icon_color"    => 'black',
    "icon_bg_color" => 'grey',
) );

See below

render_banner(array(
            "strapline" => "Strapline",
            "title" => "MTN Banner",
            "bg_image" => "https://www.mtn.com/wp-content/uploads/2019/03/wwa-leadership-banner@2x.jpg",
            "button" => true,
            "link_text" => "Read more",
            "link_url" => "#",
            "btn_skin_color" => "yellow",
            "link_new_tab" => false,
            "bg_position" => "center center"
            ));
?>
Strapline

MTN Banner

Other Components

Button

All options

render_button( array(
    "text"       => "Read more",
    "outlined"   => false,
    "icon_right" => "",
    "icon_left"  => "",
    "skin"       => "yellow",
    "text_skin"  => "",
    "icon_color" => "",
    "link_url"   => "#",
    "new_tab"    => false,
    "type"       => "default",
    "tiny"       => false,
    "raised"     => false,
    "disabled"   => false
) );

Default with right icon



render_button( array(
    "text"       => "Read more",
    "outlined"   => false,
    "icon_right" => "mdi mdi-chevron-right",
    "skin"       => "yellow",
    "link_url"   => "#",
    "type"       => "default",
) );

Square button



render_button( array(
    "text"       => "My MTN",
    "icon_left" => "mtn-icon mtn-icon-mymtn",
    "skin"       => "white",
    "icon_color" => "yellow",
    "link_url"   => "#",
    "type"       => "square",
) );

Long icon button



render_button( array(
    "icon_left" => "mtn-icon mtn-icon-twitter",
    "skin"       => "momo",
    "link_url"   => "#",
    "type"       => "long-icon",
) );

Rectangle button



render_button( array(
    "icon_left" => "mtn-icon mtn-icon-twitter",
    "skin"       => "momo",
    "link_url"   => "#",
    "type"       => "rectangle",
) );

Outline button



render_button( array(
    "text"       => "Read more",
    "outlined"   => true,
    "icon_right" => "mdi mdi-chevron-right",
    "skin"       => "yellow",
    "link_url"   => "#",
    "type"       => "default",
) );

Outline button (text color force)



render_button( array(
    "text"       => "Read more",
    "outlined"   => true,
    "icon_right" => "mdi mdi-chevron-right",
    "skin"       => "yellow",
    "text_skin"  => "black",
    "link_url"   => "#",
    "type"       => "default",
) );

Social Share

render_social_share( array(
    "skin"  => "yellow",
    "align" => 'center',
) );
render_social_share( array(
    "skin"  => "play",
    "align" => 'left',
    "text"  => "Share deal"
) );

Title

Heading

render_title( array(
    "text"      => "Heading",
    "portfolio" => true,
    "icon"      => "mtn-icon mtn-icon-mtn-business-badge",
    "link_url"  => "#",
    "skin"      => "momo",
) );

Heading

render_title( array(
    "text"      => "Heading",
    "portfolio" => false,
    "icon"      => "mtn-icon mtn-icon-mtn-business-badge",
    "link_url"  => "#",
    "skin"      => "momo",
) );

Button group

Icon text

Postal Address

Private Bag 9955
Cresta
2118
South Africa
render_icon_text( array(
    'icon'         => 'mtn-icon mtn-icon-map',
    'title'        => 'Postal Address',
    'description'  => 'Private Bag 9955
Cresta
2118
South Africa', 'has_borders' => false, 'border_color' => '#ffcc00' ) );

Postal Address

Private Bag 9955
Cresta
2118
South Africa
render_icon_text( array(
    'icon'         => 'mtn-icon mtn-icon-map',
    'title'        => 'Postal Address',
    'description'  => 'Private Bag 9955
Cresta
2118
South Africa', 'has_borders' => true, 'border_color' => '#ffcc00' ) );

Accordion

Showmax offers a single subscription option that gives you unlimited access to our full library. In Poland, registered users without a subscription get access to selected content for free. This option is called Showmax Start. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Showmax offers a single subscription option that gives you unlimited access to our full library. In Poland, registered users without a subscription get access to selected content for free. This option is called Showmax Start. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Showmax offers a single subscription option that gives you unlimited access to our full library. In Poland, registered users without a subscription get access to selected content for free. This option is called Showmax Start. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


render_accordion( array(
    "id"                 => "mtn-accordion--default",
    "accordion_bg_color" => "light",
    "accordion_skin"     => "",
    "acccordion_items"   => array(
        array(
            'item_title'       => 'Title',
            'item_description' => 'Description'
        ),
        array(
            'item_title'       => 'Title',
            'item_description' => 'Description'
        ),
    )
)
);

Vertical space

    render_vertical_spacer('100');

MTN Icons


mtn-icon mtn-icon-camera

mtn-icon mtn-icon-charger

mtn-icon mtn-icon-clock

mtn-icon mtn-icon-close

mtn-icon mtn-icon-cloud

mtn-icon mtn-icon-comms

mtn-icon mtn-icon-data-management

mtn-icon mtn-icon-enterprise

mtn-icon mtn-icon-facebook

mtn-icon mtn-icon-games

mtn-icon mtn-icon-headphones

mtn-icon mtn-icon-instagram

mtn-icon mtn-icon-iot

mtn-icon mtn-icon-likeheart

mtn-icon mtn-icon-lock-badge

mtn-icon mtn-icon-lock-filled

mtn-icon mtn-icon-lock-outline

mtn-icon mtn-icon-map

mtn-icon mtn-icon-memory

mtn-icon mtn-icon-momo-blk

mtn-icon mtn-icon-momo-financial

mtn-icon mtn-icon-momo-manage

mtn-icon mtn-icon-momo-market

mtn-icon mtn-icon-momo-pay

mtn-icon mtn-icon-momo-transfer

mtn-icon mtn-icon-mtn-business-badge

mtn-icon mtn-icon-mtn-business

mtn-icon mtn-icon-mtn-momo-badge

mtn-icon mtn-icon-mtn-momo

mtn-icon mtn-icon-mtn-play-badge

mtn-icon mtn-icon-mtn-play

mtn-icon mtn-icon-music

mtn-icon mtn-icon-mymtn-badge

mtn-icon mtn-icon-mymtn

mtn-icon mtn-icon-networks

mtn-icon mtn-icon-people

mtn-icon mtn-icon-phone-2

mtn-icon mtn-icon-phone-call

mtn-icon mtn-icon-phone-ringing

mtn-icon mtn-icon-phone

mtn-icon mtn-icon-play-music

mtn-icon mtn-icon-play-video

mtn-icon mtn-icon-play

mtn-icon mtn-icon-plus

mtn-icon mtn-icon-receipt-bill

mtn-icon mtn-icon-screen-clock

mtn-icon mtn-icon-search

mtn-icon mtn-icon-security-lock

mtn-icon mtn-icon-support

mtn-icon mtn-icon-swap

mtn-icon mtn-icon-twitter

mtn-icon mtn-icon-upgrade

mtn-icon mtn-icon-upload

mtn-icon mtn-icon-video

mtn-icon mtn-icon-vpn

mtn-icon mtn-icon-wifi

mtn-icon mtn-icon-youtube

mtn-icon mtn-icon-play-games