title: Ionic Angularjs: dynamic styling on cards
body: <p><strong>Context</strong>:</p>
  
  <p>I have cards that will be overlaid on a grid system to represent a time shift. The top part of the grid will pertain to certain time frames ( 1 pm 2 pm 3 pm etc. ) and the side will pertain to the people assigned to the shift. The cards normal state is just with a green top border. However when the person is on a break, I'd like for it to be blue, and when the person has been over scheduled, i'd like for it to be red.</p>
  
  <p>I have to check the different break times and criteria to dynamically place the blue and red sections of the card.</p>
  
  <p><strong>What I've tried</strong>:</p>
  
  <p>I've experimented with creating separate cards for each situation and stitching them together, but its not working cleanly. It is done using flex css. </p>
  
  <p>I'd like to be able to just dynamically change only part of the card to the desired colors instead of stitching them together just because its seems more intuitive to me but I can't seem to search the right thing on google if it even exists.</p>
  
  <p>The general question is what is the best way to go about this? </p>
  
  <p><strong>EDIT</strong>:
  The final product would look like this.
  <a href="https://i.stack.imgur.com/sCQBB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sCQBB.png" alt="enter image description here"></a></p>