Commit b97709ad authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Test typical sample EBI patterns

parent 0ef897fe
Pipeline #4829 passed with stage
in 1 minute and 37 seconds
......@@ -5,7 +5,7 @@ This is a short-term tactical solution to implement the beta EMBL look and feel
This is under active development, but here are useful links
- Demo page: https://master-branch-embl-visual-framework-layer-grp-stratcom.surge.sh
- CSS: https://master-branch-embl-visual-framework-layer-grp-stratcom.surge.sh/css/style.css
- CSS: https://master-branch-embl-visual-framework-layer-grp-stratcom.surge.sh/css/theme-embl.css
---
......
......@@ -194,10 +194,111 @@
</ul>
</nav>
<div class="columns">
<div class="columns medium-8 medium-pull-4">
<section>
<h2>[page-title]</h2>
<p>Your content</p>
<h2>Testing integration</h2>
<p>With some typical EMBL-EBI patterns <a href="https://www.ebi.ac.uk/style-lab/websites/patterns/banner-data-protection.html">from the Style Lab</a>.</p>
</section>
<section>
<!--
https://www.ebi.ac.uk/style-lab/websites/patterns/banner-data-protection.html
-->
<div id="data-protection-message-configuration" data-message="I'm a sample EMBL page! <a class='white-color' href='#test'>Read the non-existent privacy policy nowher</a>." data-service-id="EMBL-test" data-data-protection-version="0.1"></div>
</section>
<section>
<!--
https://www.ebi.ac.uk/style-lab/websites/patterns/image-highlight-captions.html
-->
<h3>Image overlays</h3>
As a simple overlay, just add `.highlight-caption` to an `a` tag.
<div class="row">
<div class="column medium-3">
<a href="#">
<img src="//www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/Events/all-at-ebi_stepping_down_EBI.jpg" alt="Staff outside Hindton Hall.">
</a>
<a href="#" class="highlight-caption readmore">Jobs &amp; Careers</a>
</div>
</div>
Or for a bigger and possibly multi-line label, add `.highlight-caption.highlight-caption-big` to an `a` tag, and to the parent `div` add `.position-relative`.
<div class="row">
<div class="position-relative medium-5">
<a href="#" class="block no-underline" style="background: url('http://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/ultra-wide_16_9/public/groups/external_relations/images/wide-imagery/Bioimaging_EMBL-EBI_780x400.jpg?itok=C5S818p3');height: 350px; background-size: cover;"></a>
<div class="highlight-caption highlight-caption-big">
<span class="label white-color">News</span>
|
<span class="label white-color">13 Jun 2017</span>
<h3><a href="#" class="white-color no-underline clearfix">
Open imaging data for biology <br/> on two lines
</a></h3>
</div>
</div>
</div>
</section>
<section>
<!--
https://www.ebi.ac.uk/style-lab/websites/patterns/images.html
-->
<h3>Image captions</h3>
<h4>Using semantic figures with figcaptions</h4>
<figure class="image float-right">
<img src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/wide-imagery/Bitcoin_challenge_credit_WUYTS_Sander_v_EMBL-EBI_780x400.jpg" alt="Alt text." title="Title here." width="350">
<figcaption>A fixed <code>figure.image > figcaption</code>. Not responsive, but we only need set the image's width attribute.</figcaption>
</figure>
<p>“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”</p>
<p>“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”</p>
<div class="columns float-right medium-5">
<figure class="image"><img alt="Why are PDX models important in cancer research? How can standards make them even more useful? Why should users get involved? Terry Meehan of EMBL-EBI explains." src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/wide-imagery/Bitcoin_challenge_credit_WUYTS_Sander_v_EMBL-EBI_780x400.jpg" width="" class="">
<figcaption class="">A responsive <code>figure > figcaption</code> wrapped in a <code>div.columns.float-right.medium-5</code></figcaption>
</figure>
</div>
<p>“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”</p>
<p>“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”</p>
<h4>Legacy class-based captions</h4>
<div class="medium-5 float-right margin-left-large">
<img src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/wide-imagery/Bitcoin_challenge_credit_WUYTS_Sander_v_EMBL-EBI_780x400.jpg" alt="Alt text." title="Title here.">
<p class="caption">A simple legacy `.caption`. Note this is also wrapped in a `div.medium-5.float-right.margin-left-large`.</p>
</div>
</section>
<section>
<h3>Pull quotes</h3>
<!--
https://www.ebi.ac.uk/style-lab/websites/patterns/pullquotes.html
-->
<blockquote class="">
A pretty basic thing to say: I once was a child.
</blockquote>
<p>You can enhance it by adding class <code>.lead</code> and the size will grow and the line drop:</p>
<blockquote class="lead">
A slightly more interesting thing to say: I once was a squirrel.
</blockquote>
<p>And for added emphasis you can add a left quotation mark with <code>.quote</code>, and even a splash of colour:</p>
<blockquote class="lead quote industry-color">
You can't be friends with a squirrel! A squirrel is just a rat with a cuter outfit. <cite>Sarah Jessica Parker</cite>
</blockquote>
</section>
<section>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment