Components

FlipCardComponent

Desktop View (1520px)

Superbiker

Cayden Robert

Turbo teen

Cayden Robert is a young and talented superbiker, known for his speed and agility on the track. With a passion for racing, he has quickly made a name for himself in the world of motorsports.

Superbiker

Blake Robert

Young dynamite

Component Name: _FlipCardComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
Id	False	None	string	Unique id for the flip card
Front	False	None	object	Component to display on the front of the card
Back	True	None	object	Component to display on the back of the card. If there is no back set, the card wont flip
ElementSize	True	None	ElementSize	Size of the card

Badge Card

Desktop View (1520px)

2013

R1 insurance hits SA! We also launch dealership & broker channels. The kingdom expands!

Component Name: _BadgeCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSection	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in
HeadingSectionMobile	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in. This is only for mobile view
Image	False	None	Image url	Badge card icon

Custom Carousel

Desktop View (1520px)

R1 insurance

Learn more
R1 insurance

Learn more

Component Name: _CustomCarousel.cshtml

Parameter	Is Optional	Default Value	Type	Description
PartialViewRoute	False	None	string	Partial view route for the custom carousel.
ComponentList	True	None	List<CustomCarouselItem>	List of items in the custom carousel.
UniqueId	False	None	string	Unique Id for the custom carousel.
Duration	False	None	int	The Duration here is how long it takes before going to the next slide
ShowArrowsAndIndicators	True	None	bool	Indicates whether to show arrows and indicators.

SlidingCarousel

Desktop View (1520px)

Component Name: _SlidingCarouselControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
PartialViewRoute	False	None	string	Partial view route for the sliding carousel.
ComponentList	True	None	List<SlidingCarouselItem>	List of items in the sliding carousel.
UniqueId	False	None	string	Unique Id for the sliding carousel.
ElementSize	False	None	ElementSize	Size of the sliding carousel.
ApplyFadedBackground	True	None	bool	Indicates whether to apply faded background.
AnimationDuration	True	None	int	Translate px value of the sliding carousel.

MediaPlayer

Desktop View (1520px)

Tablet View (834px)

Mobile View (360px)

Component Name: _MediaPlayer.cshtml

Parameter	Is Optional	Default Value	Type	Description
Id	False	None	int	Id for the media player.
Width	False	None	int	Width of media player.
Height	True	None	int	Height of media player.
VideoUrl	True	None	string	Url for the media player video.
ImageUrl	True	None	string	Url for the media player Image.
AudioControlMuteImage	True	None	string	Url for the media player un-mute image.
AudioControlUnmuteImage	False	None	string	Url for the media player mute image.
shouldAutoplay	True	None	bool	Indicates whether the video should auto play or not.
isMuted	True	None	bool	Indicates whether the video is muted by default.
hasControls	True	None	bool	Indicates whether the video is has controls.
isLoop	True	None	bool	Indicates whether the video should loop or play through once.
BorderRadius	True	None	string	Border radius of video edges.
BreadCrumb	True	None	BreadCrumbs	Set the displayed breadcrumb if needed.
SimpleHeadingSection	True	None	SimpleHeadingSection	Set the displayed heading section if needed.

Accordion

Desktop View (1520px)

Anke

Tablet View (834px)

Anke

Mobile View (360px)

Anke

Component Name: _AccordionComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
AccordionId	False	None	string	Id for the accordion component.
AccordionText	False	None	string	Text to display in the accordion.
IconUrl	True	None	string	Icon to display on the right side of the accordion.
IconAlt	True	None	string	Alt text for the icon.
OnClickFunction	True	None	string	Function to call when the accordion is clicked.
ObservedComponentId	True	None	string	Id of the component to observe to update accordion text.
AccordionType	False	None	AccordionType	Type of accordion to display. Dropdown or Status.
TextButton	True	None	TextButton	Text button to display in the accordion if Type = Status.
Successful	True	None	bool	If true, the accordion will display success styling otherwise shows fail styling.

Chip

Desktop View (1520px)

JAN

Component Name: _ChipComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
Text	False	None	TypographyText	Text to display in the chip.

Hover Icon

Desktop View (1520px)

Your RSA ID number

Component Name: _HoverIcon.cshtml

Parameter	Is Optional	Default Value	Type	Description
TextBoxId	False	None	string	Id for the textbox.
TextBoxPlaceholder	False	None	string	Placeholder text.
TextBoxType	False	None	string	Type for the textbox.

Popover

Desktop View (1520px)

Component Name: _Popover.cshtml

Parameter	Is Optional	Default Value	Type	Description
TextBoxId	False	None	string	Id for the textbox.
TextBoxPlaceholder	False	None	string	Placeholder text.
TextBoxType	False	None	string	Type for the textbox.

Popup Modal

Mobile View (360px)

Component Name: _PopupModal.cshtml

Parameter	Is Optional	Default Value	Type	Description
Button	False	None	string	button for the modal.
IconUrl	False	None	string	Url for the Modal Icon.
CloseUrl	False	None	string	Url for the close image.
MessageText	False	None	Typography Text	Text to display on the modal.

Show Popup Modal

Mobile View (360px)

Component Name: _CustomButton.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Textbox controller

Mobile View (360px)

Name

Description

Component Name: _TextBoxControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
TextBoxId	False	None	string	Id for the textbox.
TextBoxPlaceholder	False	None	string	Placeholder text.
TextBoxType	False	None	string	Type for the textbox.
IsRequired	True	None	bool	Setting required attribute.
ValidationErrorMessage	True	None	TypographyText	Message that show validation error.
ValidationRegex	True	None	string	Type of validation you want to add to textbox.

Race Dates Table Section

Desktop View (1520px)

Date	Race	Round	Location
31 OCT - 9 NOV	Wines 2 Whales	-	Grabouw

