On this page
Components
Utilities

Prisma 4.6.0

Build with Bootstrap

Colours

Primary / Celcom

 

Celcom Blue

#009BDF

 

Celcom Purple

#793680

 

Xpax Purple

#6A418F

 

Xpax Orange

#F37021

Secondary / Axiata

 

Axiata Blue

#164396

 

Axiata Gold

#FDB934

 

Axiata Red

#C40D42

 

Axiata Orange

#F7941E

 

Axiata Red Orange

#F15A22

 

Axiata Purple

#7B1B67

 

Axiata Magenta

#EE3E80

Neutral

 

Black 80%

#333333

 

Black 60%

#666666

 

Black 40%

#999999

 

Black 20%

#CCCCCC

 

Black 10%

#E6E6E6

 

Black 5%

#F3F3F3

 

White

#FFFFFF

Utility

 

Utility Green

#21C479

 

Utility Yellow

#FCBA35

 

Utility Orange

#FF9700

 

Utility Red

#F44236

Tertiary

 

Celcom Blue

#009BDF

(20% Black Overlay)

OR #007CB2

 

Celcom Purple

#793680

(20% Black Overlay)

OR #612B66

 

Xpax Purple

#6A418F

(20% Black Overlay)

OR #553472

 

Xpax Orange

#F37021

(20% Black Overlay)

OR #C25A1A

 

Celcom Blue

#009BDF

(20% White Overlay)

OR #33AFE5

 

Celcom Purple

#793680

(20% White Overlay)

OR #945E99

 

Xpax Purple

#6A418F

(20% White Overlay)

OR #8867A5

 

Xpax Orange

#F37021

(20% White Overlay)

OR #F58D4D

 

Axiata Blue

#164396

(20% Black Overlay)

OR #123678

 

Axiata Gold

#FDB934

(20% Black Overlay)

OR #CA942A

 

Axiata Red

#C40D42

(20% Black Overlay)

OR #9D0A35

 

Axiata Orange

#F7941E

(20% Black Overlay)

OR #C67618

 

Axiata Red Orange

#F15A22

(20% Black Overlay)

OR #C1481B

 

Axiata Purple

#7B1B67

(20% Black Overlay)

OR #621652

 

Axiata Magenta

#EE3E80

(20% Black Overlay)

OR #BE3266

 

Axiata Blue

#164396

(20% White Overlay)

OR #123678

 

Axiata Gold

#FDB934

(20% White Overlay)

OR #CA942A

 

Axiata Red

#C40D42

(20% White Overlay)

OR #9D0A35

 

Axiata Orange

#F7941E

(20% White Overlay)

OR #C67618

 

Axiata Red Orange

#F15A22

(20% White Overlay)

OR #C1481B

 

Axiata Purple

#7B1B67

(20% White Overlay)

OR #621652

 

Axiata Magenta

#EE3E80

(20% White Overlay)

OR #BE3266

Gradient

 

Celcom Gradient

#793680 - #009BDF

 

Celcom Gradient

#793680 - #009BDF

(20% Black Overlay)

OR

#612B66 - #007CB2

 

Celcom Gradient

#793680 - #009BDF

(20% White Overlay)

OR

#945E99 - #33AFE5

Spacing

XXXL

80px

XXL

64px

XL

48px

L

40px

M

32px

S

24px

XS

16px

XXS

8px

XXXS

4px

None

0

Grid

Containers

XS
<576px
SM
≥576px
MD
≥768px
LG
≥992px
XL
≥1024px
XXL
≥1366px
.container 100% 544px 576px 912px 944px 1280px
.container-sm 100% 544px 576px 912px 944px 1280px
.container-md 100% 100% 576px 912px 944px 1280px
.container-lg 100% 100% 100% 912px 944px 1280px
.container-xl 100% 100% 100% 100% 944px 1280px
.container-xxl 100% 100% 100% 100% 100% 1280px
.container-fluid 100% 100% 100% 100% 100% 100%

Grid Example

Typography

Display 1

Lato Regular 64pt

Display 2

Lato Regular 56pt

Display 3

Lato Regular 54pt

Display 4

Lato Regular 52pt

Heading 1

Lato Regular 48pt

Heading 2

Lato Regular 32pt

Heading 3

Lato Regular 28pt

Heading 4

Lato Regular 24pt

Heading 5

Lato Regular 20pt

Heading 6

Lato Regular 16pt

Body 1

Lato Regular 16pt

Body 2

Lato Regular 14pt

Label

Lato Regular 12pt

Lists

Unordered List

  • Good news! Selected Celcom bluecubes and Celcom Certified Partners are operational during this period. Find nearest one here!
  • For existing Celcom subscriber, you can subscribe to Celcom Home Wireless through our call centre. Call us now at 1111 or +603-72002222
  • Good news! Selected Celcom bluecubes and Celcom Certified Partners are operational during this period. Find nearest one here!
    • For existing Celcom subscriber, you can subscribe to Celcom Home Wireless through our call centre. Call us now at 1111 or +603-72002222
      • For existing Celcom subscriber, you can subscribe to Celcom Home Wireless through our call centre. Call us now at 1111 or +603-72002222

Ordered List

  1. Good news! Selected Celcom bluecubes and Celcom Certified Partners are operational during this period. Find nearest one here!
  2. For existing Celcom subscriber, you can subscribe to Celcom Home Wireless through our call centre. Call us now at 1111 or +603-72002222
  1. Good news! Selected Celcom bluecubes and Celcom Certified Partners are operational during this period. Find nearest one here!
    1. For existing Celcom subscriber, you can subscribe to Celcom Home Wireless through our call centre. Call us now at 1111 or +603-72002222
      1. For existing Celcom subscriber, you can subscribe to Celcom Home Wireless through our call centre. Call us now at 1111 or +603-72002222

