This is the reference implementation for CSS to comply with the style guide created by the UX team. The PDF for version 1.5 of the styleguide can be downloaded here.
This is version 1.5.28 of the style guide CSS. To use in a project, you'll need the following:
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://static.ux.cimpress.io/mcp-ux-css/1.5/development/1.5.28/css/mcp-ux-css.min.css" charset="utf-8" integrity="sha256-40tir79t6Eg7jOwzniRsB4rwwPeNHoNUS2lCoBwxFAA=" crossorigin="anonymous"> <!-- Fonts --> <link href="//cloud.typography.com/7971714/6011752/css/fonts.css" rel="stylesheet" type="text/css" /> <script src="https://use.fontawesome.com/a1df440eb7.js"></script>
Using React? Check out the React components instead of battling with jQuery.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
This is a paragraph that includes some highlighted text. It is long so we can see how it wraps. This text has been highlighted but it is followed by some more normal text that has not been highlighted.
This is inserted text
some code stuffFusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Syntax highlighting is provided based on the classes from highlight.js. The default is a light theme, opt into the dark theme by adding class="dark-theme"
To get rid of extraneous padding, add class="highlight-block" to the containing <pre> block.
POST /task?id=1 HTTP/1.1
Host: example.org
Content-Type: application/json; charset=utf-8
Content-Length: 137
{
"status": "ok",
"extended": true,
"results": [
{"value": 0, "type": "int64"},
{"value": 1.0e+3, "type": "decimal"}
]
}
/**
* @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}
function $initHighlight(block, clss) {
try {
if (clss.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
"foo";
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
POST /task?id=1 HTTP/1.1
Host: example.org
Content-Type: application/json; charset=utf-8
Content-Length: 137
{
"status": "ok",
"extended": true,
"results": [
{"value": 0, "type": "int64"},
{"value": 1.0e+3, "type": "decimal"}
]
}
/**
* @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}
function $initHighlight(block, clss) {
try {
if (clss.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
"foo";
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
This is a regular card.
It is fairly pedestrian.
You can use it to organize content.
A card without box shadows or header underlines
It also has a smaller border radius.
It looks simple and clean.
A card with a more minimal header style.
It looks so shiny.
Cards can be organized into groups, decks, or columns.
Contextual variations on cards are not recommended.
Primary CTAPanels and Wells are not recommended. No styles for wells are supplied. Panels are styled to match cards, but since behavior patterns may be different, we cannot guarantee that they'll work automatically. Upgrading from panels to cards can be done by following the instructions above. If you have further questions about a specific use case, contact UX.
Tabbed cards are to be used as top level UI elements. A tabbed card should not be used inside of a white page container or within another card. If you need tabs within a white container or page, please just use tabs.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
This carousel is no longer compatible with the Bootstrap javascript or usage patterns. If you're using React, please use the React component for this carousel. If you're using a different framework, you will need to recreate the interaction patterns laid out in the React component. They are not currently documented on this page.
This carousel looks best at sizes where (size - 40) % 70 === 0
It's dangerous to go alone!
This is meant to be a temporary state after a change is registered
This Field Is Disabled and not interactive