Can be full width or confined with the grid
Can be left, center, or right aligned
can have top+bottom horizontal lines, a left or right vertical line, or no lines
Text is open sans
Quote marks are NOT inch marks
Quote marks are system font Georgia
Text color changes based on the theme colors

Usage

  {% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "<p>The greater danger for most of us lies not in ... achieving our mark.</p>"
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
content *	Text to appear in blockquote (Twig only). May be plain text or text wrapped in < p> tags.	`string`	—	—
size	Text size.	`string`	`xlarge`	`large`, `xlarge`, `xxlarge`
alignItems	Aligns items left, center, or right.	`string`	`left`	`left`, `center`, `right`
border	Add a border.	`string`	`vertical`	`vertical`, `horizontal`, `none`
indent	Indent text.	`boolean`	`false`	—
fullBleed	Width of the brower window.	`boolean`	`false`	—
no_quotes	Hide quotation marks.	`boolean`	`false`	—
logo	Add a logo component.	`object`	—	@bolt-components-logo/logo.schema.yml > Object details `invert` Set to true to invert the logo colors. Type: boolean —
author	Author of the quote.	`object`	—	`name` Author's name. — `title` Author's title. — `image` @bolt-components-image/image.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `src` Source url for image. Type: string — `alt` Alt tag for image. Type: string — `lazyload` Lazyload can boost performance by loading images on demand, instead of on initial page load. Type: boolean `true` or `false` `no_lazy` Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to `true`. Type: boolean `true` or `false` `placeholder_color` A valid CSS background color property shown while image loads. Type: string — `placeholder_image` Image path or image data shown while image loads. Type: string — `srcset` A comma seperated string of image urls and image widths, used for optimizing image loading performance. Type: string — `sizes` A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more. Type: string — `useAspectRatio` Use the `ratio` prop instead. Type: boolean `true` or `false` `ratio` Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio. Type: string OR boolean — `max_width` Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%". Type: string — `width` Override the default width of the image. If no height is provided, aspect ratio will be maintained. Type: — `height` Override the default height of the image. If no width is provided, aspect ratio will be maintained. Type: — `cover` Set an image to fill its container. Type: boolean `true` or `false` `imageAttributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `valign` Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top \| center \| bottom) or via specific pixel or percent offset (ex. 30%). Type: string —