Scroll to compare

Date	Race	Round	Location
13 SEP	Trailseeker Wellington	-	Wellington
30 SEP - 5 OCT	Cape Pioneer Trek	-	Oudshoorn
26 OCT - 1 NOV	Gravel Burn	-	Knysna
7-9 NOV	Wines2Whales	-	Somerset West
TBC	94.7 Road & MTB	-	JHB

Scroll to compare

Date	Race	Round	Location
27 SEP	-	5	REDSTAR RACEWAY
29 NOV	-	6	KYALAMI

Scroll to compare

Date	Race	Round	Location
19-20 SEP	-	4	Louvein Guest Farm
17-18 OCT	-	5,6	Stonehenge River Lodge
14-15 NOV	-	7	Sun City

Scroll to compare

Date	Race	Round	Location
4 OCT	-	7	FORMULA K
1 NOV	-	8	VEREENIGING

Scroll to compare

Date	Race	Round	Location
13 SEP	-	7	KILLARNEY
25 OCT	-	8	ZWARTKOPS
29 NOV	-	9	REDSTAR RACEWAY

Date	Race	Round	Location
23 NOV	-	4	REDSTAR RACEWAY

Component Name: _PillToggleComponents.cshtml

Parameter	Is Optional	Default Value	Type	Description
DefaultIndex	False	None	int	Default index to display.
Options	False	None	List<Option>	List of options to display.
SimpleHeadingSection	True	None	SimpleHeadingSection	Heading section to display.

Radio controller

Mobile View (360px)

As soon as possible

Component Name: _RadioButtonControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
RadioButtonId	False	None	string	Id for the radio button.
RadioButtonText	False	None	TypographyText	Placeholder text.
IsRequired	True	None	bool	Setting required attribute.
OnClickFunction	True	None	string	Passing in a function.
RadioName	False	None	string	Name of the radio button.

Checkbox control

Desktop View (1520px)

I agree to the terms and conditions

Component Name: _CheckboxControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
CheckboxId	False	None	string	Id for the checkbox.
CheckboxText	False	None	TypographyText	Placeholder text.
RequiredErrorMessage	False	None	TypographyText	Error message when checkbox not checked.

Toggle control

Desktop View (1520px)

I'm a KP policy holder

Component Name: _ToggleButtonControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
ToggleId	False	None	string	Id for the Toggle component.
ToggleText	False	None	TypographyText	Toggle text

Textarea control

Desktop View (1520px)

Add comments

Comments*

Please share as many details as possible.

Component Name: _TextareaControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
TextAreaId	False	None	string	Id for the textarea.
TextAreaLabel	False	None	typographytext	Text for label
TextAreaPlaceholder	False	None	typographytext	Placeholder text.

Captcha card

Desktop View (1520px)

Component Name: _CaptchaCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
CaptchaCardId	False	None	string	Id for the captcha card.

Extra Information Card Component

Desktop View (1520px)

Please note:

You need comprehensive car insurance before you can add any optional cover. If you already have comprehensive car insurance with us, you can just add any optional cover to your policy online or by calling us on 0860 50 50 50

Please note:

You'll need a valuation certificate for any item valued at R15,000 or more.

Jewellery with individual values of more than R35,000 must be locked in a securely bolted SABS-compliant safe when not being worn. This even applies if you're on holiday anywhere in the world. Stay safe!

Tablet View (834px)

Please note:

You'll need a valuation certificate for any item valued at R15,000 or more.

Mobile View (360px)

Please note:

You'll need a valuation certificate for any item valued at R15,000 or more.

Parameter	Is Optional	Default Value	Type	Description
CardType	True	None	ExtraInfoCardType	Used to identify what type of extra info card to display. Possible values: success, secondary, warning, danger. Leave empty for default.
Text	False	None	string	Text to display in the extra Info Card.
ReadMoreLink	False	None	string	Link to route the user to after clicking 'Read more' section.

Product Card Component

Mobile View (360px)

This is Bold This is normal

This is the body text

This is Bold This is normal

This is the body text

Learn more

Component Name: _ProductCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Download Our App Section

Desktop View (1520px)

Download our app or register on our self-service portal

Our app is kind of like your banking app, but for all your insurance needs! To get the King Price app, simply download it onto your phone. Or you can register on our self-service portal and access your profile via our website. Easy-peasy!

Download our app or register on our self-service portal

Self-inspect your car/motorbike
Add more cover/products to your policy
View/manage your policy info and update your excess
Submit/track the progress of your claim
Manage your payments and request docs
Get emergency assistance
Refer your friends to King Price

Tablet View (834px)

Download our app or register on our self-service portal

Self-inspect your car/motorbike
Add more cover/products to your policy
View/manage your policy info and update your excess
Submit/track the progress of your claim
Manage your payments and request docs
Get emergency assistance
Refer your friends to King Price

Mobile View (360px)

Download our app or register on our self-service portal

Self-inspect your car/motorbike
Add more cover/products to your policy
View/manage your policy info and update your excess
Submit/track the progress of your claim
Manage your payments and request docs
Get emergency assistance
Refer your friends to King Price

Component Name: _DownloadOurAppSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

QR Code Section

Desktop View (1520px)

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Tablet View (834px)

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Mobile View (360px)

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Discover more on the app

Manage your policy effortlessly with just a few taps using our handy platform.

Component Name: _QRCodeSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Info Card

Mobile View (360px)

Your car is damaged and being repaired

Learn more

Your car is damaged and being repaired

Learn more

Component Name: _InfoCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Download Button

Mobile View (360px)

Component Name: _DownloadButton.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Mini Card Component

Mobile View (360px)

Simply call 0860 50 50 50 or book your king's cab online.

You can pre-book your king’s cab for a specific time.

Component Name: _MiniCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Text Button Component

