"Left Sideways Panel Header"
Bootstrap 3.2.0 Snippet by khdouglas

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="page-header"> <h1>The Cube - User Guide</h1> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-default"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">What is The Cube?</h3> </div> <div class="panel-rightbody"> <p>The Cube is an "on-floor" secretarial support service for Fee-earners.</p> <p>This allows fee-earners to request work such as document production, photocopying, binding and assistance. </p> <p>This guide shows those providing such services how to access and complete the required work. To open the Cube, type http://servicenow into the address bar within Internet Explorer.</p> </div> <div class="clearfix"> </div> </div> <div class="panel panel-primary"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Receiving a job </h3> </div> <div class="panel-rightbody"> <b>How ServiceNow Works</b> <p>New jobs will be received into the system by the Fee-earners emailing The Cube:</p> <p>thecubelondon@addleshawgoddard.com thecubeleeds@addleshawgoddard.com thecubemanchester@addleshawgoddard.com</p> <p>New jobs are received into the Unaccepted/Unassigned Queue, accessing this list will show all new jobs. </p> <b>To do this:</b> <p>Go to The Cube within ServiceNow and select Unaccepted/Unassigned</p> </div> <div class="clearfix"> </div> </div> <div class="panel panel-success"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Assigning a job</h3> </div> <div class="panel-rightbody"> <p>Assigning a job is the way of taking ownership of a job</p> <b>To do this</b> <p>1. Go to <b>The Cube</b> within ServiceNow and select Unaccepted/Unassigned<br> 2. Click on the <b>Job Number</b>, this will open the job<br> 3. Select the <b>Assignment Group</b> (three options available Cube London, Cube Leeds and the Cube Manchester)<br> 4. Populate the <b>Assigned to field</b>, this is the name of the individual who will be responsible for completion of the job </p> </div> <div class="clearfix"> </div> </div> <div class="panel panel-info"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Task & Subtasks</h3> </div> <div class="panel-rightbody"> <p>Tasks and Subtasks are used to define the type of job that is required, this information is contained on the Call Profile tab. The subtasks types are also driven from the task type selected.</p> <b>This is how you would select a Task and Subtask</b> <p> Task: Click into the Task type field and start typing (you will receive a prompt for the types available) or click on to see all the options available. Select the option required from the list.</p> <p> Subtask: Click into the Subtask type field and start typing (you will receive a prompt for the types available) or click on to see all the options available. Click the option required from the list.</p> </div> <div class="clearfix"> </div> </div> <div class="panel panel-warning"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Deadlines / SLAs</h3> </div> <div class="panel-rightbody"> <p>The deadline to complete work should be on the timescale provided by the Caller / Requestor i.e., urgent, within the hour, by [time]. If a request is classed as non-urgent or routine then the Caller / Requestor should choose a reasonable timescale e.g., within 4 hours where possible</p> <b>To set a deadline / SLA: </b> <p> Click on the next to the SLA due date, populate as required</p> </div> <div class="clearfix"> </div> </div> <div class="panel panel-danger"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Office Services</h3> </div> <div class="panel-rightbody"> <p>Office Services can be engaged to help with the completion of some jobs, for example, Copying > Over 500 pages</p> <b>To do this:</b> <p> From within the Job, click on the button Pass to Office Services, this create a new job. Each job has a number starting with BS, followed by seven numbers. The job will be placed in your name allowing you to receive the updates from Office Services relating to the job.</p> <p>This will auto-populate the Facilities fields on The Cube job with the number of the related Office Services record.</p> </div> <div class="clearfix"> </div> </div> </div> </div>
.panel { position: relative; } .panel-default > .panel-leftheading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-primary > .panel-leftheading { color: #fff; background-color: #428bca; border-color: #428bca; } .panel-success > .panel-leftheading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .panel-info > .panel-leftheading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .panel-warning > .panel-leftheading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .panel-danger > .panel-leftheading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .panel-leftheading { width: 42px; padding: 10px 15px; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; float: left; height: 100%; position: absolute; } .panel-lefttitle { margin-top: 0; margin-bottom: 0; margin-left: 15px; font-size: 16px; color: inherit; -webkit-transform: rotate(90deg); -webkit-transform-origin: left top; -moz-transform: rotate(90deg); -moz-transform-origin: left top; -ms-transform: rotate(90deg); -ms-transform-origin: left top; -o-transform: rotate(90deg); -o-transform-origin: left top; transform: rotate(90deg); transform-origin: left top; position: absolute; white-space: nowrap; } .panel-rightbody { float: left; margin-left: 45px; padding: 15px; }

Related: See More


Questions / Comments: