Voit Docs
  • Read Me
  • Introduction
    • Get Started
  • Design Language
    • Philosophy
  • Accessing The Design System
    • Using Variables
  • Structure Overview
  • Accessibility & Inclusivity
  • Guidelines
    • Design tokens
  • Components
    • Overview
    • Accordion
    • Aspect Ratio
    • Badge
    • Breadcrumb
    • Button
    • Tab Button
    • Tile Button
    • Card (Header, Footer)
    • Checkbox
    • ComboBox
    • Digit Entry
    • Dimming Overlay
    • File Drop
    • Index Bar
    • Info Label
    • Inline Message
    • Link
    • List Item
    • List Tree
    • Page Control
    • Pagination
    • Popover
    • Progress Bar
    • Progress Indicator
    • Radio
    • Segmented Control
    • Select
    • Shortcut
    • Slider
    • Stepper
    • Switch
    • Tag
    • Text Area
    • Text field
    • Toast
    • Tooltip
    • Tool Bar
  • Legal
    • Terms & Conditions
    • Contact US
    • License Agreement
    • Feedback
Powered by GitBook
On this page
  • Overview
  • When to use
  • When not to use
  • Anatomy
  • Accessibility
  • Example
  1. Components

Aspect Ratio

Aspect ratio components maintain a consistent width-to-height ratio for media and other elements, ensuring they display correctly across different screen sizes and resolutions.

PreviousAccordionNextBadge

Last updated 7 months ago

Overview

The Aspect Ratio component allows designers and developers to apply predefined aspect ratios to containers, images, videos, and other media elements, ensuring a consistent and visually appealing presentation.

When to use

  • Apply the Aspect Ratio component when you need to maintain consistent proportions for media elements.

  • Use aspect ratios in responsive designs to ensure that media and containers scale proportionately.

  • When using this component, ensure content within the aspect ratio is fully visible and not clipped or distorted.

When not to use

  • Avoid using a fixed aspect ratio for content that requires flexibility in size or shape, such as text-heavy containers.

  • Avoid applying aspect ratios that may lead to awkward or cramped layouts, especially in responsive designs.

  • This is only a container element and should not be used without embedded content (image, video etc.)

Anatomy

Accessibility

  • Content Visibility: Ensure that the Aspect Ratio component does not obscure or clip essential content.

  • Support for Visual Hierarchy: Use aspect ratios that support clear visual hierarchy, making it easy for users to navigate and understand content.

  • Support for Assistive Technologies: Ensure that all content within the aspect ratio remains navigable and accessible to users relying on these tools.

Example

Aspect Ratio (W:H)
Common Usage

1:1

Profile pictures, social media avatars

1:2

Tall and narrow banners, split screens

2:1

Hero images, wide banners

2:3

Portrait images, mobile cards

3:2

Landscape images, product thumbnails

3:4

Article images, inline photos in blogs

4:3

Standard images in content-heavy websites

4:5

Portrait-oriented product images, feature cards

5:4

Close to a perfect square, app icons

9:16

Vertical videos or stories

9:21

Extra tall vertical layouts, mobile first views

10:16

Detailed infographics, complex app interfaces

16:9

Embedded videos, featured content blogs

16:10

Slightly taller than wide screen

21:9

Ultra-wide displays, cinematic video

Golden Ratio_Landscape (1.618:1)

Landing pages with balanced and aesthetic layouts

Golden Ratio_Portrait (1:1.618)

Portrait-oriented screens, e-book readers