PHPackages                             bellevue7k/span-classes - 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. bellevue7k/span-classes

ActiveStatamic-addon

bellevue7k/span-classes
=======================

A custom button for Bard to allow a span with a class to be added to selected text.

1.0(4y ago)024MITJavaScript

Since May 27Pushed 4y agoCompare

[ Source](https://github.com/bellevue7k/span-classes)[ Packagist](https://packagist.org/packages/bellevue7k/span-classes)[ RSS](/packages/bellevue7k-span-classes/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (3)Dependencies (1)Versions (5)Used By (0)

Bard add-on for Statamic 3 for adding a span and class to selected content
==========================================================================

[](#bard-add-on-for-statamic-3-for-adding-a-span-and-class-to-selected-content)

[![Statamic 3.0+](https://camo.githubusercontent.com/93c61a311851e398f5663226aca5d307d91ef898067c6b294110a785d6c2e735/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d332e302b2d4646323639453f7374796c653d666f722d7468652d6261646765266c696e6b3d68747470733a2f2f73746174616d69632e636f6d)](https://camo.githubusercontent.com/93c61a311851e398f5663226aca5d307d91ef898067c6b294110a785d6c2e735/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d332e302b2d4646323639453f7374796c653d666f722d7468652d6261646765266c696e6b3d68747470733a2f2f73746174616d69632e636f6d)

This is an example Bard addon for Statamic 3 that adds a span with a class to selected content.

Installation
------------

[](#installation)

Install it via the composer command

```
composer require bellevue7k/span-classes

```

In your Bard editor instances (note, *not* the configuration view), you'll see the new button added.

Select some text, click the new icon, and select a class type, and voilà!

Output
------

[](#output)

When output, the markup will be a span with a class attached.

```
This is my text with whiteSpace-noWrap highlighted using the addon.
```

Use on the front end
--------------------

[](#use-on-the-front-end)

You will need to add classes to your front end stylesheets to see them come through there too.

A finished class might be `whiteSpace-noWrap` for example.

Your CSS for your frontend can then target that specific class.

```
.whiteSpace-noWrap {
    hyphens:none;

    /* more class types */
}
```

License
-------

[](#license)

This addon is licensed under the MIT license.

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 70.8% 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.

###  Release Activity

Cadence

Every ~10 days

Total

4

Last Release

1785d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/4104214?v=4)[b7k](/maintainers/b7k)[@b7k](https://github.com/b7k)

---

Top Contributors

[![CurdinG](https://avatars.githubusercontent.com/u/30653205?v=4)](https://github.com/CurdinG "CurdinG (17 commits)")[![j3ll3yfi5h](https://avatars.githubusercontent.com/u/6337411?v=4)](https://github.com/j3ll3yfi5h "j3ll3yfi5h (5 commits)")[![martyf](https://avatars.githubusercontent.com/u/1491079?v=4)](https://github.com/martyf "martyf (2 commits)")

---

Tags

statamicbard

### Embed Badge

![Health badge](/badges/bellevue7k-span-classes/health.svg)

```
[![Health](https://phpackages.com/badges/bellevue7k-span-classes/health.svg)](https://phpackages.com/packages/bellevue7k-span-classes)
```

###  Alternatives

[statamic/statamic

Statamic

824170.4k](/packages/statamic-statamic)[visuellverstehen/statamic-classify

A useful helper to add CSS classes to all HTML tags generated by the bard editor.

20116.8k](/packages/visuellverstehen-statamic-classify)[aryehraber/statamic-captcha

Protect your Statamic forms using a Captcha service

16194.4k](/packages/aryehraber-statamic-captcha)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

2381.5k10](/packages/marcorieser-statamic-livewire)[stillat/relationships

Provides bi-directional entry relationship automation

2257.4k1](/packages/stillat-relationships)[withcandour/aardvark-seo

Save time and get your Statamic site to rank better with the SEO addon for Statamic.

13128.3k](/packages/withcandour-aardvark-seo)

PHPackages © 2026

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