​
About this component

The Card component is a handy little UI element that’s great for showing off promotional materials and important info in a visually appealing way. While they share some similarities with banners, cards have their own unique vibe and offer flexibility in placement. When to Use Cards:
  • Promotional Materials: Think of cards as your go-to swiss-army knife for inline promotions. For instance, showcasing new features, nudging users with onboarding tips, or encouraging user referrals.
Advantages of Cards:
  • Inline Placement: You’ll usually find cards sitting neatly within in the main UI, like in a sidebar or alongside other product elements. This makes them easy to spot without getting in the way of the user experience.
  • Visual Appeal: Cards can be designed with eye-catching images, icons, and text, making them interesting and engaging for users.
  • Versatile Use: Whether you’re promoting a feature or sharing a helpful resource, cards can handle a variety of content types, making them super flexible.
Best Practices for Cards:
  • Strategic Placement: Think about where you put your cards. Positioning them where users can easily see them can boost engagement.
  • Keep It Consistent: Stick to a consistent design and placement across all your cards. These patterns helps create a cohesive look and feel throughout your app, which increases engagement.
  • Clear Calls to Action: Make sure each card has a clear call to action, like “Learn More” or “Request Demo.” This encourages users to take that next step.

​
Resources

​
Demo

​
Installation

import * as Frigade from '@frigade/react';

const App = () => {
  return (
    <Frigade.Card flowId="my-flow-id" />
  );
};

​
Customization

To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.

​
SDK Properties

​
as
ElementType<any, keyof IntrinsicElements>
Optional component to wrap the child components in, e.g. as={Dialog} will render the Flow in a modal Dialog. Defaults to Box.
​
autoStart
boolean
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown. You will need to call flow.start() or step.start() from the parent component if you set this to false. Most components should not need to override this behavior.Defaults to true.
​
children
any
​
css
Interpolation<Theme>
Emotion CSS prop to apply to the component. See Theming documentation for more information.Example usage:
<Frigade.Checklist css={{ backgroundColor: "pink", ".fr-button-primary": { backgroundColor: "fuchsia" } }} />
​
dismissible
boolean
Whether the Flow is dismissible or not
​
flowId
string
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
​
forceMount
boolean
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
​
modal
boolean
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
​
onComplete
FlowHandlerProp
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
​
onDismiss
FlowHandlerProp
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
​
onPrimary
StepHandlerProp
Handler for when primary button is clicked. If this function returns false or a promise that resolves to false, the step will not be automatically completed when clicked.
​
onSecondary
StepHandlerProp
Handler for when secondary button is clicked. If this function returns false or a promise that resolves to false, the step will not be automatically completed when clicked.
​
variables
Record<string, unknown>
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy. For instance, you can use title: Hello, ${name}! in the Flow configuration and pass variables={{name: 'John'}} to customize the copy.