Review card

How to use

<Section columns={1}>
<Markdown>

# Review card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

</Markdown>

import ReviewCard from "~/components/cards/Review.astro";

<ReviewCard
  quote="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat."
  attribution={{
    name: "Seddo Eiusmod",
    description: "Tempor incididunt ut labore",
    image: {
      src: Avatar,
      alt: "Example alt text",
    },
  }}
/>
<ReviewCard
  quote="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat."
  attribution={{
    name: "Seddo Eiusmod",
    description: "Tempor incididunt ut labore",
    image: {
      src: Avatar,
      alt: "Example alt text",
    },
  }}
/>
<ReviewCard
  quote="Et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat."
  attribution={{
    name: "Seddo Eiusmod",
    description: "Tempor incididunt ut labore",
    image: {
      src: Avatar,
      alt: "Example alt text",
    },
  }}
/>

</Section>

Props

Prop	Type	Description
attribution	object	(optional) Data for the attribution section of the review. See below.
layout	object	(optional) Layout data for the component. See below.
quote	string	The review to be displayed in the card.
rating	number	Rating out of 5 stars.
class	string	(optional) Additional classes applied to the root <figure>.
(extends)	HTMLAttributes<"figure">	(optional) All standard HTML attributes for a <figure>.

attribution object

• name — string
  The name displayed underneath the review.
• description — string
  (optional) The second line of text under the name.
• date — Date
  (optional) Date displayed underneath the name and description.
• image — object
  (optional) Image data for the profile component. See below.

image object

• src — ImageMetadata
  The imported image metadata (output from Astro’s image import).
• alt — string
  (optional) Alt text for the image, defaults to empty string "".

layout object

• center — boolean (optional) Aligns card text center, default is false.

3 Column Carousel

4 Column Carousel