Desktop View (1520px)

Example text button

Tablet View (834px)

Example text button

Mobile View (360px)

Example text button

Component Name: _TextButton.cshtml

Parameter	Is Optional	Default Value	Type	Description
TextButtonContainerId	False	None	string	Id for the Text Button container.
Text	False	None	TypographyText	Text to be displayed between the buttons.
LeftIconUrl	True	None	string	Path for the Left button icon.
RightIconUrl	True	None	string	Path for the Right button icon.
LeftIconAlt	True	None	string	Path for the Left button placeholder icon.
RightIconAlt	True	None	string	Path for the Right button placeholder icon.
LeftIconName	True	None	string	Name for the Left button icon.
RightIconName	True	None	string	Name for the Right button icon.
OnClickFunctionLeft	True	None	string	Function name for the Left button onClickFunction.
OnClickFunctionRight	True	None	string	Function name for the Right button onClickFunction.

Pill Toggle Dropdown Component

Mobile View (360px)

Component Name: _PillToggleDropdown.cshtml

Parameter	Is Optional	Default Value	Type	Description
DropdownId	False	None	string	Id for the pill toggle dropdown.
Options	False	None	List<TypographyText>	List of options to display.
IconUrl	True	None	string	Path of the icon to display.
IconAlt	True	None	string	Path of the alt icon to display.
IconName	True	None	string	Name of the icon to display.

Custom Table Component

Desktop View (1520px)

	R0 - R100,000	R100,000 - R150,000	R150,000 - R200,000	R200,000+
Max mileage	200,000km	200,000km	200,000km	200,000km
Engine: Max payout	R15,000	R20,000	R25,000	R35,000
Gearbox: Max payout	R15,000	R20,000	R25,000	R35,000
Diff: Max payout	R15,000	R20,000	R25,000	R35,000
Turbo: Max payout	R7,500	R7,500	R10,000	R12,000
Management system: Max payout	No cover	R7,500	R10,000	R12,000
Fuel system: Max payout	No cover	No cover	R5,000	R7,000
Electronic ignition: Max payout	No cover	R7,500	R10,000	R12,000
Cooling system: Max payout	No cover	R5,000	R5,000	R7,000
Overheating: Max payout	R7,500	R10,000	R12,500	R17,500
Electrical components: Max payout	No cover	No cover	R5,000	R7,000
Cambelt: Max payout	R2,000	R3,500	R5,000	R7,000
Clutch	No cover	No cover	No cover	No cover
Suspension	No cover	No cover	No cover	No cover
Over- and under- fuelling	No cover	No cover	No cover	No cover

Please note that the above table is a guideline only. The actual amount will depend on the make and model of your vehicle, as well as the age and mileage

Tablet View (834px)

	R0 - R100,000	R100,000 - R150,000	R150,000 - R200,000	R200,000+
Max mileage	200,000km	200,000km	200,000km	200,000km
Engine: Max payout	R15,000	R20,000	R25,000	R35,000
Gearbox: Max payout	R15,000	R20,000	R25,000	R35,000
Diff: Max payout	R15,000	R20,000	R25,000	R35,000
Turbo: Max payout	R7,500	R7,500	R10,000	R12,000
Management system: Max payout	No cover	R7,500	R10,000	R12,000
Fuel system: Max payout	No cover	No cover	R5,000	R7,000
Electronic ignition: Max payout	No cover	R7,500	R10,000	R12,000
Cooling system: Max payout	No cover	R5,000	R5,000	R7,000
Overheating: Max payout	R7,500	R10,000	R12,500	R17,500
Electrical components: Max payout	No cover	No cover	R5,000	R7,000
Cambelt: Max payout	R2,000	R3,500	R5,000	R7,000
Clutch	No cover	No cover	No cover	No cover
Suspension	No cover	No cover	No cover	No cover
Over- and under- fuelling	No cover	No cover	No cover	No cover

Please note that the above table is a guideline only. The actual amount will depend on the make and model of your vehicle, as well as the age and mileage

Mobile View (360px)

	R0 - R100,000	R100,000 - R150,000	R150,000 - R200,000	R200,000+
Max mileage	200,000km	200,000km	200,000km	200,000km
Engine: Max payout	R15,000	R20,000	R25,000	R35,000
Gearbox: Max payout	R15,000	R20,000	R25,000	R35,000
Diff: Max payout	R15,000	R20,000	R25,000	R35,000
Turbo: Max payout	R7,500	R7,500	R10,000	R12,000
Management system: Max payout	No cover	R7,500	R10,000	R12,000
Fuel system: Max payout	No cover	No cover	R5,000	R7,000
Electronic ignition: Max payout	No cover	R7,500	R10,000	R12,000
Cooling system: Max payout	No cover	R5,000	R5,000	R7,000
Overheating: Max payout	R7,500	R10,000	R12,500	R17,500
Electrical components: Max payout	No cover	No cover	R5,000	R7,000
Cambelt: Max payout	R2,000	R3,500	R5,000	R7,000
Clutch	No cover	No cover	No cover	No cover
Suspension	No cover	No cover	No cover	No cover
Over- and under- fuelling	No cover	No cover	No cover	No cover

Please note that the above table is a guideline only. The actual amount will depend on the make and model of your vehicle, as well as the age and mileage

Component Name: _CustomTable.cshtml

Parameter	Is Optional	Default Value	Type	Description
TableId	False	None	string	Id for the custom table.
ColumnHeaders	False	None	List<TypographyText>	Table column heading data.
RowHeaders	False	None	List<TypographyText>	Table column row data.
RowValues	False	None	List<List<TypographyText>>	2D array containing data for the row values.
ShowMoreSizeThreshold	False	None	int	Horizontal screen width in pixels that shows scroll buttons if table is smaller than this value.
MinimumRows	False	None	int	Number of rows to display before the show more buttons appear.

