Index
- Page Header
- Page Header Carousel
- Post Header
- Profile Header
- Text Link Card
- Profile Card
- Profile Info Card
- Tiny Card
- Link Card
- Image Card
- Product Card
- Checkout Card
- Search Result Card
- Play Pass Card
- Masonry Card
- Selectable Card
- Video Card
- Input
- Textarea
- Radio
- Checkbox
- Select
- Image Separator
- Separator
- Banner
- Button
- Fab Button
- Icon Button
- Social Share Button
- Title
- Icon Text
- Accordion
- Vertical Space
- Carousels
- Tiny Card Carousels
- MTN Icons
Headers
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" => ""
) );
$header_array = [
[
"strapline" => "MyMTN",
"title" => "Get your note on",
"bg_image" => "image_url",
"button" => true,
"link_text" => "Read more",
"link_url" => "#",
"btn_skin_color" => "yellow",
"link_new_tab" => false,
"bg_position" => "center center"
],
...
]
render_header_carousel([
"id" => "header_carousel",
"header_array" => $header_array,
"curve_color" => "yellow"
]);
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"
));
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
Text Link Card
Customer Representative
East London
7 days ago
render_text_link_card( array(
"title" => 'Customer Representative',
"subtitle" => 'East London',
"date" => '7 days ago',
"link_url" => '#career',
"new_tab" => true,
"type" => 'career',
) );
Anti-corruption
(133 KB)
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
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
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',
) );
Link Cards
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
Mobile Phones
Best Selfie Cameras
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
Phones
Samsung's next flagship
Lorem ipsum doler sit amet, consectetur adipiscing elit. Curabitur
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,
) );
Mobile Phones
Best Selfie Cameras
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',
) );
Phones
Samsung's next flagship
Lorem ipsum doler sit amet, consectetur adipiscing elit. Curabitur
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',
) );
20Gb data Medium
R199pm x24
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,
) );
Cloud
Co-location
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
MTN Title
This is a subtitle
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
render_checkout_card( array(
"title" => 'Samsung Galaxy 9',
"subtitle" => 'My Smart S contract',
"currency" => 'R',
"price" => '100',
"price_description" => 'Once-off',
) );
Search Result Card
MTN Announces trading update for the year ended 31 December 2018
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 […]
https://www.mtn.com/mtn-announces-trading-update-for-the-year-ended-31-december-2018/
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
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',
) );
Banner
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"
));
?>
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
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'
) );
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');
Carousels
Link Card Carousel
Card 1
Financial Reporting
Card 2
Financial Reporting
Card 3
Financial Reporting
Card 4
Financial Reporting
Card 5
Financial Reporting
Card 6
Financial Reporting
Card 7
Financial Reporting
Card 8
Financial Reporting
Card 9
Financial Reporting
Card 10
Financial Reporting
render_link_carousel([
"card_array" => $linkcard_carousel_arr,
"id" => "link_card_carousel",
"center" => false,
"loop" => true,
"alternate_sizes" => true,
"slide_by_page" => true,
]);
Product Carousel
Tiny Card Carousel
Default
Bottom Text
Round
Profile
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
Profile Card Loop
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
PF Nhleko
Non-Executive Chairman
Play Pass Card
Play Pass Card Nav
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