📄️ Components Overview
What are Components
📄️ Comparision Table
The Comparision Table component displays a comparison table of two provider features and pricing. Each comparision has a dedicated table in /admin/table-editor that is used to populate the data for the component.
📄️ Quote Component
The Quote Component displays the text of a quote with a date and a source with special formatting. The component has three different style variations based on how many quotes are added. See the Beauty Playbook Figma for reference on the styling. The three most common will be one quote, two quotes, and three quotes.
📄️ Comparison Block
The ComparisonBlock component is used to compare two services or products. It displays a block of text consisting of two columns - one for each company (See Example below).
📄️ Elite Eight
The Elite Eight component displays 8 comparison tables. Each table has a list of features and a list of benefits (See Example below).
📄️ Key Features
The Key Features component displays blocks of text consisting of a list of features (See Example below).
📄️ Versus Stripe
The VersusStripe component displays a comparison of two services providers. It displays a block of text consisting of two columns - one for each company (See Example below).
📄️ Star Reviews
The Star Reviews component displays a block of text consisting of a rating and a number of reviews (See Example below).