<!-- Default -->
<h2 class="label">Activity Box</h2>

<div class="activity-box ">
    <div class="icon"><img src="../../images/Blk-Plus.png" /></div>
    <div class="instructions">
        <h2>Instructions</h2>
        <p>Make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some
            more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch. We need more
            images of groups of people having non-specific types of fun. We have big contacts we will promote you I really like the colour but can you change it, and can you make it pop.</p>
    </div>
</div>

<!-- Coloured -->
<h2 class="label">Coloured Activity Box</h2>

<div class="activity-box csu-success">
    <div class="icon"><img src="../../images/Rev-Down.png" /></div>
    <div class="instructions">
        <h2>Instructions</h2>
        <p>Make it high quality and please use html can you make the font a bit bigger and change it to times new roman? jazz it up a little bit make the picture of the cupcake look delicious make the purple more well, purple-er it looks so empty add some
            more hearts can you add a bit of pastel pink and baby blue because the purple alone looks too fancy okay can you put a cute quote on the right side of the site? oh no it looks messed up! i think we need to start from scratch. We need more
            images of groups of people having non-specific types of fun. We have big contacts we will promote you I really like the colour but can you change it, and can you make it pop.</p>
    </div>
</div>

<!-- Coloured -->
<h2 class="label">Action Box</h2>

<div class="action-box csu-warning csu-rev-blk">
    <div class="icon"><img src="../../images/Blk-Question.png" /></div>
    <div class="instructions">
        <h2>Instructions</h2>
        <p>Make it high quality and please use html can you make the font a bit bigger and change it to times new roman?</p>
    </div>
</div>

<!-- Coloured -->
<h2 class="label">Coloured Activity Box</h2>

<div class="action-box csu-primary">
    <div class="icon"><img src="../../images/Rev-Warning.png" /></div>
    <div class="instructions">
        <h2>Instructions</h2>
        <p>Make it high quality and please use html can you make the font a bit bigger and change it to times new roman?</p>
    </div>
</div>

<h2 class="label">{{ modifier }}</h2>

<div class="{{ type }}-box {{ colour }}">
  <div class="icon"><img src="{{path icon }}" /></div>
  <div class="instructions">
    <h2>Instructions</h2>
    <p>{{ text }}</p>
  </div>
</div>

Actions and Activites can be applied to container <div> tags. By wrapping the image in a <div class="icon"> it automatically sizes the image correctly and the same with the text by wrapping it in a <div class="instructions">