Skip to content
lab components / Feedback

Learn Info Box

Guides users by introducing the page's content and setting expectations

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

#Examples

#Default

Composition:

  • Title: A brief, descriptive heading summarizing the topic.
  • Illustration: A visual element to enhance recognition and engagement.
  • Body: Detailed information, presented in a structured way using headings, bullet points, tabs for organization.
  • Call to Action (optional): Buttons or links encouraging further exploration.

Default (Collapsed)

  • Purpose: Provide a concise summary or preview of the page's content.
  • Best Practices:
    • Limit the summary to 1-2 sentences.
    • Include a clear call to action (e.g., "Learn More") to expand for details.
    • Use an illustration as a visual cue to help users quickly recognize the content's purpose.

Learn info box example

Lorem ipsum

Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan.

Etiam finibus

In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et expedita distinctio.

const [button, content] = useLearnInfoBox({ heading: "Learn info box example", content: ( <LearnContent columns={[ <TextContainer key={1}> <H3>Lorem ipsum</H3> <Paragraph> Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan. </Paragraph> </TextContainer>, <TextContainer key={2}> <H3>Etiam finibus</H3> <Paragraph> In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et expedita distinctio. </Paragraph> </TextContainer>, ]} /> ), }); return ( <> <div style={{ display: "flex", justifyContent: "flex-end" }}>{button}</div> {content} </> );

#Open Expanded

  • Purpose:
    • Provide detailed information upfront when space is not a constraint.
    • Guide first-time users through onboarding processes.
  • Best Practices:
    • Organize content with clear headings, bullet points, or short paragraphs.
    • Include a "Close" option to collapse the box.

Learn info box example

Lorem ipsum

Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan.

Etiam finibus

In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et expedita distinctio.

const [button, content] = useLearnInfoBox({ heading: "Learn info box example", content: ( <LearnContent columns={[ <TextContainer key={1}> <H3>Lorem ipsum</H3> <Paragraph> Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan. </Paragraph> </TextContainer>, <TextContainer key={2}> <H3>Etiam finibus</H3> <Paragraph> In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et expedita distinctio. </Paragraph> </TextContainer>, ]} /> ), openExpanded: true, }); return ( <> <div style={{ display: "flex", justifyContent: "flex-end" }}>{button}</div> {content} </> );

#With tabs

  • Purpose: Present content categorized into distinct sections.
  • Best Practices:
    • Use clear, descriptive tab labels.
    • Limit the number of tabs to 3-5.
    • Ensure each tab's content is focused and relevant to its label.

Lorem ipsum

Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan.

const [selectedTab, setSelectedTab] = React.useState(0); const [tabs, tabContent] = useTabSet({ tabs: [ { header: "One", content: ( <LearnContent columns={[ <TextContainer key={1}> <H3>Lorem ipsum</H3> <Paragraph> Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan. </Paragraph> </TextContainer>, ]} /> ), }, { header: "Two", content: ( <LearnContent columns={[ <TextContainer key={2}> <H3>Etiam finibus</H3> <Paragraph>In hac habitasse platea dictumst. Phasellus eu faucibus eros.</Paragraph> </TextContainer>, ]} /> ), }, { header: "Three", content: ( <LearnContent columns={[ <TextContainer key={3}> <H3>Aliquam dignissim</H3> <Paragraph> Quisque fringilla metus ac enim pretium, quis sodales felis aliquet. Aenean bibendum ligula id porta facilisis. </Paragraph> </TextContainer>, <TextContainer key={4}> <H3>Aliquam dignissim</H3> <Paragraph> Quisque fringilla metus ac enim pretium, quis sodales felis aliquet. Aenean bibendum ligula id porta facilisis. </Paragraph> </TextContainer>, ]} /> ), }, ], selectedTab: selectedTab, onChange: setSelectedTab, }); const [button, content] = useLearnInfoBox({ heading: "Learn info box heading", tabs, content: tabContent, }); return ( <> <div style={{ display: "flex", justifyContent: "flex-end" }}>{button}</div> {content} </> );

#Properties

/** Title of the learn info box*/ header: string; OR /** Tabs for the tabset within the learn info box */ tabs: ReactElement<TabsProps>; AND /** Content of the learn info box */ content: ReactNode; /** Description of the info box */ "aria-label"?: string; /** Renders the learn info box in expanded state to start with */ openExpanded?: boolean; /** Callback that is called when the learn info box changes between expanded and collapsed state */ onToggle?: (expanded: boolean) => void; /** Custom className that's applied to the outermost element (only intended for special cases) */ className?: string; /** Style object to apply custom inline styles (only intended for special cases) */ style?: CSSProperties; /** Unique string, used by external script e.g. for event tracking */ "data-observe-key"?: string;

#Guidelines

#Best practices

#General

Use LearnInfoBox when

  • You need to preview the page's content or functionality.
  • You want to guide users on how to achieve their goals on the page.

#Placement

LearnInfoBox is typically used in the following places:

  • At the top of the page, just below the main header.
  • Before the main content begins.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your LearnInfoBox to existing components for visual consistency.

#Do not use when

  • The information is already clearly conveyed elsewhere on the page.
  • The content doesn't provide substantial support or guidance. Use a different component (e.g., Message , Paragraph) is more suitable.

#Accessibility

For designers

  • Use sufficient color contrast. Make sure all interactive elements have clear labels and focus states.

For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • Use plain language and avoid jargon
  • Prioritize clarity and conciseness.