Components / Aspect Ratio

Aspect Ratio

Stable

media

16 / 9

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../aspect_ratio_example.html.erb

<div class="w-full max-w-sm">
  <%= render Senren::AspectRatioComponent.new(variant: :video) do %>
    <div class="flex h-full w-full items-center justify-center rounded-lg bg-[hsl(var(--senren-muted))] text-sm text-[hsl(var(--senren-muted-foreground))]">
      16 / 9
    </div>
  <% end %>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal

bin/rails senren:add aspect_ratio

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal

bin/rails generate senren:component aspect_ratio --no-client

At a glance #

Category Layout

Class name Senren::AspectRatioComponent

Stimulus —

Variants square, video, portrait, ultrawide

Depends on —

Pairs with card, avatar

Source #

app/components/senren/aspect_ratio_component.html.erb

<%= tag.div(**root_attrs("relative w-full overflow-hidden rounded-(--senren-radius)")) do %>
  <%= content %>
<% end %>

app/components/senren/aspect_ratio_component.rb

# frozen_string_literal: true

module Senren
  class AspectRatioComponent < BaseComponent
    VARIANTS = {
      square: 'aspect-square',
      video: 'aspect-video',
      portrait: 'aspect-[3/4]',
      ultrawide: 'aspect-[21/9]'
    }.freeze

    SIZES = { md: '' }.freeze
  end
end

AI agent rules #

Use for

+media
+image placeholders
+embeds

Avoid

-forcing aspect on text content

Accessibility #

Inner media must include alt or aria-label.

Card

Label