Fernand UI components examples

Fernand

A bento grid layout showcasing product features with a title, description, and visual examples for each feature.

• Bento box

Fernand

A logical rule builder interface with 'WHEN', 'IF', and 'THEN' sections. The 'WHEN' section contains two dropdowns to set a trigger event. The 'IF' and 'THEN' sections contain buttons to add conditions and actions.

• Query builder

Fernand

A horizontal popover displaying a palette of ten circular color swatches, anchored to a trigger button showing the currently selected color.

• Color picker

Fernand

A success toast notification indicating a channel was added.

• Notification Toast

Fernand

A single radio button option with a title and a multi-line descriptive text explaining the role.

• Checkbox & radio

Fernand

A selected radio-style option for a 'Support agent' role, featuring a blue checkmark icon, a title, and a descriptive subtitle.

• Checkbox & radio

Fernand

An inline alert box providing information about default business hours settings.

• Tips

Fernand

A message composer component with tabs for 'Reply' and 'Note', a text area with placeholder text, and a toolbar with formatting and attachment options, plus a 'Send' button.

• Textarea

Fernand

A simple profile header displaying an avatar, name, and email address.

• Avatar

Fernand

A vertical list of onboarding tasks. The first task is marked as done, while the remaining tasks have call-to-action buttons to complete them.

• Stepper

Fernand

A full-width informational banner prompting the user to complete an onboarding step.

• Alert

Fernand

A flat-style vector illustration of a postman in a blue uniform meditating in a lotus position. Envelopes and email icons orbit around him.

• Illustration