Item Component

A small reusable UI component that shows an image on the left and three text areas on the right.

Files

item-component.js — ES module that exports createItemComponent() (default export).
index.html — example usage (the project includes a demo where multiple items are laid out in a responsive grid).

Import

Use as an ES module in a browser environment:

<script type="module">
import createItemComponent from './item-component.js';

const el = createItemComponent({
  imgSrc: 'images/example.jpg',
  imgAlt: 'Item image',
  text1: 'Title',
  text2: 'Subtitle',
  text3: 'Description or note',
  editable: false
});

document.body.appendChild(el);
</script>

Options

imgSrc (string) — image URL. If omitted, an empty <img> is created.
imgAlt (string) — image alt text.
text1 (string) — first text area (displayed as title by default).
text2 (string) — second text area (subtitle).
text3 (string) — third text area (description).
editable (boolean) — when true the text areas are rendered as editable <textarea> elements instead of static text.
imgWidth, imgHeight (number) — optional image dimensions in pixels (default 80 each).

Layout & Styling

item-component.js injects a small stylesheet into the document head when first used. Key classes:

.item-component — single item container.
.item-component__img img — the image element.
.item-component__content — wrapper for the three text lines.
.item-component__line--title, --subtitle, --desc — line-specific classes.
.item-component-grid — helper grid wrapper (3 columns by default). Wrap multiple item components in an element with this class to arrange them side-by-side.

Example: place components side-by-side by giving the parent class="item-component-grid" (see index.html). The stylesheet includes responsive breakpoints (3 → 2 → 1 column).

Examples

Render multiple items in a grid (as used in index.html):

<div id="items" class="item-component-grid"></div>
<script type="module">
import createItemComponent from './item-component.js';
const root = document.getElementById('items');
[
  { imgSrc: 'https://picsum.photos/seed/1/200/200', text1: 'A', text2: 'B', text3: 'C' },
  { imgSrc: 'https://picsum.photos/seed/2/200/200', text1: 'D', text2: 'E', text3: 'F' }
].forEach(data => root.appendChild(createItemComponent(data)));
</script>

Customization

To change image size, pass imgWidth and imgHeight when creating the component.
To alter the default grid columns or spacing globally, add your own CSS targeting .item-component-grid (the injected styles are minimal and can be overridden by another stylesheet loaded later).
To change the visual chrome (border, background, radius), override .item-component styles in main.css or another stylesheet loaded after the component.

Notes

The component is vanilla JS with no external dependencies.
Works in modern browsers that support ES modules.

If you want, I can:

Add a small README with screenshots.
Add local example images under an images/ folder and update index.html to use them.
Export the component as a custom element (<item-component>) instead of a factory function.

3.3 KiB Raw Blame History