preview.html in Open Social 8.3
File
themes/socialblue/color/preview.html
View source
<div class="color-preview">
<div class="color-preview-header">
<nav class="navbar navbar-default" role="banner">
<div class="container container--navbar">
<div class="block-system-branding-block navbar-header">
<a class="navbar-brand" href="/" title="Home" rel="home">
<img src="/profiles/contrib/social/themes/socialblue/logo.svg" alt="Open Social" />
</a>
<a href="#" data-toggle="collapse" data-target="#main-navigation" type="button" aria-expanded="false" class="navbar-toggle collapsed">
<span>Menu</span>
</a>
</div>
<div id="main-navigation" class="collapse navbar-collapse">
<ul class="menu nav navbar-nav">
<li>
<a href="/" class="is-active">Home</a>
</li>
<li class="expanded dropdown">
<a href="" class="dropdown-toggle">Explore <span class="caret"></span></a>
</li>
<li>
<a href="/" class="dropdown-toggle">Tellus</a>
</li>
<li>
<a href="/"><span class="navbar-nav__icon">T2</span>
<span class="badge badge-accent badge--pill">4</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="color-preview-hero region--hero container">
<div class="cover">
<div class="cover-wrap">
<h1 class="page-title">A page title</h1>
<div class="hero-footer">
<div class="hero-footer__text">
<div class="switch">
<div class="switch__label">
Show background image
<span class="lever"></span>
</div>
</div>
</div>
<div class="hero-footer__cta">
<a href="#" class="btn btn-accent btn-raised btn-btn-lg">
Accent button
</a>
</div>
</div>
</div>
</div>
</div>
<div class="color-preview-secondary region--secondary-navigation">
<nav class="navbar navbar-secondary">
<div class="navbar-scrollable">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Mollis</a></li>
<li><a href="#">Tellus</a></li>
<li><a href="#">Vestibulum Cursus</a></li>
<li><a href="#">Tortor</a></li>
<li><a href="#">Sollicitudin</a></li>
<li><a href="#">Fringilla</a></li>
</ul>
</div>
</nav>
</div>
<div class="color-preview-main row container with-title-region layout--with-complementary">
<aside class="region--complementary">
<section class="card card--list">
<h4 class="card__title"> A card title</h4>
<div class="small card__block">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</div>
<footer class="card__actionbar">
<a href="#" class="btn btn-flat"> Card link in primary color </a>
</footer>
</section>
<section class="card card--list">
<h4 class="card__title"> A card title</h4>
<div class="card__block">
<div class="card__text"><a href="#">Cursus Consectetur Ultricies</a></div>
<div class="card__text">
<small class="text-muted">
5 Dec 11:00 - 12:30 <span class="badge badge-secondary">Ornare</span>
</small>
</div>
</div>
<footer class="card__actionbar">
<a href="#" class="btn btn-flat"> Card link in primary color </a>
</footer>
</section>
</aside>
<div class="region--content">
<ul class="stream">
<li class="stream-item">
<i class="stream-icon stream-icon-new"></i>
<div class="card card--stream">
<div class="card__block">
<div class="media">
<div class="media-left avatar hidden-for-phone-only">
<img src="/profiles/contrib/social/themes/socialblue/os-builder/kss-assets/avatar-2.jpg" width="44" height="44" class="img-responsive">
</div>
<div class="media-body">
<div class="form--post-create">
<div class="field--name-field-post form-group form-wrapper">
<div class="form-control form-control--autogrow"></div>
</div>
<div class="field--name-field-post-image">
<a href="#" class="btn btn-default">Default button</a>
</div>
<a href="#" class="btn btn-primary">Primary button</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="stream-item">
<i class="stream-icon"></i>
<div class="card card--stream">
<div class="card__block">
<p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque <a href="#">penatibus et magnis</a> dis parturient montes, nascetur ridiculus mus.</p>
<div class="card__nested-section">
<div class="comment comment-form__wrapper">
<div class="comment__avatar">
<div class="avatar">
<img src="/profiles/contrib/social/themes/socialblue/os-builder/kss-assets/avatar-1.jpg" width="44" height="44" class="img-responsive">
</div>
</div>
<div class="comment__content">
<div class="form-group-inline">
<div class="form-group media-body">
<div class="form-control"></div>
</div>
<div class="form-group">
<a href="#" class="btn btn-flat">Comment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="stream-item">
<i class="stream-icon"></i>
<div class="card card--stream teaser">
<div class="teaser__image">
<a href="#">
<img src="/profiles/contrib/social/themes/socialblue/os-builder/kss-assets/teaser-1.jpg" alt="" class="img-responsive">
</a>
</div>
<div class="teaser__body">
<div class="teaser__content">
<h4 class="teaser__title"> <a href="#">Teaser title</a></h4>
<div class="teaser__content-line">
<div class="teaser__content-text">
<div class="teaser__published">
<div class="teaser__published-date"> 29 Jan 2022 • </div>
<div class="teaser__published-author">
<a title="View user profile." href="#">Ullamcorper Inceptos</a>
</div>
</div>
</div>
</div>
<div class="teaser__content-line">
<div class="teaser__content-text">Pharetra Tristique</div>
</div>
<div class="teaser__content-line">
<div class="teaser__content-text">Mollis Quam Fusce</div>
</div>
</div>
<div class="card__actionbar">
<a href="#" class="badge badge--pill badge-default teaser__badge">
<span class="badge__container">
<span class="badge__label">Quam</span>
</span>
</a>
<a href="#" class="card__link">Read more</a>
</div>
</div>
</div>
</li>
</ul>
<h4 class="section-title">Nullam id dolor id nibh ultricies vehicula ut id elit.</h4>
<article class="card">
<div class="card__body">
<div class="body-text clearfix">
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, <a href="#">a pharetra augue</a>. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.</p>
<h3>Nullam quis risus eget urna mollis ornare vel eu leo.</h3>
<p>Duis mollis, est non <a href="#">commodo luctus</a>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <strong>Aenean eu leo quam</strong>. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius <em>blandit sit amet non magna</em>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<h4>Ridiculus Sem</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</article>
</div>
</div>
<div class="site-footer">
<div class="container row">
<ul class="nav navbar-nav">
<li><a href="#">Pharetra Sem</a></li>
<li><a href="#">Malesuada</a></li>
<li><a href="#">Porta</a></li>
</ul>
</div>
</div>
</div>