Custom Button Component

Mobile View (360px)

Component Name: _CustomButton.cshtml

Parameter	Is Optional	Default Value	Type	Description
ButtonText	False	None	string	Text displayed on button.
Color	True	None	ButtonColour	Select colour type for button. Possible options: primary, secondary, tertiary, danger, warning, confirm
Size	True	None	ButtonSize	Sets the size of the button. Possible options: large, medium, small.
Style	True	None	ButtonStyle	Sets the style of the button. Possible options: solid, outlined.
Width	True	None	int	Sets the width of the button in px.
IsDisabled	True	None	bool	Enable or disable the button.
OnClickFunction	True	None	string	References the .js function to execute on click.
ButtonId	True	None	string	Sets the Id of the button.
IsBoldText	True	None	bool	Sets the case of the text in the custom button.
ButtonTextList	True	None	TypographyText	Display a list of typography text on the button.
Button Content Align	True	None	ButtonContentAlign	Sets the alignment of the content within the button: Start, Center.

Product Introduction Section Component

Desktop View (1520px)

Personal Insurance

Everything about

car insurance

We’re the only insurer to offer premiums that decrease monthly as your car loses value. It’s the fair and logical way insurance should be done!

Everything about car insurance

We’re the only insurer to offer premiums that decrease monthly as your car loses value. It’s the fair and logical way insurance should be done!

Component Name: _ProductionIntroductionSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
Desktop Image Url	False	None	string	Image used for desktop.
Tablet Image Url	False	None	string	Image used for tablet.
Tablet Image Url	False	None	string	Image used for tablet.
Insurance category	False	None	string	Text used for badge.

Insurance Category Badge

Desktop View (1520px)

Car Insurance

Component Name: _CategoryBadge.cshtml

Parameter	Is Optional	Default Value	Type	Description
Text	False	None	string	Text displayed on badge.

Helpful Info Card

Desktop View (1520px)

How to claim

Although, let's hope you won't ever need to.

Learn more

Component Name: _HelpfulInfoCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
No parameters available.

Highlights Card

Desktop View (1520px)

Get up to 20% off

When you insure multiple cars

T’s & C’s apply. Premiums are risk profile dependent and reviewed annually.

Get up to 20% off

When you insure multiple cars

T’s & C’s apply. Premiums are risk profile dependent and reviewed annually.

Component Name: _HighlightsCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
ComponentModelList	False	None	IEnumerable<TypographyText>	List of heading section components that will display in the heading section.

Bread Crumbs

Desktop View (1520px)

Component Name: _BreadCrumbs.cshtml

Parameter	Is Optional	Default Value	Type	Description
Path Name	False	None	string	Text displayed on path name.
Path Url	False	None	string	Url path for the given path name.

Carousel control

Desktop View (1520px)

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut a

Learn more

Heading

Learn more

Heading

Learn more

Component Name: _CarouselControl.cshtml

Parameter	Is Optional	Default Value	Type	Description
PartialViewRoute	False	None	string	This is to pass in the partial view component you created. You just give the route to the view you want to render
ComponentModelList	True	None	List<Object>	This is the model you need to pass in that the partial view needs.

Typography

Desktop View (1520px)

Display 1 Bold

Display 2 Light

Display 4 Extra-Bold

Display 5 Light

Display 6 Light

Display 9 Bold

Display 5 Light

Display 1 Bold

Display 9 Bold

Heading 2 Bold

Heading 3 Light

Heading 4 Bold

Heading 10 Light

Heading 60

Heading 80

Heading 9 Bold

Sub-heading 1 Bold

Sub-heading 2 Bold

Sub-heading 3 Semibold

Sub-heading 1 Bold

Sub-heading 3 Semi-Bold

Body copy 1

Body copy 2

Body copy 3

Body copy 4

Body copy 5

Description 1

Description 2

Description 3

Description 4

Description 5

Description 4 Semi-Bold

Body Copy 2 Semi-Bold

SmallExtraBold

Buttons

Component Name: _TypographyText.cshtml

Parameter	Is Optional	Default Value	Type	Description
Text	False	None	string	The text displayed.
Colour	True	Primary	TextColour	Sets the colour of text to display. Possible Options: Primary, Secondary, PrimaryRed, DangerShade
Type	False	None	TextType	Sets the type of text to display. Possible Options: Display1, Display2, Display5, Display9, Heading2, Heading3, Heading4, Heading10, SubHeading1, SubHeading2, SubHeading3, BodyCopy1, BodyCopy2, BodyCopy3, BodyCopy5, Description1, Description2, Description3, Description4
MobileType	True	None	TextType	Sets the typ of the font on a mobile screen. Possible Options: Display1, Display2, Display5, Display9, Heading2, Heading3, Heading4, Heading10, SubHeading1, SubHeading2, SubHeading3, BodyCopy1, BodyCopy2, BodyCopy3, BodyCopy5, Description1, Description2, Description3, Description4

Contact Info Column

Mobile View (360px)

Sales

Component Name: _ContactInfoColumn.cshtml

Parameter	Is Optional	Default Value	Type	Description
ColumnHeading	False	None	TypographyText	Heading of the column.
ButtonList	False	None	List<CustomButtons>	List of buttons to display in the column.

Info Column

Mobile View (360px)

Mondays to Fridays Client care: 06:00 - 23:00 Claims: 08:00 - 17:00 Call centre: 08:00 - 17:00

Component Name: _InfoColumn.cshtml

Parameter	Is Optional	Default Value	Type	Description
InfoList	False	None	List<TypographyText>	List of info items.
InfoHeading	False	None	TypographyText	Heading of Info Item.

Loader

Desktop View (1520px)

Component Name: _LoaderComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
Loader	True	None	Loader	Loader component
Refresh button component	True	None	Loader	Refresh button

