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
render_text_link_card( array(
"title" => 'Customer Representative',
"subtitle" => 'East London',
"date" => '7 days ago',
"link_url" => '#career',
"new_tab" => true,
"type" => 'career',
) );
Profile Card
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
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
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
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
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
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
$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
render_title( array(
"text" => "Heading",
"portfolio" => true,
"icon" => "mtn-icon mtn-icon-mtn-business-badge",
"link_url" => "#",
"skin" => "momo",
) );
render_title( array(
"text" => "Heading",
"portfolio" => false,
"icon" => "mtn-icon mtn-icon-mtn-business-badge",
"link_url" => "#",
"skin" => "momo",
) );
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
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
