In order to minimize the necessity of using front-end bundlers with the Carbon for IBM.com Web Components CDN artifacts, page level styles artifacts are also available to use.
If your application is not already compiling its own version of the below artifacts, these can be included as part of your project.
NOTE: The latest/next tags are moving versions. While beneficial to always stay on the most recent version, it is recommended to choose a specific version and properly test your application when upgrading to a newer version. Check for latest version number on npm.
The following includes Carbon reset, as well as imports Plex fonts necessary for
the page. Note, this will import IBM Plex Sans, IBM Plex Serif, and IBM Plex Mono.
// SPECIFIC VERSION
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v2.x.y]/plex.css" />
// LATEST tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/latest/plex.css" />
// NEXT tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/next/plex.css" />Plex fonts are also available as CSS artifacts, where the Plex font families can be loaded in individually.
Available CSS files:
| IBM Plex Sans Arabic (all) | https://1.www.s81c.com/common/carbon/plex/sans-arabic.css |
|---|---|
| IBM Plex Sans Arabic Bold | https://1.www.s81c.com/common/carbon/plex/sans-arabic-bold.css |
| IBM Plex Sans Arabic ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-arabic-extralight.css |
| IBM Plex Sans Arabic Light | https://1.www.s81c.com/common/carbon/plex/sans-arabic-light.css |
| IBM Plex Sans Arabic Medium | https://1.www.s81c.com/common/carbon/plex/sans-arabic-medium.css |
| IBM Plex Sans Arabic | https://1.www.s81c.com/common/carbon/plex/sans-arabic-regular.css |
| IBM Plex Sans Arabic SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-arabic-semibold.css |
| IBM Plex Sans Arabic Text | https://1.www.s81c.com/common/carbon/plex/sans-arabic-text.css |
| IBM Plex Sans Arabic Thin | https://1.www.s81c.com/common/carbon/plex/sans-arabic-thin.css |
| IBM Plex Sans Devanagari (all) | https://1.www.s81c.com/common/carbon/plex/sans-devanagari.css |
|---|---|
| IBM Plex Sans Devanagari Bold | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-bold.css |
| IBM Plex Sans Devanagari ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-extralight.css |
| IBM Plex Sans Devanagari Light | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-light.css |
| IBM Plex Sans Devanagari Medium | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-medium.css |
| IBM Plex Sans Devanagari | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-regular.css |
| IBM Plex Sans Devanagari SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-semibold.css |
| IBM Plex Sans Devanagari Text | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-text.css |
| IBM Plex Sans Devanagari Thin | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-thin.css |
| IBM Plex Sans Hebrew (all) | https://1.www.s81c.com/common/carbon/plex/sans-hebrew.css |
|---|---|
| IBM Plex Sans Hebrew Bold | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-bold.css |
| IBM Plex Sans Hebrew ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-extralight.css |
| IBM Plex Sans Hebrew Light | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-light.css |
| IBM Plex Sans Hebrew Medium | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-medium.css |
| IBM Plex Sans Hebrew | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-regular.css |
| IBM Plex Sans Hebrew SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-semibold.css |
| IBM Plex Sans Hebrew Text | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-text.css |
| IBM Plex Sans Hebrew Thin | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-thin.css |
| IBM Plex Sans JP (all) | https://1.www.s81c.com/common/carbon/plex/sans-jp.css |
|---|---|
| IBM Plex Sans JP Bold | https://1.www.s81c.com/common/carbon/plex/sans-jp-bold.css |
| IBM Plex Sans JP ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-jp-extralight.css |
| IBM Plex Sans JP Light | https://1.www.s81c.com/common/carbon/plex/sans-jp-light.css |
| IBM Plex Sans JP Medium | https://1.www.s81c.com/common/carbon/plex/sans-jp-medium.css |
| IBM Plex Sans JP | https://1.www.s81c.com/common/carbon/plex/sans-jp-regular.css |
| IBM Plex Sans JP SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-jp-semibold.css |
| IBM Plex Sans JP Text | https://1.www.s81c.com/common/carbon/plex/sans-jp-text.css |
| IBM Plex Sans JP Thin | https://1.www.s81c.com/common/carbon/plex/sans-jp-thin.css |
| IBM Plex Sans KR (all) | https://1.www.s81c.com/common/carbon/plex/sans-kr.css |
|---|---|
| IBM Plex Sans KR Bold | https://1.www.s81c.com/common/carbon/plex/sans-kr-bold.css |
| IBM Plex Sans KR ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-kr-extralight.css |
| IBM Plex Sans KR Light | https://1.www.s81c.com/common/carbon/plex/sans-kr-light.css |
| IBM Plex Sans KR Medium | https://1.www.s81c.com/common/carbon/plex/sans-kr-medium.css |
| IBM Plex Sans KR | https://1.www.s81c.com/common/carbon/plex/sans-kr-regular.css |
| IBM Plex Sans KR SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-kr-semibold.css |
| IBM Plex Sans KR Text | https://1.www.s81c.com/common/carbon/plex/sans-kr-text.css |
| IBM Plex Sans KR Thin | https://1.www.s81c.com/common/carbon/plex/sans-kr-thin.css |
| IBM Plex Sans Thai (all) | https://1.www.s81c.com/common/carbon/plex/sans-thai.css |
|---|---|
| IBM Plex Sans Thai Bold | https://1.www.s81c.com/common/carbon/plex/sans-thai-bold.css |
| IBM Plex Sans Thai ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-thai-extralight.css |
| IBM Plex Sans Thai Light | https://1.www.s81c.com/common/carbon/plex/sans-thai-light.css |
| IBM Plex Sans Thai Medium | https://1.www.s81c.com/common/carbon/plex/sans-thai-medium.css |
| IBM Plex Sans Thai | https://1.www.s81c.com/common/carbon/plex/sans-thai-regular.css |
| IBM Plex Sans Thai SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-thai-semibold.css |
| IBM Plex Sans Thai Text | https://1.www.s81c.com/common/carbon/plex/sans-thai-text.css |
| IBM Plex Sans Thai Thin | https://1.www.s81c.com/common/carbon/plex/sans-thai-thin.css |
| IBM Plex Sans Thai Looped (all) | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped.css |
|---|---|
| IBM Plex Sans Thai Looped Bold | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-bold.css |
| IBM Plex Sans Thai Looped ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-extralight.css |
| IBM Plex Sans Thai Looped Light | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-light.css |
| IBM Plex Sans Thai Looped Medium | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-medium.css |
| IBM Plex Sans Thai Looped | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-regular.css |
| IBM Plex Sans Thai Looped SemiBold | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-semibold.css |
| IBM Plex Sans Thai Looped Text | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-text.css |
| IBM Plex Sans Thai Looped Thin | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-thin.css |
And the full plex package (excluding jp and kr):
Example usage:
<html>
<head>
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
<style>
body {
font-family: IBM Plex Sans,Helvetica Neue,Arial,sans-serif;
}
</style>
...
</head>
<body>
...
</body>
</html>A dynamic font loader for non-Latin fonts is available, called load-non-latin-plex. This utility is
available at the following CDN url:
Usage:
<script src="https://1.www.s81c.com/common/carbon/plex/load-non-latin-plex.js"></script>Note, this script loads in the font based on the detected 2-character language code in the window.digitalData object.
For more details, visit: https://www.ibm.com/standards/carbon/developing/building-for-ibm-dotcom/#page-language
The following includes Carbon grid (using flex grid) and all corresponding grid classes.
// SPECIFIC VERSION
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/grid.css" />
// LATEST tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/grid.css" />
// NEXT tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/next/grid.css" />The following includes Carbon grid (using CSS grid) and all corresponding grid classes.
// SPECIFIC VERSION
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/cssgrid.css" />
// LATEST tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/cssgrid.css" />
// NEXT tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/next/cssgrid.css" />Learn more about the Carbon 2x Grid
The following includes classes for creating Carbon theme zones (white, g10, g90, g100). Note that these classes take advantage of using CSS Custom Properties enabled in Carbon.
// SPECIFIC VERSION
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/themes.css" />
// LATEST tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/themes.css" />
// NEXT tag
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/next/themes.css" />| Theme | Class name |
|---|---|
| white | .cds-theme-zone-white |
| g10 | .cds-theme-zone-g10 |
| g90 | .cds-theme-zone-g90 |
| g100 | .cds-theme-zone-g100 |
<html>
<head>
<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/themes.css" />
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v2.x.y]/dotcom-shell.min.js"></script>
<script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v2.x.y]/leadspace.min.js"></script>
...
</head>
<body>
<c4d-dotcom-shell-container>
<main>
<c4d-leadspace size="medium" class="cds-theme-zone-g90">
<c4d-leadspace-heading>LeadSpace title</c4d-leadspace-heading>
LeadSpace copy
<c4d-button-group slot="action">
<c4d-button-group-item href="www.example.com" cta-type="local">
Button 1
</c4d-button-group-item>
</c4d-button-group>
<c4d-background-media
slot="image"
opacity="100"
alt="alt text"
default-src="https://picsum.photos/id/1076/1056/480">
<c4d-image-item
media="(min-width: 672px)"
srcset="https://picsum.photos/id/1076/672/400"></c4d-image-item>
<c4d-image-item
media="(min-width: 0)"
srcset="https://picsum.photos/id/1076/320/370"></c4d-image-item>
</c4d-background-media>
</c4d-leadspace>
</main>
</cds-dotcom-shell-container>
</body>
</html>