Card: Media Text

[data-type="media-text"]

Media Text [ card ]

Examples using different surface and caption combinations, also the .text-above modifier

Image alt

On .surface

Media + Text

Using the .text-above option. Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 2

Card title

Media + Text

Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 3
Caption: Using Caption Title only

Header title

Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 4
Caption: Using Caption Title only (stacked)

Card title

Media + Text

This combination has a caption as well as text. The caption is stacked. The surface is set on the [ card ] to .surface-dark

Note: The [ group ] above has all images set to .aspect-16-9

Media Text [ card ] (Blend modes)

Examples all using the same blend mode set at [ group ] level. Each [ card ] has its own .surface assigned

Image alt

Card title

Media + Text

Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 2

Card title

Media + Text

Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 3
Caption: Using Caption Title only

Card title

Media + Text

Maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus blanditiis aliquam placeat?

Image alt 4
Caption: Using Caption Title only (stacked)

Card title

Media + Text

Expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus.

Media Text [ card ] (Individual aspect ratios)

Examples all using the same aspect ratio (aspect-landscape) set at [ group ] level. Each [ card ] however has an individual aspect ratio applied. By default the object-fit of the image is set to cover the area.

Image alt

Square media

Media + Text

Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 2

Portrait media

Media + Text

Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 3
Caption: Using Caption Title only

Landscape Media 21:9

Media + Text

Maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus blanditiis aliquam placeat?

Image alt 4
Caption: Using Caption Title only (stacked)

Default aspect ratio

Media + Text

Expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus.

Media Text [ card ] (Individual Object Fit)

Examples all using the same object fit value (cover) set at [ group ] level. Each [ card ] however has an individual object fit applied.

Image alt

Object Fit: Cover

Media + Text

Image covers the entire boundary keeping its original aspect ratio. This is suitable for background and abstract images where its okay that some of the iamge is cropped to cover the space

Image alt 2

Object Fit: Contain

Media + Text

The image is contained within the boundary. This means no cropping occurs so it is suitable for logos or images with text.

Image alt 3

Object Fit: Fill

Media + Text

The image fills the boundary area however it compromises the original aspect ratio.

Image alt 4

Object Fit: None

Media + Text

The image is not resized in any way so will show at its original size. More of the image will be cropped.

Media Text [ card ] (Mixed modes)

The group has the surface setting of .surface-cyber and also the card-only checkbox has been ticked, i.e. .surface-card-only. Each [ card ] has it's own settings, e.g. blend mode, image opacity and surface value to produce different effects

Image alt

Blend: Multiply

Media + Text

Doloribus ducimus blanditiis aliquam placeat? Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 2

--obj-opacity: 50

Media + Text

Alias asperiores dolorum nobis delectus cum expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Image alt 3

Blend: Luminosity

Media + Text

Maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus blanditiis aliquam placeat?

Image alt 4

Blend: Darken, Surface: Cyber, Intensity 700, Locked

Media + Text

Expedita ea unde reiciendis, maxime iure, quae pariatur magnam voluptate dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ducimus blanditiis aliquam placeat?

Media Text [ card ] (Playground)

Different settings on [ group ] and [ card ] to test robustness

Lightbulbs in front of green wall
A small caption credit, e.g. photographer

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis eu lorem ipsum

Card text. Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book NowAnother link

PublicationIssue 118

Caption Text

Caption Subtext

Sed consectetur cursus. Feugiat nullam in facilisis eu lorem ipsum

Card text. Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book NowAnother link

PublicationIssue 118

Blue technology waves

Caption Text

Caption Subtext

Lightbulbs in front of green wall
A small caption credit, e.g. photographer

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis eu lorem ipsum

Card text. Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book NowAnother link

PublicationIssue 118