SVA Layout

by Kevin McIsaac

HTML

<div class="grid-container">
  <div class="header">
    <H1 id="UseCase">Use Case</H1>
    <H2 id="Driver"></H2>
  </div>
  <div class="left-col"> 
    <H3>Annual Value</H3>
    <P id="AnnualValue"></P>
    <H3>Contact</H3>
    <P id="Contact"></P>
    <H3>Business Strategy</H3>
    <P id="BusinessStrategy"></P>
    <H3>Value Category</H3>
    <P id="ValueCategory"></P>
    <H3>Revenue Gains</H3>
    <P id="RevenueGains"></P>
    <H3>Users</H3>
    <P id="Users"></P>
    <H3>Implementation Days</H3>
    <P id="Days"></P>
    
  </div>
  <div class="right-col">
    <H3>Problem</H3>
    <P  id="Problem"></P>
    <H3>Solution</H3>
    <P  id="Solution"></P>
    <H3>Actions</H3>
    <P id="Actions"></P>
    <H3>Model</H3>
    
<table id="Model" >
  <col width="80%">
  <col width="20%">

  <tr>
    <th>Item</th>
    <th>Value</th> 

  </tr>
  
</table>
    </div>  
</div>

CSS

.header    { grid-area: header; background-color: #99CBEC; }
.left-col  { grid-area: left-col;   background-color: #636363;}
.right-col { grid-area: right-col;  background-color: white}

body { font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; text-align: left;  margin:0 }
H1 { font-weight: 700; font-size: 26px;  text-align: center; color: white;  padding: 0px; margin: 0px;}
H2 { font-weight: 300; font-size: 20px;  text-align: center; color: white; padding: 0px; margin: 0px;}
H3 { font-weight: 600; font-size: 18px;  color: #99CBEC; padding: 0px; margin: 0px;}
P  {padding: 0px; margin: 0px; margin-bottom:1em}

.left-col H3 { font-weight: 500; font-size: 16px;  text-align: left; color: #AFB1B2;}
.left-col P  { color: white; ;}
div.left-col {height:100vh;}
.grid-container {
  display: grid;
  grid-template-columns: 200px minmax(400px, auto);

  grid-template-areas:
    'header  header'
    'left-col  right-col'
    ;
   padding: 0px; 
}
.grid-container > div { padding: 20px; }

table {
    border-collapse: collapse;
    font-family: "Open Sans", sans-serif; 
}

th, td {
    padding: 6px 0 0 0;
    border-bottom: 1px solid #ddd;
}

JavaScript

$("#UseCase").text("Use Case");
$("#Driver").text("Driver");
$("#AnnualValue").text("Annual Value");
$("#Contact").text("Contact");
$("#BusinessStrategy").text("Business Strategy");
$("#ValueCategory").text("Value Category");
$("#RevenueGains").text("Revenue Gains");
$("#Users").text("Users");
$("#Days").text("Days");
$("#Problem").text("Problem");
$("#Solution").text("Solution");
$("#Actions").text("Actions");
$('#Model tbody').append('<tr><td>Item</td><td>Value</td></tr>');
$('#Model tbody').append('<tr><td>Item</td><td>Value</td></tr>');