Marigold
Getting StartedFoundationsComponentsPatternsRecipesReleases
Discover new Tutorials!

Components

Overview

Application

MarigoldProvider
updated
RouterProvider
updated

Layout

Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
Inset
Scrollable
Split
Stack
updated
Tiles

Form

Autocomplete
Button
updated
Calendar
Checkbox
ComboBox
DateField
DatePicker
Form
Multiselect
new
NumberField
Radio
SearchField
Select
Slider
Switch
TextArea
TextField
TimeField
new

Collection

SelectList
updated
Table
updated
Tag

Navigation

Accordion
Breadcrumbs
beta
Pagination
Tabs

Overlay

ContextualHelp
new
Dialog
Menu
Toast
beta
Tooltip
updated

Content

Badge
Body
Card
Divider
updated
Footer
Header
Headline
updated
Icon
updated
Image
Link
updated
List
updated
SectionMessage
SVG
updated
Text
updated
VisuallyHidden
updated
XLoader

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
useAsyncListData
useListData
useResponsiveValue
useTheme

Aspect

Keep media elements at a certain apsect ratio.

The <Aspect> component keeps media elements like images or videos in their correct aspect ratio, preventing them from looking stretched or squished on different screens. It is particularly useful for creating responsive layouts where consistent media dimensions are important.

Usage

When using the <Aspect> component to maintain the aspect ratio of media elements, choose an appropriate predefined ratio to ensure a consistent and visually appealing layout. The available aspect ratios include:

  • square: For media that should have equal width and height.
  • landscape: Suitable for wider-than-tall elements, commonly used for photos and videos.
  • portrait: Ideal for media taller than they are wide, like profile pictures.
  • widescreen: Useful for standard video content with a 16:9 ratio.
  • ultrawide: Best for extra-wide content, such as panoramic media.
  • golden: Reflects the golden ratio, providing a balanced and aesthetically pleasing aspect.

Select a ratio based on the type of media and the context in which it is displayed to achieve the best visual effect.

Preview
Code
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower
an abstract marigold flower

Image

When using the <Aspect> component with the <Image> component, it's recommended to use the fit and position of the <Image>  component properties to achieve the best results. The fit option ensures that the image is properly resized to fill the aspect container without distortion, while the position option controls how the image is aligned within the container, allowing for better visual balance.

Preview
Code
a field of marigold flowers and a bright blue sky
a field of marigold flowers and a bright blue sky

Iframe

When using the <Aspect> component with an <iframe>, it can help to maintain the aspect ratio of embedded content, such as videos or maps, ensuring they appear correctly across different screen sizes.

To get the best results, combine the aspect component with appropriate width and height settings on the iframe to avoid any stretching or scaling issues.

Preview
Code

Max Width

Setting a max width is useful when you want to prevent a media element from growing too large, especially on wider screens. It helps maintain a balanced layout by ensuring the media stays within a reasonable size.

The max width can be controlled using the maxWidth prop, allowing you to easily set a limit that fits your layout needs.

Preview
Code
an abstract marigold flower

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
View Aspect stories
aria-describedby?
string;
Identifies the element (or elements) that describes the object.
aria-details?
string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?
string;
Defines a string value that labels the current element.
aria-labelledby?
string;
Identifies the element (or elements) that labels the current element.
aria-live?
"off" | "polite" | "assertive";
Indicates the level of importance for updates in the live region.
  • 'off': Updates are not announced unless focused.
  • 'polite': Updates are announced when the user is idle.
  • 'assertive': Updates are announced immediately, interrupting other announcements.
children?
ReactNode;
The children of the component.
id?
string;
The element's unique identifier. See MDN.
maxWidth?
string;
The maximum width of the image.
Defaults to:
100%
ratio?
"square" | "landscape" | "portrait" | "widescreen" | "ultrawide" | "golden";
Defaults to:
"square"
role?
"region" | (string & {});
Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

Related

Building layouts
Learn how to build layouts.
Last update: 3 months ago
Build with 🥵, 🧡 and
v14.1.1