---
schema_version: "1"
id: 47aa084327e7d724fa13e2be84dda461837c1fe81bab63a5cb3deb05ad769929
title: cpq-card-mixin (template)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_cpq_card_mixin__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpq_card_mixin__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 6cc4b49b7942a1b1e7e4760b82307be15895014da828c1f9e14a2d084103de60
description: The cpq-card-mixin template displays the bundle hierarchy in Industries Cart.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# cpq-card-mixin (template)

The cpq-card-mixin template displays the bundle hierarchy in Industries Cart.

In ​Salesforce Industries Communications, Media, and Energy Summer '18, cpq-card-mixin includes the `#{$namespace}-product-name-block`.

**Template Type**

Mixin

**Code**

CSS/SCSS

**Image**

![The Cart tab with a top-level product and child products.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/salesforce_cart_cpqcardmixin_bundle.jpg)

**Upgrade from Vlocity CME Winter '18 to Vlocity CME Summer '18**

When upgrading from ​Salesforce Industries Communications, Media, and Energy Winter '18 to ​Salesforce Industries Communications, Media, and Energy Summer '18, you must make the following changes to the CSS in the Card Designer.

**First Change**

In CME Winter '18, keep the following in the CSS:

```
.comp-#{$namespace}-product-item-child, .comp-#{$namespace}-product-item {
position:relative; /* needed for selected border */
input.ng-invalid {
```

In CME Summer '18, replace the CSS statements above with the following CSS statements:

```
.comp-#{$namespace}-product-item-child, .comp-#{$namespace}-product-item {
position:relative; /* needed for selected border */
padding-top: 20px;
input.ng-invalid {
```

**Second Change**

```
.slds-button__icon {
float: left;
margin: 0.3rem 0.5rem 0 0;
.slds-button__icon {
margin: 0.3rem 0.5rem 0 0;
```

**Third Change**

In CME Summer '18 , add the following :

```
.#{$namespace}-product-name-block {
display: inline-flex;
.#{$namespace}-product-icon-block {
display: inherit;
div {
margin: auto
}
}
}  "
```