Shadow

Shadow SM

Shadow

Shadow Bottom

Dialogs

Modal

Toast

Progress

Tags

Default Pill

Primary Secondary Success Danger Warning Info Light Dark

Colours

Best Seller Exclusive Promotion Flash Sale 30% Off Ramadhan Sale Lower Price Further Markdown Free Most Popular New Pre-Order

Online Store

Call Barred Line Barred Expired Suspended Expiring Outstanding Active Inactive Preferred Auto Billing EasyPhone™ Roam Like Home

OCS

Open In Progress Closed Complete Cancelled

OCS (Support Status)

Device Bundle EasyPhone™ Just4ME™

Portal

Mini Pill

New

Separator

The Celcom Difference

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis elit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis elit sapien. consectetur adipiscing elit. Ut sagittis elit sapien. consectetur adipiscing elit. Ut sagittis elit sapien.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis elit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis elit sapien. consectetur adipiscing elit. Ut sagittis elit sapien. consectetur adipiscing elit. Ut sagittis elit sapien.

Win FREE 2 GB Video Walla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis diam egestas nisl placerat, id condimentum ex gravida. Curabitur dignissim odio sed justo sollicitudin, at rutrum leo sollicitudin. Ut aliquam commodo fermentum. Vestibulum ac pulvinar enim, eu commodo sem. Integer at leo quis velit mollis dapibus et vitae diam. Integer placerat imperdiet odio. Suspendisse in mattis sapien, quis ultrices augue.

Accordion

Accordion

Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the .show class.
Some placeholder content for the second accordion panel. This panel is hidden by default.
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

FAQ

Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the .show class.
Some placeholder content for the second accordion panel. This panel is hidden by default.
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

Tables

Default Table

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

Table with images and icons

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

Table responsive

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

Forms

Form Simple

Text Field
Dropdown
Radio Button
Checkbox
Textarea

Form Fancy

Switch
Slider
Dropdown
Text Field
Text Area
File Browser
Upload

Buttons

Primary

Mini

Default

Comfy

Variant

Reversed

Outline

Mini

Default

Comfy

Default

Variant

Reversed

Others

Secondary

Success

Danger

Warning

Info

Light

Dark

Text

Mini

Default

Comfy

Loader

Mini

Default

Comfy

Banners

Hero banner

Left variant

Call and surf seamlessly with VoLTE

Enjoy maximum internet speed and HD calls at the same time.

Right variant

Call and surf seamlessly with VoLTE

Enjoy maximum internet speed and HD calls at the same time.

Detail Banner - Partner Logo

Stream what you like monthly for free!

From RM99/month with FREE Galaxy Buds+

Only RM88/month with Celcom Home

Video banner

Introducing Celcom MEGA™

A plan that allows you to choose UNLIMITED internet or LIGHTNING speed!

Containers

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

List groups

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Cards

Card image cap
Promotion
Win FREE 2 GB Video Walla

Protect your smartphone from as low as RM0.13/day. One call and a new phone is yours.

Promotion
Win FREE 2 GB Video Walla

Protect your smartphone from as low as RM0.13/day. One call and a new phone is yours.

Card image cap
Card image cap
Win FREE 2 GB Video Walla

Protect your smartphone from as low as RM0.13/day. One call and a new phone is yours.

Featured
Win FREE 2 GB Video Walla

Protect your smartphone from as low as RM0.13/day. One call and a new phone is yours.

Card Deck

Card image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card Group

Card image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Tabs

Pills

Pills Responsive

Underlines

Underlines Responsive

Tabs with Dropdown

Tabs Responsive

Look at the size of that thing! Cut the chatter, Red Two. Accelerate to attack speed. This is it, boys! Red Leader, this is Gold Leader. I copy, Gold Leader. We're starting for the target shaft now. We're in position. I'm going to cut across the axis and try and draw their fire. Heavy fire, boss! Twenty-degrees. I see it. Stay low. This is Red Five, I'm going in! Luke, pull up! Are you all right? I got a little cooked, but I'm okay.

You must learn the ways of the Force if you're to come with me to Alderaan. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. I can't get involved! I've got work to do! It's not that I like the Empire. I hate it! But there's nothing I can do about it right now. It's such a long way from here. That's your uncle talking. Oh, God, my uncle. How am I ever going to explain this?

He says the restraining bolt has short circuited his recording system. He suggests that if you remove the bolt, he might be able to play back the entire recording. H'm? Oh, yeah, well, I guess you're too small to run away on me if I take this off! Okay. There you go. Well, wait a minute. Where'd she go? Bring her back! Play back the entire message. What message? The one you're carrying inside your rusty innards! Luke? Luke! Come to dinner! All right, I'll be right there, Aunt Beru. I'm sorry, sir, but he appears to have picked up a slight flutter. Well, see what you can do with him. I'll be right back. Just you reconsider playing that message for him. No, I don't think he likes you at all. No, I don't like you either.

It looks like an Imperial cruiser. Our passengers must be hotter than I thought. Try and hold them off. Angle the deflector shield while I make the calculations for the jump to light speed. Stay sharp! There are two more coming in, they're going to try to cut us off. Why don't you outrun them? I thought you said this thing was fast. Watch your mouth, kid, or you're going to find yourself floating home. We'll be safe enough once we make the jump to hyperspace. Besides, I know a few maneuvers. We'll lose them! Here's where the fun begins!

Indicators

Loader

Alerts

Heads up! This alert needs your attention, but it's not super important.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Warning! Better check yourself, you're not looking too good.