Media Object

The media: element renders a horizontal layout with an optional figure on the left, body content in the middle, and an optional action link on the right. It is useful for product listings, feature rows, team member cards, and similar patterns.

Syntax

media:
  img: <- product.jpeg
  h4: Product Name
  p: Short description of the product.
  action: fa-chevron-right -> /product-a

All child lines are indented with 2 spaces or 1 tab.

Child elements

Child	Role	Notes
img: or icon:	Figure (left slot)	The first image or icon found becomes the figure.
h1:–h6:, p:, small:, etc.	Body content (center)	All non-figure, non-action elements.
action:	Action link (right slot)	Optional. See below for syntax.

The action: element

action: takes a label and URL in the same -> format as a regular link:

action: Read more -> /product-a
action: fa-chevron-right -> /product-a

• If the label starts with fa-, it renders as a Font Awesome icon link (<i class="fa-chevron-right">).
• Otherwise it renders as a plain text link.

Examples

Image figure with body and icon action

media:
  img: <- product.jpeg
  h4: Product Name
  p: Available in three sizes.
  action: fa-chevron-right -> /product-a

Icon figure with body

media:
  icon: fa fa-bolt
  h4: Fast Delivery
  p: Ships within 24 hours.

Body only (no figure)

media:
  h4: Headline
  p: Body text here.
  action: Learn more -> /detail

Layout

The media object renders as a Bootstrap flex row:

[figure  ] [body content               ] [action]

• Figure: flex-shrink-0, right margin
• Body: flex-grow-1
• Action: flex-shrink-0, left margin (only rendered if action: is present)