RadiobuttonSelectionCard

Desktop View (1520px)

Sweet

Sour

Component Name: _RadioButtonSelectionCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
SelectionCardId	False	None	String	Unique Id for the card.
DisabledIconUrl	False	None	string	Icon url for disable icon
EnabledIconUrl	False	None	string	Icon url for enabled icon
CardHeading	False	None	TypographyText	Heading of the card
RadioButton	False	None	RadioButton	Radio button for card

Text Page Component

Desktop View (1520px)

This is a test Text Page Section

Tablet View (834px)

This is a test Text Page Section

Mobile View (360px)

This is a test Text Page Section

Component Name: _TextPage.cshtml

Parameter	Is Optional	Default Value	Type	Description
Elements	False	None	TextSection, TextHeading, or TextList	List of elements to display on the page.

Text List Component

Desktop View (1520px)

This is a test Text List Section

Tablet View (834px)

This is a test Text List Section

Mobile View (360px)

This is a test Text List Section

Component Name: _TextList.cshtml

Parameter	Is Optional	Default Value	Type	Description
List<object>	False	None	ListItem, TextList, or TextHeading	List of text to display.

Button List Component

Desktop View (1520px)

Heading

Option 1 Option 2 Option 3

Tablet View (834px)

Heading

Option 1 Option 2 Option 3

Mobile View (360px)

Heading

Option 1 Option 2 Option 3

Component Name: _ButtonList.cshtml

Parameter	Is Optional	Default Value	Type	Description
Id	False	None	String	Unique Id for the component.
Heading	False	None	TypographyText	Heading for the button list.
Buttons	False	None	List<TypographyText>	List of buttons to display.
IsDropdown	True	None	bool	Set to true if the button list is a dropdown.
IconUrl	True	None	string	Path of the icon to display.
IconAlt	True	None	string	Path of the alt icon to display.
IconName	True	None	string	Name of the icon to display.
LineUrl	True	None	string	Path of the line to display.

Dropdown Button Component

Desktop View (1520px)

Tablet View (834px)

Mobile View (360px)

Component Name: _DropdownButton.cshtml

Parameter	Is Optional	Default Value	Type	Description
Id	False	None	String	Unique Id for the component.
ButtonText	False	None	TypographyText	Text for the button.
DropdownItems	False	None	List<DropdownItem>	List of dropdown items to display.
LeftIconUrl	True	None	string	Path of the left icon to display.
RightIconUrl	True	None	string	Path of the right icon to display.

Pill Toggle Components Component

Desktop View (1520px)

Component Name: _PillToggleComponents.cshtml

Parameter	Is Optional	Default Value	Type	Description
DropdownId	False	None	String	Unique Id for the dropdown.
Options	False	None	List op options	List of options you want to pass into the pill toggle
SelectedOptionText	False	None	String	Name of the item that needs to display first

Badge Component

Desktop View (1520px)

Badge

Component Name: _BadgeComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
BadgeHeadingSection	False	None	Heading Section	Heading section
BadgeColor	False	None	BadgeColor	Color of the badge component
BadgeType	False	None	BadgeType	The type of badge for example corner or standalone
BadgeSize	False	None	BadgeSize	This is the size of the badge: Large, Default, Medium, Small

Image Component

Desktop View (1520px)

Image component

Component Name: _ImageComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
Unique container Id	False	None	String	Unique Id for the Image container
ImageUrl	False	None	CDN URL	Image for the Image container
Badge	True	None	BadgeComponent	Badge component
Mobile Badge	True	None	BadgeComponent	Mobile badge component
ApplyBoxShadow	True	None	bool	Bool to apply box shadow

SVG Image Component

Desktop View (1520px)

View our career opportunities online.

Component Name: _SVGComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
SVG Image	False	None	Image Component	This will display the image on the component
Heading	False	None	Heading Section	This will display the heading on the component

Application Component

Desktop View (1520px)

How our application process works

Follow these simple steps for a shot at joining our royal work family!

View our career opportunities online.

Component Name: _ApplicationComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
UniqueContainerId	False	None	String	Unique Id for the container
Heading	False	None	Heading Section	This will display the heading on the component
SVG Component	False	None	SVGComponent	This component will display the image with heading section
CareerOpportunities	False	None	Custom button	This component will display the View career opportunities button

Virtical Scrolling Image Component

Desktop View (1520px)

Component Name: _ImageScrollingComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
Columns	False	None	List of List ImageComponents	This is a 2D array of images in columns

Hover card Component

Desktop View (1520px)

Component Name: _HoverCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
Image	False	None	Image Component	This is the image on the Hover card
Text	False	None	Typography text	This is the text on the Hover card

Generic Component

Desktop View (1520px)

Best of Pretoria Readers' Choice Award

Category: Best Insurance Company (Home and Car) Place: Winner

Component Name: _GenericComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
UniqueId	False	None	String	This Id will uniquely identify the component
Components	False	None	List of List Objects	This is basically a list of list objects.

Mixed Hover Card Component List

Desktop View (1520px)

Component Name: _MixedHoverCardListComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
Unique Id	False	None	String	Unique Id of component
Items	False	None	List of objects	List of items in the component

Legend Component

Desktop View (1520px)

Find out what each term means:

ADAS

Mobile

TWT

VIC

Component Name: _LegendComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
LegendText	False	None	TypographyText	Text for legend component
HoverIcons	False	None	List of HoverIcons	List of hover icons

Document Badge Component

Desktop View (1520px)

Claims consultant

Pretoria, Gauteng

Closing date: 31 July 2025

Learn more

KING PRICE

Component Name: _DocumentBadgeComponent.cshtml

