Example of Expandable section - default
<BcExpandable height={100} expandLabel='Show more' collapseLabel='Show less' containerId='expandable-example' wrapperClass='bc-markdown bc-markdown--bordered' > <p>One of our main goals for the Bugcrowd platform is to provide Researchers with engagements and programs that are relevant to them. Utilizing data on a Researcher’s skills, their interests, experiences with Bugcrowd or security in general, alongside their past activity on the platform, allows our CrowdMatch recommendation engine to provide better-tuned opportunity suggestions. Resumes provide a new source of information about Researchers that gives the platform more ways to better match Researchers with ongoing and upcoming engagements. Better program matching leads to more success!</p> <p>Bug bounty programs provide opportunities for you to find and responsibly disclose vulnerabilities to companies. In return, companies reward you for your contributions to acknowledge your efforts. Over time, you can build up your reputation as a highly qualified and reliable security researcher while earning cash, swag.</p> <p>Anyone can sign up to be a researcher. To become a researcher, you just need to create an account.</p> <p> Researchers can participate in any public bounty program that we run. However, some private programs may require that you go through identity verification before you can participate.</p> <p>Yay! You can see me 👍(◕‿◕)👍</p> </BcExpandable>
React documentation
Last modified:
BcExpandable props
BcExpandable is parent wrapper component for the expandable section, it accepts following props.
Prop | Type | Required? | Default | Description |
---|---|---|---|---|
height | number | false | 200 | To set the maximum height in px of the component before content truncates. |
expandLabel | string | false | Show more | To set the expand action button text. |
collapseLabel | string | false | Show less | To set the collapse action button text. |
wrapperClass | string | false | To set a custom class to the parent container. | |
containerId | string | true | A unique identifier for the container, used to semantically associate the button to the content. | |
children | ReactNode or string | false | The markup/content body of the expandable section. | |
buttonContainerStyles | CSSProperties | false | To set the custom inline CSS to the button container. |
Any extended types: React.HTMLAttributes<HTMLDivElement>
HTML
Last modified:
Add .bc-expandable-section
to an element.
Design
Last modified:
ℹ️ Do not hide content that requires user input. These UI patterns should always be immediately visible to the user.
Accessibility
Last modified:
It is use to provide a short preview of content where the full content is important but not vital to be displayed initially.
Rationale
Last modified:
See also
Last modified: