Flyers are portrait shape containers, almost always with an image or video at the top and a text body. The body can have various text content, but usually consists of a title and text. Many other components (video-box) or even img should fit the container nicely as it does not have any default padding.

Flyers are designed to be contained in a grid - they will fill their container width. If you need flyers with an equal height, look at the grids plugin. If you need flyers to form a pintrest like layout, look at align-flyers.

Flyer components

Flyers are complex components and so have are actually a collection of them that can be optionally. Here is an overview:

  • flyer - the base component
  • flyer-header - a simple header with a grey background
  • flyer-body - create a container with padding and alignment
  • flyer-mast - an image of a set height that has a smaller (optional) image in the corner that breaks away a bit from the flyer container.
  • flyers-grid - this extends grid to set correct padding/margin on flyer grids

Case Studies flyer

Burton increases sales by investing in performance channel

Menswear fashion brand Burton launched an initiative across the performance channel, adopting a ‘channel-neutral approach’ that increased conversions and sales by 395%.

Ben and Jerry’s uses spare Twitter characters to promote World Fair Trade Day 2011

Ben and Jerry’s ran a Twitter campaign to promote World Fair Trade Day in 2011, creating a tool that inserted Fair Trade messages into spare characters.

Landing page flyer (with equal heights)

Sponge Bob

Lofty company position goes here

Ebay logo

Dora the Explorer

Lofty company position goes here

EE logo

Contact flyer (with equal heights)

EMEA

Elearning flyers

Display

Oh Leela! You're the only person I could turn to; you're the only person who ever loved me. THE BIG BRAIN AM WINNING AGAIN! I AM THE GREETEST! NOW I AM LEAVING EARTH, FOR NO RAISEN! There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors!

1 of 10

Modules completed