Complete Component Library

This showcase demonstrates all Kendo UI components styled with the Coca-Cola Consolidated brand design system, featuring Coca-Cola Red (#F40000), Diet Coke Silver (#B3B3B3), and Arial typography throughout per the official Brand Micro-Guide.

01

Buttons & Button Groups

Variants
Button Group
02

Chips

Coca-Cola Classic Zero Sugar Diet Coke Cherry × Vanilla ×
03

Input Components

Coca-Cola Classic × Diet Coke ×
05

Selection Controls

Checkboxes
Radio Buttons
Switch
Enable notifications
Auto-refresh data
06

File Upload

⬆
Click to upload or drag and drop files here
Supports multiple file types
07

TreeView & ListView

TreeView
▶ Coca-Cola Products
Coca-Cola Classic
Coca-Cola Zero Sugar
Diet Coke
▶ Flavored Varieties
▶ Regional Brands
ListView
Project Tasks
New Product Launch
Launching Coca-Cola Dreamworld in Q2
High
Marketing Campaign
Summer refresh campaign planning
Medium
Regional Expansion
Expanding to Southeast Asian markets
High
Sustainability Initiative
Implementing 100% recycled bottles
Medium
4 total items
08

Data Grid

ID Product Region Sales (Units) Growth %
1Coca-Cola ClassicNorth America15,420+12.5%
2Coca-Cola Zero SugarEurope9,870+18.3%
3Diet CokeAsia Pacific7,650+8.7%
4Coca-Cola CherryLatin America5,430+15.2%
5Coca-Cola VanillaMiddle East & Africa4,320+22.1%
09

Charts

Column Chart
N.Am EU APAC LatAm MEA
Line Chart
N.Am EU APAC LatAm MEA
Pie Chart
North America Europe Asia Pacific Latin America MEA
Donut Chart
North America Europe Asia Pacific Latin America MEA
Area Chart
N.Am EU APAC LatAm MEA
Bar Chart (Horizontal)
N.Am EU APAC LatAm MEA
10

Progress Indicators

Progress Bar75%
Progress Bar40%
Chunk Progress Bar3/5
Loading Indicators
11

Layout Components

PanelBar (Accordion)
Product Information ▾
Detailed information about our Coca-Cola product line including nutritional facts, ingredients, and availability.
Sales Data ▾
Marketing Resources ▾
Avatar
CC
CC
CC
12

Product Cards

Coca-Cola Classic
The Original
The iconic taste that started it all. Crisp, delicious, and unmistakable.
Coca-Cola Zero Sugar
Great Taste, Zero Sugar
All the taste you love, with zero sugar. Real Coca-Cola flavor.
Diet Coke
Your Favorite
Deliciously crisp and refreshing, with its own unique blend of flavors.
13

Dialogs & Notifications

✓ Successfully updated product information! ×
Coca-Cola Information ×
Coca-Cola Consolidated is the largest Coca-Cola bottler in the United States, making, selling and distributing beverages across more than 300 brands and flavors in 14 states and the District of Columbia.
14

Tooltips

This is a top tooltip
This is a right tooltip
This is a bottom tooltip
15

Brand Colors

Coca-Cola Red
#F40000 · Primary
Coca-Cola White
#FFFFFF · Secondary
Coca-Cola Black
#000000 · Secondary
Diet Coke Silver
#B3B3B3 · Secondary
Blueberry Acai
#3A2C7A · Tertiary
Feisty Cherry
#751A2B · Tertiary
DK. Georgia Green
#00573D · Tertiary
Georgia Green
#97D1A7 · Tertiary
LT. Georgia Green
#DCEFE9 · Tertiary
Orange
#F18A00 · Tertiary
Lemon
#FFDF4F · Tertiary
Vanilla
#D5A77F · Tertiary
Peach
#F0826C · Tertiary

Complete Component Library

All Kendo UI components fully branded with the Coca-Cola Consolidated design system