Standard Customization From the action link page you can customize the following settings to brand your action link to match the look and and feel of your app.
Accent color : This color will be applied as the primary color in the action flow UI.Display name : Typically your company name. This will be displayed as the Company Name in the action link flow.Call to action label : This label will be used for buttons and primary CTAs in the action link flow
Advanced Customization Want to customize your Action Link even more? You can also customize the appearance of the UI components using standard CSS styles. By leveraging CSS, you can integrate Vendr’s UI components into your application’s design while maintaining a consistent and intuitive user experience. Set CSS properties like fontFamily and text-color to broadly customize components appearing in your Vendr Link.
Vendr components expose class hooks for key elements, allowing you to style them directly with CSS. The layout of the UI component stays consistent, but you can modify colors, fonts, borders, padding, and more.
Applying your custom CSS
Under the Action Link setting, select advanced .
Copy and paste your CSS styles into the text box.
Save your action link.
Your custom styles will be pushed to any pages for the specific action link you applied the custom css style on.
Only supported CSS properties will be applied; unsupported styles will be ignored.
Sets the button’s text color.
Defines the button’s background color.
Allows customization of the border (e.g., width, style, color).
Adds rounded corners to the button.
Defines the space inside the button between its content and border.
Sets the thickness of the text.
Changes the background color on hover.
Alters the text color on hover.
Sets the width of the button.
Specifies the height of the button.
Supported Card CSS Props Defines the card’s background color (#ffffff by default).
Sets the text color inside the card (#333333 by default).
Specifies the border’s width, style, and color (1px solid #cccccc).
Adds rounded corners to the card (8px).
Controls the inner spacing of the card’s content (16px).
Defines the font used inside the card (Arial, sans-serif).
Sets the font size for the card’s content (16px).
Adds a shadow effect to the card (0 4px 6px rgba(0, 0, 0, 0.1)).
Sets the fixed width of the card (300px).
Specifies the height of the card (500px).
Changes the background color when the card is hovered (#f9f9f9).
Enhances the shadow effect on hover (0 6px 8px rgba(0, 0, 0, 0.15)).
Defines the text color for the card title (#333333 by default).
Adjusts the text size for the title (18px).
Sets the thickness of the title text (bold).
Sets the text color for the button inside the card (#333333).
Defines the button’s background color (#007bff).
Specifies the button’s border width, style, and color (2px solid #007bff).
Adds rounded corners to the button (8px).
Sets the space inside the button between its content and border (14px 28px).
Adjusts the text size inside the button (16px).
Sets the thickness of the button text (600).
