PHPackages                             aozen/customizable-image-card - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. aozen/customizable-image-card

ActiveLibrary[Utility & Helpers](/categories/utility)

aozen/customizable-image-card
=============================

This package offers you customizable card with some options. Which includes: content area, image, redirect url, text color, size of image and sidebyside(image and text) option

040PHP

Since Jan 16Pushed 7y ago1 watchersCompare

[ Source](https://github.com/aozen/customizable-image-card)[ Packagist](https://packagist.org/packages/aozen/customizable-image-card)[ RSS](/packages/aozen-customizable-image-card/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependenciesVersions (1)Used By (0)

Description
===========

[](#description)

This package offers you customizable card options. Which includes: 'content area, image, redirect url, text color, size of image, text size, card height and position' options

Installation
============

[](#installation)

Using Composer:

```
composer require aozen/customizable-image-card

```

Usage
=====

[](#usage)

In the resource file just add new CustomizableImageCard

```
public function cards(Request $request)
    {
        return [
            (new CustomizableImageCard)
            ->content("Your text is coming here. There is no limitation for this.")
            ->image("https://picsum.photos/600/120")
            ->url("https://github.com/aozen/customizable-image-card")
            ->color("#CD5C5C")
            ->sizeOfImage(30)
            ->panelheight("75px")
            ->fontsize("1.875rem")
        ];
    }

```

content
=======

[](#content)

Card texts here. You need to change. To be understanding clearly for new installs, default text is not empty.

image
=====

[](#image)

Image url here. Need to change. Default image is coming from picsum.photos

url
===

[](#url)

url option is used in href. image and texts are in the anchor tag. **Default is empty.**

color
=====

[](#color)

Color of the text. This is inlice css `:style="{'color': color}"`**Default is #B22222**

sizeOfImage
===========

[](#sizeofimage)

Just this is expect integer value. Available values are 10 and multiples. 10 20 30 40 50 60 70 80 90. There is also 100. But if this was used with `->sizeOfImage(100)`, text doesn't came to side of the image. It comes to the bottom of the image. Size of Image option using with percentage. `->sizeOfImage(60)` mean is `width: 60%`**Default is 30**

panelheight
===========

[](#panelheight)

If you are using card with width

```
(new CustomizableImageCard)->width("1/2")

```

Sometimes need to add panelheight option when css screw up. Because when your image's height smaller then texts div height, paddings are realy has big values. Card size is bigger then default ones and its realy looking bad. Solution is simple. Force to change card height with css

```
(new CustomizableImageCard)->width("1/2")->panelheight("75px")

```

**Default is empty**

fontsize
========

[](#fontsize)

Font size of the text. There is no limitation on this. Could be use with rem, px, etc. `:style="{ 'font-size': card.fontsize }"`Default is nova's **default: 1.875rem**.

Sample
======

[](#sample)

Demo image: [![alt text](https://raw.githubusercontent.com/aozen/customizable-image-card/master/img/Card.png)](https://raw.githubusercontent.com/aozen/customizable-image-card/master/img/Card.png)

Demo image2:

[![alt text](https://raw.githubusercontent.com/aozen/customizable-image-card/master/img/card2.png)](https://raw.githubusercontent.com/aozen/customizable-image-card/master/img/card2.png)

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/5b49826ec500f30a43d14359b7fde2723d999e700ef8c57414b9809450cd0886?d=identicon)[aozn](/maintainers/aozn)

---

Top Contributors

[![aozen](https://avatars.githubusercontent.com/u/16261617?v=4)](https://github.com/aozen "aozen (11 commits)")

### Embed Badge

![Health badge](/badges/aozen-customizable-image-card/health.svg)

```
[![Health](https://phpackages.com/badges/aozen-customizable-image-card/health.svg)](https://phpackages.com/packages/aozen-customizable-image-card)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)