Skip to main content

Components Overview

What are Components​

Beauty Playbook components are pre-made React components that allow you to add content in Hygraph that matches the Beauty Playbook design system. Here is a quick guide to using them and best practices for integrating them into your HyGraph Dev pages.

What Components are Available?​

  • ComparisonBlock - Compare two services or products side by side
  • QuoteComponent - Display styled customer quotes
  • VersusStripe - Show a visual comparison between two options
  • ServiceComparison - Compare service features across providers
  • EliteEightBlog - Display featured blog content

How do I use these components?​

BP components can be added directly to the content sections of BP Posts in the Vagaro Hygraph Project. Simply add the component in the flow of the markdown document and it will appear styled.