Expandable Content

Allows users to reveal or hide additional information

Component checklist

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                        
                                                        
                                                            import { ExpandableContent } from '@optimus-web/core';
                                                        import { getToken } from '@optimus-web/common';
                                                        
                                                        return (
                                                            <ExpandableContent
                                                                expandedToggleText="Read Less"
                                                                collapsedToggleText="Read More"
                                                                hasPlaceholder={args.hasPlaceholder}
                                                                backgroundColor={getToken('backgroundStaticFlat')({ theme })}
                                                                lines={1}
                                                            >
                                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id molestie quam. In hac habitasse platea
                                                                dictumst. Curabitur ornare sem condimentum, auctor purus nec, congue magna. Lorem ipsum dolor sit amet,
                                                                consectetur adipiscing elit. Mauris rhoncus tristique lorem a sagittis. Ut ut est vitae nunc malesuada
                                                                laoreet. Duis aliquam, tellus id lobortis eleifend, erat dolor tempus lectus, a rhoncus urna odio non
                                                                tellus. Donec pharetra, purus sed facilisis fringilla, orci ante dignissim risus, ut lacinia quam turpis et
                                                                tellus. Mauris tincidunt velit vel ullamcorper malesuada. In rhoncus orci arcu, ut consectetur diam faucibus
                                                                ut.
                                                            </ExpandableContent>
                                                        )