title: Blockquote
label: Blockquote
status: live

context:
  exampleMultiColumns: "false"
  component-type: element

variants:
  - name: default
    context:
      blockquote_text: '“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.”'
      blockquote_author: 'Marion Burton'
      blockquote_author_details: 'Title and other details'
      angular: <vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_details]="'Title and other details'"/>
      react:  <VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_details="Title and other details"/>
  - name: linked name
    context:
      isExample: true
      variant: default
      blockquote_text: '“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.”'
      blockquote_author: 'Marion Burton'
      blockquote_author_href: '#'
      blockquote_author_details: 'Title and other details'
      angular: <vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
      react: <VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_href="#" blockquote_author_details="Title and other details"/>
  - name: With image
    context:
      variant: image
      blockquote_text: '“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.”'
      blockquote_author: 'Marion Burton'
      blockquote_author_imageurl: /assets/vf-profile/assets/vf-icon--avatar.svg
      blockquote_author_details: 'Title and other details'
      angular: <vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_imageurl]="'./assets/vf-icon--avatar.svg'" [blockquote_author_details]="'Title and other details'"/>
      react: <VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_imageurl="vf-icon--avatar.svg"  blockquote_author_details="Title and other details"/>
  - name: With image and linked name
    context:
      isExample: true
      variant: image
      blockquote_text: '“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.”'
      blockquote_author: 'Marion Burton'
      blockquote_author_imageurl: /assets/vf-profile/assets/vf-icon--avatar.svg
      blockquote_author_href: '#'
      blockquote_author_details: 'Title and other details'
      angular: <vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_imageurl]="'./assets/vf-icon--avatar.svg'"  [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
      react: <VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_imageurl="vf-icon--avatar.svg" blockquote_author_href="#" blockquote_author_details="Title and other details"/>
