Quote card

How to use

<Section columns={1}>
<Markdown>

# Quote 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 QuoteCard from "~/components/cards/Quote.astro";

<QuoteCard
  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",
    },
  }}
/>
<QuoteCard
  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",
    },
  }}
/>
<QuoteCard
  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 quote. See below.
layout	object	(optional) Layout data for the component. See below.
quote	string	The quote to be displayed in the card.
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 quote.
• 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