# Little Leaf responsive hero example

Little Leaf is a fictional plant shop. The SVG illustration was generated in SVG AI on September 26, 2026. The HTML page, copy and CSS layout were written manually.

Extract the archive, keep its folders together, and open `index.html` in a browser. The example works locally and makes no network requests. `comparison.html` shows the original and manually adjusted SVG at the original proportions and in deliberately wide containers.

## Files

- `index.html`: the complete responsive hero and fictional-project disclosure.
- `hero.css`: the manually written page styling and mobile layout.
- `comparison.html`: two scaling settings shown in the same containers.
- `assets/little-leaf-original.svg`: the complete original export, unchanged.
- `assets/little-leaf-proportional.svg`: one manual change to `preserveAspectRatio`.
- `prompt.txt`: the exact generation prompt.
- `README.md`: these instructions.

The actual generation used Ultra, one SVG, and Transparent On. That action used four credits. Available settings, prices and access can change; check the current composer and download access in your own account.

The prompt requested no gradients. The downloaded file contains five linear-gradient definitions, which are retained here. No AI edit was used. The manual version changes only `preserveAspectRatio="none"` to `preserveAspectRatio="xMidYMid meet"`; paths, colors, dimensions and viewBox are unchanged.

## Adapt the hero

Change the heading, paragraph and link text in `index.html`. Keep meaningful text in HTML so it can wrap and remain selectable. Replace the sample collection anchor with your own real destination when adapting the component.

The CSS starts with one column. At a viewport width of `50rem`, it places the copy and artwork in separate columns. The illustration uses `width: min(100%, 32rem)` and automatic height. Its empty alt text is appropriate for this decorative plant beside the fictional shop copy; supply meaningful alternative text if your replacement conveys information.

The root scaling change does not create the responsive page. HTML/CSS determines the columns, spacing and stacking. Both the original and the adjusted file can keep their proportions when the image's displayed height follows its width. The manual setting also specifies proportional fitting when an embedding viewport has a different shape.

When adapting this example, check your real headline at narrow widths, keyboard focus, artwork clipping and browser zoom. Do not crop away important artwork merely to make it fill a fixed box. The included comparison deliberately uses a wide box to explain scaling, not as the recommended hero layout.