Noob question here - I am quickly evaluating Evolve to see if we adopt it as a course authoring tool.
How would I go about creating a callout or blockquote such as this:
I’ve tried the graphic/text component but it doesn’t have much control over the layout. I’ve seen some threads talking but setting custom padding properties at the component level, but I can’t find a way to do that?
Hi Andy,
Getting something to look exactly like this in Evolve is annoyingly not really possible (at least in my experience). The issue is the size and location of the icon.
There are quite a few different ways of placing an icon/image to the left of some text, but all of them limit you to having the size of the icon/image take up a minimum of 30% of the width of the block, with the text taking up the remaining 70%.
I think the closest you could get would be to position the icon above the text instead, by using the “Icon” component. You could then create an Article Style specifically for this these callouts/blockquotes, and style the component to have the border, border radius and drop shadow.
The only way (as far as I’m aware) that you could replicate this almost exactly would be by using the “Infographic” component, which is one of the most customisable components in Evolve. But I wouldn’t advise doing this as when scaling down to smaller devices, the text in an Infographic component also scales down, rather than staying the same font size.
However, if the icon placement isn’t a big deal, you can easily style any component to look like this in the theme.
Hope this helps 
Whilst I appreciate it’s not exactly like what you want, @Liam_Goodman & @LaurynS have created a great course they’ve shared here which has this nice callout style:
Thanks, Matt.
I could live with that and have got something similar using the “icon” component. What I can’t quite work out is how to set background colours and/or borders on a per-component basis… looking into James’ earlier suggestion of article styles to make this work.
