Bootstrap 5 Media Component

Responsive bootstrap card with a strictly left-aligned image, title, description and optional aside flavor text. With Rust maud example code.

---

I seem to need this all the time, at some point this was a core component of bootstrap (version 2 maybe?), but now it needs to be built manually every single time. The classical component for listing media items!

This is an example of a Rust function using the maud templating engine:

pub fn media(
    title: &str,
    description: &str,
    image_url: &str,
    link: &str,
    aside: Option<&str>,
) -> Markup {
    html! {
        div class="card my-3" {
            div class="card-body" {
                div class="d-flex" {
                    a href=(link) {
                        @let alt = format!("picture of {}", title);
                        img src=(image_url) alt=(alt) class="me-3 rounded-1" style="width: 100px; height: 100px;" {}
                    }
                    div class="w-100" {
                        @if let Some(aside) = aside {
                            div class="d-flex justify-content-between" {
                                h5 class="d-inline" {
                                  a href=(link) class="fw-bold" { (title) }
                                }
                                small class="text-muted text-end" { (aside) }
                            }
                        } @else {
                            h5 class="" {
                              a href=(link) class="fw-bold" { (title) }
                            }
                        }
                        p class="mb-0" {
                            (description)
                        }
                    }
                }
            }
        }
    }
}

... and here is an example output in HTML:

<div class="card my-3">
    <div class="card-body">
        <div class="d-flex">
            <a href="https://example.com">
                <img src="https://example.com/image.jpg" alt="pricture of Example Title" class="me-3 rounded-1" style="width: 100px; height: 100px;" />
            </a>
            <div class="w-100">
                <div class="d-flex justify-content-between">
                    <h5 class="d-inline">
                        <a href="https://example.com" class="fw-bold">Example Title</a>
                    </h5>
                    <small class="text-muted text-end">Example Aside</small>
                </div>
                <p class="mb-0">
                    Example Description
                </p>
            </div>
        </div>
    </div>
</div>