Classname being passed into content

I have edited my Perch blog post template to allow users to chose what colour a latest blog box is on a site's homepage. By passing the ID into the class list, the user can pick if they want a grey, purple or green class color for the latest blog posts window on the homepage. The issue I have is that on the main blog post page, perch is reading the actual classname as content. i.e. the word grey appears under the blog post text/description. I have tried adding searchable="false" to the perch tag, but this has no use. is there any other way around this? i.e. to hide this classname from appearing as live content.

POST TEMPLATE

<article class="h-entry">


<!-- TITLE -->
    <div class="purple small-line"></div>
    <h2>
        <perch:blog id="postTitle" type="text" label="Title" required="true" size="xl autowidth" order="1" />
    </h2>

<!-- DATE & TIME  -->
    <h4 class="date">
        <time class="dt-published" datetime="<perch:blog id="postDateTime" type="date" label="Date" time="true" format="d M Y" divider-before="Publishing" />">
            <perch:blog id="postDateTime" type="date" time="true" format="d M Y" order="2" /> 
        </time>
    </h4>

<!-- FEATURE IMAGE -->
    <perch:if exists="image">
        <div class="blog-image-wrapper">
            <img class="blog-feature-image" src="<perch:blog id="image" type="image" width="1000" height="800" label="Image" order="3" />" alt="<perch:blog id="postTitle" />" />
        </div>
    </perch:if>

<!-- DESCRIPTION  -->
 <div class="blog-post-wrapper">
        <perch:blog id="postDescHTML" type="textarea" editor="redactor" html="true" imagewidth="700" label="Post" size="xxl autowidth" required="true" order="4" />
    </div>


<!-- EXTRACT -->

 <perch:blog id="postExtract" type="textarea" label="Extract" order="3" suppress="true" size="s"  />


 <!-- SELECT INFO BOX COLOR ON HOMEPAGE LATEST BLOG POSTS -->


 <perch:blog id="boxColor" label="Pick InfoBox Color" type="select" options="Purple|purple, Grey|grey, Green| " />

</article>

HOMEPAGE LATEST BLOG POSTING TEMPLATE

</perch:before>

  <div data-ix="popup" class="blog-list-wrapper hp-previews left">
    <a href="<perch:blog id="postURL" />" data-ix="blog-interaction" class="blog-link w-inline-block">
        <div class="blog-list-img-wrapper hp-img-wrapper">
        <div class="overlay"></div><img class="blog-list-image" src="<perch:blog id="image" type="image" width="200" height="100" crop="true" />" alt="<perch:blog id="postTitle" />" >
        </div>
    </a>
      <div data-ix="scroll-opacity" class="alt-info info-box-wrapper <perch:blog id="boxColor" />">
        <div class="ivory small-line"></div>
        <div class="blog-heading-wrapper">
        <h2 class="silver"><perch:blog id="postTitle" /></h2>
        <h4 class="silver"><perch:blog id="postDateTime" format="d M Y" /></h4>
        </div>
        <div class="extract">
        <p><perch:blog id="postExtract" /></p>
        </div><a href="<perch:blog id="postURL" />" class="button w-button">read more </a>
      </div>
  </div>

<perch:after>
</div>
</perch:after>

SUMMARY

Summary information

Perch: 3.0.11, PHP: 7.1.1, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: b396954eeb2d1d9ed7902b8bae237b287f21ad9e $, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (3.0.11), assets (3.0.11), categories (3.0.11), perch_blog (5.6.1), chirp_seo (1.1)
App runtimes: <?php $apps_list = array( 'content', 'perch_blog', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /Applications/MAMP/htdocs/perch
PERCH_CORE: /Applications/MAMP/htdocs/perch/core
PERCH_RESFILEPATH: /Applications/MAMP/htdocs/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M
F1: 3b606135b33e6a102526838f4152a807
Resource folder writeable: Yes
HTTP_HOST: localhost:8888
DOCUMENT_ROOT: /Applications/MAMP/htdocs
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php