Grid

No margin or padding

Padding-x

Margin-x

1

Nested Grid, no margin or padding

6 columns
3 columns
3 columns

Nested Grid, padding-x

6 columns
3 columns
3 columns

Nested Grid, margin-x

6 columns
3 columns
3 columns

Spacings

Default size: 20px = 1rem

Available margin and padding range: 0rem-10rem

Available breakpoints:

  • none
  • small
  • small-xl
  • medium
  • medium-xl
  • medium-xx
  • large
  • xlarge
  • xxlarge

Available sides:

  • All
  • Top (t)
  • Right (r)
  • Bottom (b)
  • Left (l)
  • X (x) (Left and Right)
  • Y (y) (Top and Bottom)

Margins

Margin 0

.m0

Margin 0.25

.m-qtr

Margin 0.5

.m-half

Margin 1

.m1

Margin 2

.m2

Margin 3

.m3

Margin 4

.m4

Margin 5

.m5

Margin 6

.m6

Margin 7

.m7

Margin 8

.m8

Margin 9

.m9

Margin 10

.m10

Margin X 5

.mx5 (0-10 available)

Margin Y 5

.my5 (0-10 available)

Paddings

Padding 0

.p0

Padding 0.25

.p-qtr

Padding 0.5

.p-half

Padding 1

.p1

Padding 2

.p2

Padding 3

.p3

Padding 4

.p4

Padding 5

.p5

Padding 6

.p6

Padding 7

.p7

Padding 8

.p8

Padding 9

.p9

Padding 10

.p10

Padding X 5

.px5 (0-10 available)

Padding Y 5

.py5 (0-10 available)

Accordions

  • Accordion 01

    September

    16th

    9:00am

    Event title Lorem ipsum dolor sit amet.
    Speaker name

    Professional Title from Speaker

    Event body description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus, temporibus, cum quas consequuntur debitis illo dolor sint nobis porro! Necessitatibus blanditiis libero qui, ducimus sapiente sint quos ea exercitationem.

  • Accordion 02

    September

    16th

    9:00am

    Event title Lorem ipsum dolor sit amet.
    Speaker name

    Professional Title from Speaker

    Event body description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus, temporibus, cum quas consequuntur debitis illo dolor sint nobis porro! Necessitatibus blanditiis libero qui, ducimus sapiente sint quos ea exercitationem.

  • Accordion 03

    September

    16th

    9:00am

    Event title Lorem ipsum dolor sit amet.
    Speaker name

    Professional Title from Speaker

    Event body description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus, temporibus, cum quas consequuntur debitis illo dolor sint nobis porro! Necessitatibus blanditiis libero qui, ducimus sapiente sint quos ea exercitationem.

  • Accordion 03

    September

    16th

    9:00am

    Event title Lorem ipsum dolor sit amet.
    Speaker name

    Professional Title from Speaker

    Event body description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus, temporibus, cum quas consequuntur debitis illo dolor sint nobis porro! Necessitatibus blanditiis libero qui, ducimus sapiente sint quos ea exercitationem.

  • Accordion 03

    September

    16th

    9:00am

    Event title Lorem ipsum dolor sit amet.
    Speaker name

    Professional Title from Speaker

    Event body description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus, temporibus, cum quas consequuntur debitis illo dolor sint nobis porro! Necessitatibus blanditiis libero qui, ducimus sapiente sint quos ea exercitationem.

  • Accordion 03

    September

    16th

    9:00am

    Event title Lorem ipsum dolor sit amet.
    Speaker name

    Professional Title from Speaker

    Event body description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam accusamus, temporibus, cum quas consequuntur debitis illo dolor sint nobis porro! Necessitatibus blanditiis libero qui, ducimus sapiente sint quos ea exercitationem.

Accordion menu

Badge

123AB

Breadcrumb

Cards

Gartner® report
Market guide for process mining

According to Gartner*, "Recent trends link in body copy in automation and knowledge of the underlying processes and interactions are key to digital transformation. For data and analytics leaders, process mining delivers insights that enable faster, smarter decisions and stronger performance on an organization’s most critical priorities."

Learn more
From Data to ROI ebook
#From data to ROI eBook
How to generate ROI from AI-powered data

Learn where to invest, how much to spend and what returns you can expect. This report explores what 1,200 businesses are doing to make better, faster decisions with AI-powered data to accelerate their business outcomes.

Read the ebook

Callout

Default callout

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a primary callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Callout-1-Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Callout-2-Column

70%+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos sapiente provident, saepe hic quas sint obcaecati, qui dolores quasi perferendis odio consequuntur, repellat exercitationem tempore fuga mollitia rerum labore!