Parameter	Is Optional	Default Value	Type	Description
TopHeading	False	None	TypographyText	heading of card
CardBody	False	None	List<TypographyText>	Body of card
BadgeCard	False	None	BadgeComponent	Badge component
LearnMore	False	None	LearnMore	Learn more button

Parameter	Is Optional	Default Value	Type	Description
Elements	False	None	List<object>	List of object you want to pass trough
Type	False	None	string	Type of document page
Id	False	None	string	Id of component

Sections

Image banner section

Desktop View (1520px)

About us

We’re the cool kid of the insurance industry, fighting for cheap premiums, fair claim payouts, royal service, and easy-to-understand policies.

About us

We’re the cool kid of the insurance industry, fighting for cheap premiums, fair claim payouts, royal service, and easy-to-understand policies.

Our story

Once upon a time (okay, just over a decade ago) a guy named Gideon had a big dream: What if insurance wasn’t boring, complicated, or just about profit? What if it was fair, full of purpose… And maybe even a little cool?
Gideon pitched his dream to 41 investors. Forty. One. Most people tap out after 3 awkward Teams calls, but not Gideon! He knew this mission was bigger than premiums, presentations and endless pitches. And finally, on lucky number 42, he met a team who believed in it too.
Enter Mergon: A bold bunch of entrepreneurial investors with a serious heart for #MakingADifference. Inspired by Gideon’s larger-than-life dream, they took a chance on King Price. Fast-forward a few years, and that R100 million startup? Now a R9 billion industry disrupter. Just like that!
We’ve always backed the little guy. The ones who get overlooked, underestimated, or left behind. Why? Because we were the little guy once too. That journey shaped us, and now we’re paying it forward… Boldly, proudly, and with purpose.
We don’t just sell insurance. We flip it on its head. Case in point: Our world-first comprehensive car insurance premiums that decrease monthly and our R1 insurance! (Because who says peace of mind has to cost a fortune?)
From your car, home, business, and everything in between, we’ve got you covered. (Except for your questionable sock collection. That’s between you and your washing machine.)
We’re a squad of believers, optimists, and realists. But we’re also moms, dads, brothers, sisters, besties, and proud South Africans. We care about our people, our communities, and our future. We’re a world-class company that’s changing the world. We just happen to sell insurance.

Component Name: _ImageBannerSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
CircleImageUrl	True	None	string	Url for background ellipse
RectangleImageUrl	True	None	string	Url for background rectangle
ImageComponent	True	None	ImageComponent	Image component
CarouselHeadingSection	True	None	HeadingSection	Heading for carousel
CarouselHeadingSectionMobile	True	None	HeadingSection	Mobile heading for carousel
CustomCarousel	True	None	CustomCarouselComponent	Custom carousel component
HeadingSection	True	None	HeadingSection	Text for heading section above image banner
HeadingSectionMobile	True	None	HeadingSection	Text for heading section above image banner mobile

Info Card Section

Desktop View (1520px)

In a nutshell

From comprehensive car insurance, to third party only insurance, we've got an option for every need and budget out there.

Choose the cover you want

In a nutshell

From comprehensive car insurance, to third party only insurance, we've got an option for every need and budget out there.

Choose the cover you want

Comprehensive

Your comprehensive car insurance premium decreases monthly as your car loses value. This covers you for accident damage, theft, hi-jacking, and damage to other people's property as the result of a car accident that you're involved in.

Agreed value

The only difference between our agreed value and comprehensive cover options? With agreed value, the insured value that's noted on your policy schedule is the amount that the car is covered for, for 3 years.

Theft and write-off

This covers you for the total loss of your car, like if it's written-off, or if it's stolen or hi-jacked and not recovered.

Third party, fire and theft

This covers you for theft and hi-jacking. It also covers you for damage to other people's property due to a car accident you're involved in.

Third party only

This covers you for accidental damage you cause to other people's property (third party liability) as the result of a car accident.

Collectable car

Similar to our comprehensive option, insuring your classic or high-value car against accident damage, theft, and damage to other people's property. This works on a 'pay per k' basis, so the less you drive, the less you pay!

Comprehensive

Agreed value

Theft and write-off

This covers you for the total loss of your car, like if it's written-off, or if it's stolen or hi-jacked and not recovered.

Third party, fire and theft

This covers you for theft and hi-jacking. It also covers you for damage to other people's property due to a car accident you're involved in.

Third party only

This covers you for accidental damage you cause to other people's property (third party liability) as the result of a car accident.

Collectable car

Component Name: _InfoCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
Path Name	False	None	string	Text displayed on path name.
Path Url	False	None	string	Url path for the given path name.

Focus Section

Desktop View (1520px)

Insure your golf clubs, hearing aids, bicycle, or motorbike gear for only

R1 a month

When you insure your car or motorbike comprehensively.

T’s & C’s apply. Premiums are risk profile dependent and reviewed annually.

Component Name: _FocusSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
ImageUrl	False	None	string	Image url path to display the icon
TopHeading	False	None	string	This is the top heading section.
SubHeading	False	None	string	This is the subheading section.
Description	False	None	string	This is the description section.
TermsAndConditions	False	None	string	This is the terms and conditions section.

Heading Section

Desktop View (1520px)

Trusted and backed by the best

This is the description of the heading body

Tablet View (834px)

Trusted and backed by the best

This is the description of the heading body

Mobile View (360px)

Trusted and backed by the best

This is the description of the heading body

Component Name: _HeadingSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingTextList	False	None	List<TypographyText>	List of heading types that will display in the heading section.
Body	True	None	TypographyText	Text body that will display in the body section.
Align	True	Centre	HeadingAlign	Alignment of the text in the heading section. Possible Options: Left, Centre, Right,

Heading Section List

Desktop View (1520px)

Trusted and backed by the best

This is te body text that you can mek as you wish

Trusted and backed by the best

