Media object

Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Show code

  <x-media
    class="mb-4"
    :image="[
      'src' => 'https://via.placeholder.com/100x100',
      'width' => [100],
      'height' => [100]
    ]"
    :headline="[
      'link' => [
        'text' => 'Lorem ipsum dolor sit amet',
        'href' => '#',
      ]
    ]"
    text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
  />

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Show code

  <x-media
    class="mb-4 align-items-center"
    :image="[
      'src' => 'https://via.placeholder.com/100x100',
      'width' => [100],
      'height' => [100]
    ]"
    :headline="[
      'tag' => 'h5',
      'link' => [
        'class' => 'text-body',
        'text' => 'Lorem ipsum dolor sit amet',
        'href' => '#',
      ]
    ]"
    text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
  />

Lorem ipsum dolor sit amet

Show code

  @php
    $media = [
      'class' => 'mb-4',
      'image' => [
        'src' => 'https://via.placeholder.com/100x100',
        'width' => [100],
        'height' => [100]
      ],
      'headline' => [
        'link' => [
          'class' => 'text-body',
          'text' => 'Lorem ipsum dolor sit amet',
          'href' => '#',
        ],
      ],
      'text' => 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
    ]
  @endphp

  <x-media :all="$media"/>

Lorem ipsum dolor sit amet

Show code

  @php
    $media = [
      'image' => [
        'src' => 'https://via.placeholder.com/100x100',
      ],
      'headline' => ['text' => 'Lorem ipsum dolor sit amet'],
      'link' => [
        'url' => '#',
      ],
      'text' => 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
    ]
  @endphp

  <x-media
    class="mb-4 align-items-center"
    :image="[
      'class' => 'order-1',
      'src' => 'https://via.placeholder.com/100x100',
      'width' => [100],
      'height' => [100]
    ]"
    :body="[
      'class' => 'order-0 me-3'
    ]"
    :headline="[
      'tag' => 'h5',
      'link' => [
        'class' => 'text-body',
        'text' => 'Lorem ipsum dolor sit amet',
        'href' => '#',
      ]
    ]"
    text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
  />

Blade-Component informations

Path

components/media.blade.php

Name	Type	Description
all	array	Submit all data.
class	string	Classes can be added, all other attributes can also be set.
image	array	All image definitions.
headline	array	All headline definitions.
body	array	Set body div attributes.
text	string	Media body content, html is allowed.

For more information about media-object read the bootstrap documention Media-object

Components

EXAMPLES Example templates from Bootstrap Dokumention.

Themes

Media object

Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Blade-Component informations

EXAMPLES
Example templates from Bootstrap Dokumention.