Callout-2-Column-v2

Vivamus Hendrerit Arcu Sed Erat

Quisque Eget Odio Ac Lectus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos sapiente provident, saepe hic quas sint obcaecati, qui dolores quasi perferendis odio consequuntur, repellat exercitationem tempore fuga mollitia rerum labore!

Callout-2-Column-v2-with-buttons

healthcare

Designing patient-centric health services and technologies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos sapiente provident, saepe hic quas sint obcaecati, qui dolores quasi perferendis odio consequuntur, repellat exercitationem tempore fuga mollitia rerum labore!

Read moreRead more

Callout-2-Column-v2-with-header-buttons

industry spotlight

healthcare

Designing patient-centric health services and technologies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos sapiente provident, saepe hic quas sint obcaecati, qui dolores quasi perferendis odio consequuntur, repellat exercitationem tempore fuga mollitia rerum labore!

Read moreRead more

Callout-1/3-2/3-Column-TEXT

Quisque Eget Odio Ac Lectus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos sapiente provident, saepe hic quas sint obcaecati, qui dolores quasi perferendis odio consequuntur, repellat exercitationem tempore fuga mollitia rerum labore!

Read more

Callout-1/3-2/3-Column-IMAGE

Nulla At Nulla Justo, Eget

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eos sapiente provident, saepe hic quas sint obcaecati, qui dolores quasi perferendis odio consequuntur, repellat exercitationem tempore fuga mollitia rerum labore!

Read more

2 Column alternating side to side

Financial Services

h4 subheading

Investment Banking, Asset Management, Lending, Retail Banking

  • 11,500Associates Worldwide
  • $1.3 TrillionAssets Services – 950 Funds
  • 33%of All US Properties
  • 7,000Associates in10Worldwide Centers
  • 30 millioncustomer claims processes annually
  • 7x Conversion gains,with$900 millionleads generated
  • 99% Service levelsupheld for all clients and processes
  • 30% Reductionin call volume due to self-services

Insurance Services

h4 subheading

Life & Annuities, Property & Casualty, Retirement

Close Button

This is a close button example.

Drilldown menu

Dropdown menu

Dropdown pane

Equalizer

Pellentesque habitant morbi tristique senectus et netus et, ante.

Responsive Embed

Floats

LeftRight

Forms

Here's how you use this input field!

This input is ignored by Abide using `data-abide-ignore`

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Radios that are required
Radios that are not required
Checkboxes that are not required
Switch, default
Switch, round

Switch

Switch

Switch

Switch

Float Label Form, Dark Background

CONTINUE THE CONVERSATION

Cognizant Community Event Office Cognizant Community Event OfficeCognizant Community Event Office:cognizant_community@info-event.jp

Float Label Form, Light Background

CONTINUE THE CONVERSATION

Cognizant Community Event Office Cognizant Community Event OfficeCognizant Community Event Office:cognizant_community@info-event.jp

2 column Float Label Form, Light Background

CONTACT COGNIZANT

SEND A MESSAGE
CONTACT COGNIZANT CAREERS

If you are interested in an opportunity with Cognizant, please visit our Careers page or visit the Cognizant Careers FAQs.

Labels

Primary LabelSecondary LabelSuccess LabelAlert LabelWarning Label

Magellan

Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Menu

Off-canvas

Pagination

Reveal Modal

Click me for a modal

Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

Sticky

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Tabs

Standard Tabs: Horizontal

  • Image with Text

    APPLICATION SERVICES

    When Transformation Moves from Hyper-Digital to Ubiquitous

    In the past, monumental projects took decades to complete. Today our monumental project is to build the digital world in a much more compressed timeframe. Digital leaders will be those organizations that use business analytics to offer deep insights into customer behaviors, wants and needs, develop new products and services and ultimately innovate and exploit new business opportunities.

    Button 1 Normal TabButton 2 Open in new tab
  • Video with text and share

    INFRASTRUCTURE SERVICES

    Build applications that deliver the digital experiences customers want

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, provident sed corporis non enim, nihil vel facere illo autem, quis nisi officia aut voluptatem earum? Nesciunt non, blanditiis iusto natus.

  • Two Sided Text

    INFRASTRUCTURE SERVICES

    The Challenge

    A loyal customer is worth his or her weight in gold. One leading U.S. luxury retailer knew this well—as the top 10% of its customers represented 80% of its revenue. The company hoped to engage these individuals even further by using digital channels.

    The retailer approached us to create a strategy for a new, personalized shopping experience for these shoppers.

    Button in Same Tab

    INFRASTRUCTURE SERVICES

    Our Approach

    In addition to research and analysis into the latest trends in personalization, we provided strategy, product management and business process definition. We called for the use of global trends and behaviors of other similar users along with user data to drive a new, hyperpersonalized web experience.

    Button in New Tab
  • Single Sided Text

    SECURITY AND COMPLIANCE SERVICES

    Build applications that deliver the digital experiences customers want

    Button