Component Name: _HeadingSectionList.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSectionList	True	[]	List<HeadingSection>	List of heading sections to display

Simple Heading Section

Desktop View (1520px)

Understanding under-insurance

It's important to insure your home contents for their total replacement value (aka what it would cost to replace the items that you're claiming for with new items). If you insure the contents for an amount less than their replacement value, we’ll then pay you proportionately. So,if the correct total insured value of the home contents at the time of a claim is R400,000 and you insure them for R200,000 only, then you’ll only be compensated for 50% of your loss. Not sure how much cover you need? This handy form should help:

Understanding under-insurance

Tablet View (834px)

Understanding under-insurance

Mobile View (360px)

Understanding under-insurance

Component Name: _SimpleHeadingSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSection	False	None	HeadingSection	Text you pass in to create the heading and the body. Bothe arwe a list so you can pass multiple in
HeadingSectionMobile	False	None	HeadingSection	Text you pass in to create the heading and the body. Bothe arwe a list so you can pass multiple in. This is only for mobile view
DownloadInventoryFormButton	False	None	CustomButton	Text you pass in to create a button with text
DownloadInventoryFormButtonMobile	False	None	CustomButton	Text you pass in to create a button with text for mobile only

Floating Card

Mobile View (360px)

Car hire

Learn more

Component Name: _FloatingCard.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSection	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in
HeadingSectionMobile	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in. This is only for mobile view
Image	False	None	Image url	Floating card image
Learn more button	True	None	CustomButton	Learn more button

FlipCardSection

Desktop View (1520px)

Our riders

Meet the Xtreme trailblazers flipping the sports scene upside down.

Our riders

Meet the Xtreme trailblazers flipping the sports scene upside down.

Superbiker

Cayden Robert

Turbo teen

Superbiker

Blake Robert

Young dynamite

Superbiker

Clint Seller

Mad Max

Cycler

Candice Lill

Pedal phoenix

Cycler

Philip Buys

Nitro wheels

Cycler

Pressmore Musundi

Crankzilla

Cycler

Jaedon Terlow

Trail titan

Cycler

Michael Foster

Chain breaker

Cycler

Pieter du Toit

Hyper spokes

SACCS Rider

Schalk Burger

The legend

Superbiker

Cayden Robert

Turbo teen

Superbiker

Blake Robert

Young dynamite

Superbiker

Clint Seller

Mad Max

Cycler

Candice Lill

Pedal phoenix

Cycler

Philip Buys

Nitro wheels

Cycler

Pressmore Musundi

Crankzilla

Cycler

Jaedon Terlow

Trail titan

Cycler

Michael Foster

Chain breaker

Cycler

Pieter du Toit

Hyper spokes

SACCS Rider

Schalk Burger

The legend

Tablet View (834px)

Our riders

Meet the Xtreme trailblazers flipping the sports scene upside down.

Our riders

Meet the Xtreme trailblazers flipping the sports scene upside down.

Superbiker

Cayden Robert

Turbo teen

Superbiker

Blake Robert

Young dynamite

Superbiker

Clint Seller

Mad Max

Cycler

Candice Lill

Pedal phoenix

Cycler

Philip Buys

Nitro wheels

Cycler

Pressmore Musundi

Crankzilla

Cycler

Jaedon Terlow

Trail titan

Cycler

Michael Foster

Chain breaker

Cycler

Pieter du Toit

Hyper spokes

SACCS Rider

Schalk Burger

The legend

Superbiker

Cayden Robert

Turbo teen

Superbiker

Blake Robert

Young dynamite

Superbiker

Clint Seller

Mad Max

Cycler

Candice Lill

Pedal phoenix

Cycler

Philip Buys

Nitro wheels

Cycler

Pressmore Musundi

Crankzilla

Cycler

Jaedon Terlow

Trail titan

Cycler

Michael Foster

Chain breaker

Cycler

Pieter du Toit

Hyper spokes

SACCS Rider

Schalk Burger

The legend

Component Name: _FlipCardSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSection	False	None	HeadingSection	Heading for the section
HeadingSectionMobile	True	None	HeadingSection	Heading for the section to display on mobile
CarouselModel	False	None	CarouselModel	Carousel model for desktop
CarouselModelMobile	False	None	CarouselModel	Carousel model for mobile

2 of your friends can catch the same ride as long as you’re all going to the same place.

Component Name: _MiniCardSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSection	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in
IconImageUrl	True	None	Icon url	Mini Card Icon

Stacked Information Section

Desktop View (1520px)

Why choose King Price Insurance

From decreasing premiums, to R1 insurance, and no excess when you're 45 years or older...... We're all about royal service and simple cheap insurance to make life easier.

Why choose King Price Insurance

From decreasing premiums, to R1 insurance, and no excess when you're 45 years or older...... We're all about royal service and simple cheap insurance to make life easier.

Component Name: _StackedInformationSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
HeadingSection	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in
GetAQuoteButton	True	None	CustomButton	Button for getting a quote. Mobile for this also exist
ReferFriendButton	True	None	CustomButton	Button for refering a friend. Mobile for this also exist
DesktopImageUrl	False	None	String	Image url path for desktop image
TabletImageUrl	False	None	String	Image url path for tablet image
SmallImageSize	True	None	ImageSize	Setting image size
LargeImageSize	True	None	ImageSize	Setting image size
ReferalCardId	False	None	String	Passing in id so that the javascript knows which component it is working with

Helpful Info Section

Desktop View (1520px)

Helpful info

Got an emergency or need to claim? Check out the info below.

Helpful info

Got an emergency or need to claim? Check out the info below.

In case of emergencies, call or WhatsApp 0860 50 50 50 (and press 9).

How to claim

Although, let's hope you won't ever need to.

Learn more

The king's emergency assistance

Your own royal guard is just a call away.

Learn more

