An internal content hub as part of a change program to agile ways of operating in Wealth and Personal Banking, HSBC UK.
Scroll down for HTML source code.
HTML source code:
<pre class="wp-block-syntaxhighlighter-code"><style>
@font-face {
font-family: 'HSBCRg';
src: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/UniversNextforHSBCW02-Rg.woff") format("woff")
}
@font-face {
font-family: 'HSBCLt';
src: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/UniversNextforHSBCW02-Lt.woff") format("woff")
}
#wrapper {
display: flex;
margin-top:5%;
font-family: 'HSBCRg';
flex-shrink: 0
}
#left {
flex: 0 0 60%;
}
.main-content-header {
font-size: 20px;
font-family: 'HSBCRg';
}
.news-main-header{
font-size:30px;
color:#444;
font-family: 'HSBCRg';
}
.news-content-header{
font-size:20px;
color:#444;
font-family: 'HSBCRg';
}
.blog-header{
font-size:22px;
color:#444;
font-family: 'HSBCRg';
}
.blog-content{
font-size:16px;
color:#444;
font-family: 'HSBCRg';
}
.main-contents {
font-size: 18px;
font-family: 'HSBCLt';
padding-left: 23px;
}
.font-class-rg {
font-size: 18px;
font-family: 'HSBCRg';
}
.news-reel-heading{
font-size: 22px;
font-family: 'HSBCLt';
}
#right {
flex: 0.75;
}
.vl {
border-left: 6px solid red;
height: 100px;
}
#left_card{
flex: 0 0 60%;
}
#right_card{
flex: 0.75;
}
#news-row{
height: 165px !important;
}
</style>
<link href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/css/materialize.css" rel="stylesheet" type="text/css"/>
<a href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/blog-home-vue.js">https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/blog-home-vue.js</a>
<a href="https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/vue.js">https://team.global.hsbc/sites/AgileWPB/SiteAssets/js/vue.js</a>
<style>
td,th{
vertical-align: top !important;
}
</style>
<div id="wrapper">
<div id="left" style="margin-left:5%">
<p class="font-class" style="width:80%; margin-left:2%;font-size:18px;line-height:25px">Welcome to your WPB Agile Ways of Operating (WOO) site! Your go-to place for everything agile ways of
operating - as such it's truly agile with regular updates based on what you need, so you can expect to see new content and features
added including new learning tools, additional resources and stories of our colleagues working in this way.</p>
<body>
<a onclick="TMS.trackEvent({'page_url' : '/agile/home','page_name':'staff portal:agile:home','event_category':'video','event_action':'play','event_content':'charlie nun introduces'})"
href="https://players.brightcove.net/1496514754001/default_default/index.html?videoId=6186109861001">
<img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Video%20stills/Agile-ways-of-operating-the-case-for-change-cover-image.png" alt="Video animation about the agie case for change" width="830"
height="500"></a>
</body>
<div style="width:80%; margin-left:2%; margin-top:6%;font-size:18px;line-height:25px">
<p class="font-class">Exciting changes are being made across Wealth and Personal Banking (WPB) to help build a
culture of business agility which enables us to provide our customers with the best products
and services, and build a bank fit for the future.To make this happen we’re starting to
implement new agile ways of operating, removing barriers and allowing teams to work together
differently in the following ways:</p>
<br/>
<ul>
<li>
<p class="main-content-header"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/greentick.svg" /> Collective customer obsessed delivery</p>
<p class="main-contents" >Bringing together people in small cross-functional teams, working towards a series of collective customer outcomes.</p>
</li>
<li>
<p class="main-content-header"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/greentick.svg" /> Empowerment with accountability</p>
<p class="main-contents" >Empowering teams with new tools based on agile work practices, and providing greater
autonomy to operate and make decisions within guidelines.</p>
</li>
<li>
<p class="main-content-header"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/greentick.svg" /> Simplification</p>
<p class="main-contents">Accelerating and improving our investment processes with greater clarity on
strategic direction, deliverables, timing, funding and resourcing.</p>
</li>
</ul>
<br/>
<p class="font-class">Changing our culture and the way we work takes time – but we’re committed to supporting
everyone to do it by regularly communicating, providing learning opportunities, measuring
performance in a new way and changing our governance where required.</p>
<p class="font-class">Please use this site as the ‘go to’ place for information and updates on our new ways of
operating, the value stream model and to see how business agility is already helping us make
improvements for our customers.</p>
</div>
<body>
<a href="https://players.brightcove.net/1496514754001/default_default/index.html?videoId=6209573875001"><img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Video%20stills/Stories-from-Hong-Kong-video-cover-image.png" alt="Hong Kong learnings from agile" width="830"
height="500"></a>
</body>
</div>
<div id="right">
<div id="blog-container" style="flex: 0.65;">
<div id="app-blog" style="padding-bottom:20px !important">
<h1 class="news-main-header" >The latest in agile</h1>
<h3 class="news-content-header" >WOO news and stories around WPB</h3>
<br>
<br>
<div id="blogs-list-container">
<div v-for="item in blogItems" v-if="item.Status != 'Draft'" class="blog-item">
<a v-bind:href="item.URL" class="blog-link" target="_blank">
<p class="blog-header" style="color:rgba(0,0,0,0.75)!important;" v-on:click="TMS.trackEvent({'event_content' : item.Title})">{{ item.Title }}</p>
<p class="blog-content">{{ $(item.Summary).text()}}</p>
<br>
<br>
<p class="blog-detail">{{ item.ddate }} - {{ item.ReadingTime }} mins read</p>
</a>
</div>
<a style="background-color:#ff0000; color:white; width: 70%; margin-left: 12%" class="btn btn-secondary btn-block downloadGuide"
href="https://team.global.hsbc/sites/AgileWPB/blogfeature/default.aspx" target="_blank">Read more</a>
</div>
</div>
</div>
<div id="blog-container" style="flex: 0.75;padding-left:0px !important; padding-right:0px !important">
<div id="news-row" class="row" style=" border: 0px !important;background-color: inherit !important">
<div class="col s6 news-thumbnail" style="background-image: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/contactcard_icon.svg"); border-left:6px solid #db0011 !important; width:155px">
</div>
<div class="col s6" >
<p class="main-content-header" style="font-size:16px !important;" >Questions, suggestions and feedback most welcome</p>
<p class="main-content-header" style=" font-size:16px !important">
<a href="mailto:wpbagilewaysofoperating@hsbc.com?subject=WPB Agile WOO: Questions, suggestions and feedback">
<span style="font-size: 10pt; ">Drop us a line
<img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/Chevron%20right%20thick.svg"/>
</span></a></p>
</div></div></div>
<div id="blog-container" style="flex: 0.75;padding-left:0px !important; padding-right:0px !important">
<div id="news-row" class="row" style=" border: 0px !important;background-color: inherit !important">
<div class="col s6 news-thumbnail" style="background-image: url("https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/ask_expert_icon.svg"); border-left:6px solid #db0011 !important; width:169px">
</div>
<div class="col s6" >
<p class="main-content-header" style="font-size:16px !important" >Ask the experts</p>
<p class="main-content-header" style=" font-size:16px !important">
<a href="mailto:wpbagilewaysofoperating@hsbc.com?subject=WPB Agile WOO: Ask the Experts"> <span style="font-size: 10pt; ">Get in touch
<img src="https://team.global.hsbc/sites/AgileWPB/SiteAssets/Home/Chevron%20right%20thick.svg"/>
</span></a></p>
</div></div></div>
</div> </div> </div></pre>
James Banham's content portfolio 