Standard Tabs: Vertical

APPLICATION SERVICES

When Transformation Moves from Hyper-Digital to Ubiquitous

In the past, monumental projects took decades to complete. Today our monumental project is to build the digital world in a much more compressed timeframe. Digital leaders will be those organizations that use business analytics to offer deep insights into customer behaviors, wants and needs, develop new products and services and ultimately innovate and exploit new business opportunities.

Button 1 Normal TabButton 2 Open in new tab

INFRASTRUCTURE SERVICES

Build applications that deliver the digital experiences customers want

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, provident sed corporis non enim, nihil vel facere illo autem, quis nisi officia aut voluptatem earum? Nesciunt non, blanditiis iusto natus.

INFRASTRUCTURE SERVICES

The Challenge

A loyal customer is worth his or her weight in gold. One leading U.S. luxury retailer knew this well—as the top 10% of its customers represented 80% of its revenue. The company hoped to engage these individuals even further by using digital channels.

The retailer approached us to create a strategy for a new, personalized shopping experience for these shoppers.

Button in Same Tab

INFRASTRUCTURE SERVICES

Our Approach

In addition to research and analysis into the latest trends in personalization, we provided strategy, product management and business process definition. We called for the use of global trends and behaviors of other similar users along with user data to drive a new, hyperpersonalized web experience.

Button in New Tab

SECURITY AND COMPLIANCE SERVICES

Build applications that deliver the digital experiences customers want

Button

Vertical Tabs: Change on Hover

Tab Variations:

  • Rich text editor

  • PDF Article

  • Video with modal overlay

What we do

Build a digital ready it backbone

Going digital? You’ll need a simple, modern and secure infrastructure backbone. Work with our experts to transform your enterprise and future-proof your infrastructure to reduce costs, increase agility and protect your assets.

Manage heritage debt and run better on a more efficient, simplified IT backbone.

How? Through:

  • Smart Operations

  • Integrated Debt Framework solutions

  • EnGage

  • Application Portfolio Transformation

  • Data Center Migration strategies

Extend legacy IT to be nimble and agile and make the digital shift seamless.

How? Through:

  • Cognitive Automation solutions

  • Intelligent Process Analytics

  • Robotic Process Automation

  • Enterprise Application Automation

Shift to the most efficient, effective cloud solutions to meet your enterprise needs.

How? Through:

  • APR enabled Cloud Steps solutions

  • SAP on Cloud

  • Guidewire on Cloud

  • Trizetto on Cloud

  • DevOps on Cloud

  • Agile Engineering Environments

  • Enterprise Apps on Cloud

Create resiliency, manage risk and protect your data against cyber attack.

How? Through:

  • Cyber security through Data protection, Infrastructure and Applications security solutions

  • Next Gen Cloud Security, IoT, Analytics

  • Governance Risk and Compliance solutions

  • Identity Access Management

Connect your CX and next-gen processes with a transformed IT landscape to achieve greater market success.

How? Through:

  • SimpliFIT

  • Nexgen Process Definition & Architecture solutions

  • Customer Experience transformation

  • IT Landscape transformation

Vertical Tabs: Change on click, version 3, blue background, gradient steps

Application Services

Build applications that deliver the digital experiences customers want.

More
Infrastructure Services

Transform your IT backbone to create an always-on business.

More
Enterprise Application Services

Streamline your back office and improve operational agility and employee connections.

More
Quality Engineering & Assurance Services

Employ an end-to-end approach where high quality meets high speed

More
Security and Compliance Services

Safeguard your users, data, applications and infrastructure Safeguard your users, data, applications and infrastructure Safeguard your users, data, applications and infrastructure

More

Toggler

Expand!

Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.

Visibility

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You aredefinitely on a small screen.

You aredefinitely on a medium screen.

You aredefinitely on a large screen.

You arenot on a medium screen or larger.

You arenot on a large screen or larger.

You aredefinitely not on a small screen.

You aredefinitely not on a medium screen.

You aredefinitely not on a large screen.

Can't touch this.

You are in landscape orientation.

You are in portrait orientation.

This text can only be read by a screen reader.

There's a line of text above this one, you just can't see it.