ZE Media Text Component

ZE Media Text combines a Title, an Image, Copy, and CTA(s). Any of these items can be left out. The copy is Rich Text with some formatting options.

When the image is aligned left or right, the text will wrap around it. 

Image sizes can be set from icon to full screen and are fully responsive.

Schemes can be applied. These have both light and dark modes and have been designed to meet accessibility standards. 

 

No Theme Applied

Alt Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. 

Call To Action

Primary Theme

Alt Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. 

Call To Action

Secondary Theme

Alt Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. 

Call To Action

Neutral Theme

Alt Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. Here is additional copy to fill it out. 

Call To Action

White Background with Dark Mode

Alt Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Using black or white theme there is no dark or light mode. Use a light background in this case.

White Text Theme

Alt Text

Normal Weight H2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Here is additional copy to fill it out. Normal weight headers only work in the Description, not the title.

Call To Action

Black Text Theme

Alt Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph and this is what a link looks like. Here is additional copy to fill it out. Using black or white theme there is no dark or light mode. Use a light background in this case.

Call To Action
Alt Text

Content displayed with flex-box. 
This works best with only 2 items, like image and text.

Alt Text

Content displayed with flex-box. 
This works best with only 2 items, like image and text.

Alt Text

Full Width Button

test
Alt Text

Regular Button 

test

Test

asd fasdfs

asdfasdf asdfasdf asdfasdfas

test

A few examples of the Media Text Legend style. This style also applies a filter to the images in dark mode. That filter works best with PNG images with transparency.

Alt Text

Icon: Product Warranty

Alt Text

Icon: Printer

Alt Text

Icon: Phone

Alt Text

Icon: MasterSpec

Alt Text

Icon: Email

Alt Text

Icon: Certificate

Alt Text

Icon: RSS

Alt Text

Icon: Share

Alt Text

Icon: Specification

Alt Text

Icon: Water Check