{"id":16346807,"url":"https://github.com/simonsmith/components-media","last_synced_at":"2025-06-23T17:34:06.059Z","repository":{"id":19435536,"uuid":"22679186","full_name":"simonsmith/components-media","owner":"simonsmith","description":"Media object component","archived":false,"fork":false,"pushed_at":"2014-08-06T11:22:13.000Z","size":140,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-27T10:58:20.418Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://simonsmith.github.io/components-media/test/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-06T10:44:01.000Z","updated_at":"2019-09-07T02:52:29.000Z","dependencies_parsed_at":"2022-08-21T08:41:11.847Z","dependency_job_id":null,"html_url":"https://github.com/simonsmith/components-media","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/simonsmith/components-media","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fcomponents-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fcomponents-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fcomponents-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fcomponents-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonsmith","download_url":"https://codeload.github.com/simonsmith/components-media/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fcomponents-media/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261522978,"owners_count":23171922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T00:37:33.710Z","updated_at":"2025-06-23T17:34:05.947Z","avatar_url":"https://github.com/simonsmith.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SUIT CSS components-media\n\nA SUIT CSS component that provides a [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/), commonly used for things like comments.\n\nRead more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).\n\n## Installation\n\n* [npm](http://npmjs.org/): `npm install suitcss-components-media`\n* [Component(1)](https://github.com/component/component/): `component install simonsmith/components-media`\n* [Bower](http://bower.io/): `bower install suitcss-components-media`\n\n## Available classes\n\n* `Media` - [core] The core media component\n* `Media--alignRight` - [modifier] Align the media object to the right\n\n## Configurable variables\n\n* `--Media-heading-margin`\n* `--Media-object-gutter`\n\n## Use\n\nExample:\n\n```html\n\u003cdiv class=\"Media\"\u003e\n  \u003cdiv class=\"Media-object\"\u003e\n    \u003cimg src=\"http://lorempixel.com/80/80/\" alt=\"\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"Media-body\"\u003e\n    \u003ch2 class=\"Media-heading\"\u003eHeading\u003c/h2\u003e\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque\n    venenatis interdum urna, quis sodales mauris rutrum quis.\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Testing\n\nInstall [Node](http://nodejs.org) (comes with npm).\n\n```\nnpm install\n```\n\nTo generate a build:\n\n```\nnpm run build\n```\n\nTo generate the testing build.\n\n```\nnpm run build-test\n```\n\nBasic visual tests are in `test/index.html`.\n\n## Browser support\n\n* Google Chrome\n* Firefox\n* Opera\n* Safari\n* Internet Explorer 8+","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fcomponents-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsmith%2Fcomponents-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fcomponents-media/lists"}