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
Accordion enables users to expand and collapse sections of content.
Label
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Label with multiple words
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Label
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Label
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
<ul data-accordion class='bx--accordion'>
<li tabindex='0' data-accordion-item class='bx--accordion__item'>
<div class='bx--accordion__heading'>
<svg class='bx--accordion__arrow'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use>
</svg>
<p class='bx--accordion__title'>Label</p>
</div>
<div class='bx--accordion__content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
</li>
<li tabindex='0' data-accordion-item class='bx--accordion__item'>
<div class='bx--accordion__heading'>
<svg class='bx--accordion__arrow'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use>
</svg>
<p class='bx--accordion__title'>Label with multiple words</p>
</div>
<div class='bx--accordion__content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
</li>
<li tabindex='0' data-accordion-item class='bx--accordion__item'>
<div class='bx--accordion__heading'>
<svg class='bx--accordion__arrow'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use>
</svg>
<p class='bx--accordion__title'>Label</p>
</div>
<div class='bx--accordion__content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
</li>
<li tabindex='0' data-accordion-item class='bx--accordion__item'>
<div class='bx--accordion__heading'>
<svg class='bx--accordion__arrow'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#chevron--right'></use>
</svg>
<p class='bx--accordion__title'>Label</p>
</div>
<div class='bx--accordion__content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</div>
</li>
</ul>