Consider moving sample below usage information

[ChristineP2]

Here are samples of some of the options available for positioning. I propose one of the options where title/description are before the sample may be a more pleasing solution overall. As far as positioning of the component relative to the title and usage information, it seemed like there are basically 4 5 options:

I thought of this after I'd finished doing all the screen shots, but I could pull the title out above everything, instead of leaving it inside the description div, so that's the 5th option.

Here are the 4 options I took screenshots for:

Before everything like it is now

Between Title and usage instructions

After Title and Usage Instructions

After Description

[kitop]

I don't have a strong opinion on this, except that I'd say it's best for the component to be outside the gray container with the code example.
So leaning towards

"Before everything like it is now" and "After Description". Pulling the title out of the gray container can also be an interesting option (and I'd still keep the component out of it as well)
Ping @devnacho for design feedback.

[devnacho]

Thanks @ChristineP2 for your proposal!

I agree with @kitop that it's best for the component to be outside the gray container and I think that a good option to experiment would be:

• Title
• Component
• Gray cointainer with code

[ChristineP2]

I like the idea of title, component then usage in the gray container. I'll theoretically try that this weekend as well :)