For more info, check out our policy wording and other important docs.

Component Name: _HelpfulInfoSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
Heading	False	None	HeadingSection	Text you pass in to create the heading and the body. Both are a list so you can pass multiple in
ExtraInfoCard	True	None	ExtraInfoCard	Part to add the extra info card
InfoCardList	False	None	HelpfulInfoCard	Cards to create the red cards on component
ParagraphSection	True	None	HeadingSection	Adding the paragraph part under the red cards
DownloadButtons	True	None	CustomButton	Buttons for the download part. Mobile for this also exist

Info Section

Desktop View (1520px)

It's in the bag

Golf clubs can set you back a bit. You can’t even buy a golf ball for R1, but you can pay R1 for insurance if you comprehensively insure your car with the king. If you comprehensively insure multiple cars with King Price, you can also insure your  bicycle or hearing aids  for this crazy price... 2 cars = 2 × R1 insurance items; 3 cars = 3 × R1 insurance items; and so on. Get it? Good!

Imagine what you could save each year… It can go a long way towards a membership at a golf course with more challenging fairways. Swing away!

It's in the bag

Imagine what you could save each year… It can go a long way towards a membership at a golf course with more challenging fairways. Swing away!

Component Name: _InfoSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
DesktopImageUrl	False	None	string	Url for desktop image
MobileImageUrl	False	None	string	Url for mobile image
TopHeading	False	None	HeadingSection	Text for heading. Mobile also exist for this.
Description	False	None	HeadingSection	Text for description below heading. Mobile for this also exist
InfoSectionButtons	False	None	CustomButton	You can pass in a list of buttons. Mobile for this also exist

Animated Component List Section

Desktop View (1520px)

2024

Best of Pretoria Readers' Choice Award

Category: Best Insurance Company (Home and Car) Place: Winner

Component Name: _AnimatedComponentListSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
BackgroundDate	False	None	HeadingSection	Date displayed in the background
Components	False	None	list	List of componets

Sliding Carousel Section

Desktop View (1520px)

Some of our awards

Component Name: _SlidingCarouselSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
SlidingCarouselControl	False	None	SlidingCarouselControl	Sliding carousel control components for images
HeadingSection	False	None	HeadingSection	Text for heading.
HeadingMobile	False	None	HeadingSection	Text for mobile heading.
UniqueId	False	None	string	Unique Id for the sliding carousel component.
SlidingCarouselSectionButtons	True	None	List<CustomButtons>	List of buttons to display below the sliding carousel.
SlidingCarouselSectionMobileButtons	True	None	List<CustomButtons>	List of buttons to display below the sliding carousel on mobile.

View more or less Section

Desktop View (1520px)

Career opportunities

Keen on 1 of these opportunities? Fill in your details below and we'll get back to you.

Career opportunities

Keen on 1 of these opportunities? Fill in your details below and we'll get back to you.

More career opportunities

Less career opportunities

Component Name: _ViewMoreOrLessSection.cshtml

Parameter	Is Optional	Default Value	Type	Description
Heading	False	None	HeadingSection	Heading of section
MobileHeading	False	None	HeadingSection	Mobile heading of section
HeadingEmptyResponse	False	None	HeadingSection	Heading when response is empty
MobileHeadingEmptyResponse	False	None	HeadingSection	Mobile heading when response is empty
DocumentsPage	False	None	DocumentsPageComponent	Document page component
ViewMoreOrLessReload	False	None	ReloadComponent	Reload componnet when there is an error
ViewMoreOrLessEmptyReload	False	None	ReloadComponent	When response is empty

All fields are required

All fields are required

Components

FlipCardComponent

Desktop View (1520px)

Component Name: _FlipCardComponent.cshtml

Badge Card

Desktop View (1520px)

2013

2013

R1 insurance hits SA! We also launch dealership & broker channels. The kingdom expands!

Component Name: _BadgeCard.cshtml

Custom Carousel

Desktop View (1520px)

R1 insurance

Learn more

R1 insurance

Learn more

Component Name: _CustomCarousel.cshtml

SlidingCarousel

Desktop View (1520px)

Component Name: _SlidingCarouselControl.cshtml

MediaPlayer

Desktop View (1520px)

Tablet View (834px)

Mobile View (360px)

Component Name: _MediaPlayer.cshtml

Accordion

Desktop View (1520px)

Tablet View (834px)

Mobile View (360px)

Component Name: _AccordionComponent.cshtml

Chip

Desktop View (1520px)

Component Name: _ChipComponent.cshtml

Hover Icon

Desktop View (1520px)

Component Name: _HoverIcon.cshtml

Popover

Desktop View (1520px)

Component Name: _Popover.cshtml

Popup Modal

Mobile View (360px)

Oops!

Component Name: _PopupModal.cshtml

Show Popup Modal

Mobile View (360px)

Component Name: _CustomButton.cshtml

Textbox controller

Mobile View (360px)

Component Name: _TextBoxControl.cshtml

Race Dates Table Section

Desktop View (1520px)

Component Name: _PillToggleComponents.cshtml

Radio controller

Mobile View (360px)

Component Name: _RadioButtonControl.cshtml

Checkbox control

Desktop View (1520px)

Component Name: _CheckboxControl.cshtml

Toggle control

Desktop View (1520px)

Component Name: _ToggleButtonControl.cshtml

Textarea control

Desktop View (1520px)

Component Name: _TextareaControl.cshtml

Captcha card

Desktop View (1520px)

Component Name: _CaptchaCard.cshtml

Extra Information Card Component

Desktop View (1520px)

Tablet View (834px)

Mobile View (360px)

Component Name: _ExtraInfoCard.cshtml

Product Card Component

Mobile View (360px)

This is Bold This is normal

This is Bold This is normal

Learn more

Component Name: _ProductCard.cshtml