See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentscomponents
Cards provide an at-a-glance preview of the content they link to and frequently contain easily consumable content. Use a cards pattern when creating a collection of items, where each item surfaces a large amount of information in a similar schema.
<div class='bx--card' tabindex='0' aria-labelledby='#card-app-title'>
<div class='bx--card__card-overview'>
<!-- OverflowMenu -->
<div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'>
<svg class='bx--overflow-menu__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use>
</svg>
<ul class='bx--overflow-menu__options'>
<li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li>
<hr/>
<li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li>
</ul>
</div>
<div class='bx--card-overview__about'>
<div class='bx--about__icon'>
<svg class='bx--about__icon--img'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#app-services'></use>
</svg>
</div>
<div class='bx--about__title'>
<p id='card-app-title' class='bx--about__title--name'>App Name 1</p>
<a href='#' class='bx--about__title--link'>myapp.mybluemix.net</a>
</div>
</div>
</div>
<!-- Card Footer -->
<div class='bx--card__card-footer'>
<div class='bx--card-footer__app-status'>
<div class='bx--card-footer__app-status--running active'>
<div class='bx--running__text'>Running</div>
</div>
<div class='bx--card-footer__app-status--not-running'>
<div class='bx--not-running__text'>Not Running</div>
</div>
<div class='bx--card-footer__app-status--stopped'>
<div class='bx--stopped__text'>Stopped</div>
</div>
</div>
<div class='bx--card-footer__app-actions'>
<button class='bx--app-actions__button' id='restart-app' aria-label='restart-app'>
<svg class='bx--app-actions__button--icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#restart--glyph'></use>
</svg>
</button>
<button class='bx--app-actions__button' id='load-app' aria-label='load-app'>
<svg class='bx--app-actions__button--icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#launch--glyph'></use>
</svg>
</button>
<button class='bx--app-actions__button' id='star-app' aria-label='start-app'>
<svg class='bx--app-actions__button--icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#favorite'></use>
</svg>
</button>
</div>
</div>
</div>
<div class='bx--card' tabindex='0' aria-labelledby='#card-container-title'>
<!-- Card Overview -->
<div class='bx--card__card-overview'>
<!-- OverflowMenu -->
<div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'>
<svg class='bx--overflow-menu__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use>
</svg>
<ul class='bx--overflow-menu__options'>
<li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li>
<hr/>
<li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li>
</ul>
</div>
<div class='bx--card-overview__about'>
<div class='bx--about__icon'>
<svg class='bx--about__icon--img'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#app-services'></use>
</svg>
</div>
<div class='bx--about__title'>
<p id='card-container-title' class='bx--about__title--name'>Container Group</p>
<a class='bx--about__title--link'>Route: none (service card)</a>
</div>
</div>
</div>
<!-- Card Footer -->
<div class='bx--card__card-footer'>
<div class='bx--card-footer__app-status'>
<div class='bx--card-footer__app-status--running active'>
<div class='bx--running__text'>Running</div>
</div>
<div class='bx--card-footer__app-status--not-running'>
<div class='bx--not-running__text'>Not Running</div>
</div>
<div class='bx--card-footer__app-status--stopped'>
<div class='bx--stopped__text'>Stopped</div>
</div>
</div>
<div class='bx--card-footer__app-actions'>
<button class='bx--app-actions__button' id='restart-app' aria-label='restart-app'>
<svg class='bx--app-actions__button--icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#restart--glyph'></use>
</svg>
</button>
</div>
</div>
</div>
<div class='bx--card card--quota' tabindex='0' aria-labelledby='#card-quota-title'>
<div class='bx--card--quota__overview'>
<p id='card-quota-title' class='bx--overview__description'>
<span class='bx--overview__main-number'>2</span>
<br>
out of 11 containers not running
</p>
<button class='bx--overview__details-button'>Details</button>
</div>
</div>
<div class='bx--card' tabindex='0' aria-labelledby='#card-service-title'>
<!-- Card Overview -->
<div class='bx--card__card-overview'>
<!-- OverflowMenu -->
<div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'>
<svg class='bx--overflow-menu__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use>
</svg>
<ul class='bx--overflow-menu__options'>
<li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li>
<hr/>
<li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li>
</ul>
</div>
<div class='bx--card-overview__about'>
<div class='bx--about__icon'>
<svg class='bx--about__icon--img'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#app-services'></use>
</svg>
</div>
<div class='bx--about__title'>
<p id='card-service-title' class='bx--about__title--name'>Service Name 1</p>
<p class='bx--about__title--additional-info'>Cloudant NoSQL DB</p>
<p class='bx--about__title--additional-info'>Shared</p>
</div>
</div>
</div>
<!-- Card Footerw -->
<div class='bx--card__card-footer'>
<button class='bx--card-footer__credentials-button'>View Credentials</button>
<a href='#' class='bx--card-footer__docs-link'>Docs</a>
</div>
</div>
<div class='bx--card' tabindex='0' aria-labelledby='#card-virtual-server-title'>
<!-- Card Overview -->
<div class='bx--card__card-overview'>
<!-- OverflowMenu -->
<div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'>
<svg class='bx--overflow-menu__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use>
</svg>
<ul class='bx--overflow-menu__options'>
<li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li>
<hr/>
<li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li>
</ul>
</div>
<div class='bx--card-overview__about'>
<div class='bx--about__icon'>
<svg class='bx--about__icon--img'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#app-services'></use>
</svg>
</div>
<div class='bx--about__title'>
<p id='card-virtual-server-title' class='bx--about__title--name'>Virtual Server Group</p>
<a class='bx--about__title--link'>Private IP: 127.31.0.6</a><br>
<a class='bx--about__title--link'>Image: Ubuntu 14.04</a>
</div>
</div>
</div>
<!-- Card Footer -->
<div class='bx--card__card-footer'>
<div class='bx--card-footer__app-status'>
<div class='bx--card-footer__app-status--running active'>Running</div>
<div class='bx--card-footer__app-status--not-running'>Not Running</div>
<div class='bx--card-footer__app-status--stopped'>Stopped</div>
<div class='bx--card-footer__app-status--limited'>Limited</div>
</div>
<div class='bx--card-footer__app-actions'>
<button class='bx--app-actions__button' id='restart-app' aria-label='restart-app'>
<svg class='bx--app-actions__button--icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#restart--glyph'></use>
</svg>
</button>
</div>
</div>
</div>
<div class='bx--card' tabindex='0' aria-labelledby='#card-title'>
<div class='bx--card__card-overview'>
<!-- OverflowMenu -->
<div data-overflow-menu class='bx--overflow-menu' tabindex='0' aria-label='List of options'>
<svg class='bx--overflow-menu__icon'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#overflow-menu'></use>
</svg>
<ul class='bx--overflow-menu__options'>
<li><button type='button' class='bx--overflow-menu__btn'>Stop App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Restart App</button></li>
<li><button type='button' class='bx--overflow-menu__btn'>Edit Routes and Access</button></li>
<hr/>
<li><button type='button' class='bx--overflow-menu__btn--delete'>Delete App</button></li>
</ul>
</div>
<div class='bx--card-overview__about'>
<div class='bx--about__icon'>
<svg class='bx--about__icon--img'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#app-services'></use>
</svg>
</div>
<div class='bx--about__title'>
<p id='card-title' class='bx--about__title--name'>App Name 1</p>
<a href='#' class='bx--about__title--link'>myapp.mybluemix.net</a>
</div>
</div>
</div>
<div class='bx--card__card-footer'></div>
</div>