Stories - Callout Component

[joewhitsitt]

fields

• field_position (select (left, center, right))
• field_image (media image, Scale and crop 300x300)
• field_callout_heading (text)
• field_callout_call_to_action (link, optional title, displayed as button)

notes

• similar to hds card with float option so that text can wrap around it.
• position also affects text alignment (e.g. center).

css/js/template

https://github.com/ITS-UofIowa/uiowa.edu.stories/blob/master/themes/stories/scss/components/paragraphs/_callout.scss

examples

/node/791

callout-body-only

callout-center

callout-right-img

callout-right

[pyrello]

Seems like this could be handled with the card component. We should review these requirements for #696 to make sure that we are getting everything we will need for the stories site.

[bspeare]

It looks like on now.uiowa.edu and stories.uiowa.edu the callouts are setting a fixed width:

.paragraphs-item-callout.left, .paragraphs-item-callout.right {
    width: 300px;
}

[pyrello]

It looks like on now.uiowa.edu and stories.uiowa.edu the callouts are setting a fixed width

Maybe we could convert this to a width based on breakpoint?