<div id="context" class="card">
  <div class="description">
    <div class="title">Context</div>
    <p>
      Observe events or properties that provide context for this run.
    </p>
  </div>
  <div class="result">
    <div class="emoji"></div>
    <div class="label"></div>
  </div>
</div>
<div id="action" class="card">
  <div class="description">
    <div class="title">Action</div>
    <p>
      Decide properties that affect the behavior or experience in this run.
    </p>
  </div>
  <div class="result">
    <div class="hello hidden">Hello World!</div>
  </div>
</div>
<div id="outcome" class="card">
  <div class="description">
    <div class="title">Outcome</div>
    <p>
      Observe events or properties used to measure success in this run.
    </p>
  </div>
  <div class="result">
    <div class="emoji"></div>
    <div class="label"></div>
  </div>
</div>
$width: 440px;

*{
  box-sizing:border-box;
  font-family: "San Francisco", "Helvetica Neue", "Roboto", "Sans-Serif";
  font-weight:300;
}
html, body{
  margin:0;
  padding:0;
}
.card{
  display:flex;
  border:.01em solid #777;
  border-left-width:12px;
  border-left-color:rgb(181,139,75);
  margin:10px;
  padding:10px;
  height:145px;
  width:$width;
  align-items:center;
  
  &:nth-child(1){
    border-left-color:tan;
  }
  &:nth-child(2){
    border-left-color:orange;
  }
  &:nth-child(3){
    border-left-color:rgb(56,160,112);
  }
  .description{
    width:60%;
    overflow-x:wrap;
    
    .title{
      font-weight:500;
    }
    p{
      font-size:15px;
    }
  }
  .result{
    width:40%;
    text-align:center;
    
    .emoji{
      font-size:70px;
    }
    .label{
      font-size:16px;
    }
    .hello{
      font-size:50px;

      &.hidden{
        display: none;
      }      
      &.regular{
        color: black;
      }
      &.fun{
        color:lime;
        font-weight:bold;
        font-family:"Rock Salt";
        font-size:30px;
      }
      &.classic{
        color:#36a;
        font-family:"Times New Roman";
      }
    }
  }
}
// Observe Context: UserType
userType = ["child", "adult"][Math.round(Math.random())];
amp.observe("UserType", {userType: userType});

// Decide Action: TextStyle
helloStyle = amp.decide("TextStyle", {
  textStyle: ["regular", "fun", "classic"] 
}).textStyle;  
document.querySelector(".hello").className = 
  "hello " + helloStyle;

// Observe Outcome: UserHappy
if (happy()) amp.observe("UserHappy");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/scaled-inference/pen/dJqEXY
  2. https://amp.ai/libs/c6e15d2e5697a4d8.js
  3. https://codepen.io/scaled-inference/pen/PEdvWj