WOL 2 styleguide

Developer
Stuart Allen
Size
38,783 Kb
Views
6,072
  1. WOL 2 styleguide Previews
  2. WOL 2 styleguide HTML Codes
  3. WOL 2 styleguide CSS Codes
  4. WOL 2 styleguide JS Codes

How do I make an wol 2 styleguide?

What is a wol 2 styleguide? How do you make a wol 2 styleguide? This script and codes were developed by Stuart Allen on 29 November 2022, Tuesday.

WOL 2 styleguide Previews
IQ Test

WOL 2 styleguide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WOL 2 styleguide</title> <link rel='stylesheet prefetch' href='css/pgpyym.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img src="https://cdn.jsdelivr.net/open-iconic/1.1.0/sprite/open-iconic.min.svg" class="iconic-sprite" id="ow-ui-icon-sprite" style="display:none;" />
<body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#intro" class="navbar-brand">WOL 2 <small>Styleguide</small></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Navigation <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">Basic elements</li> <li><a href="#colors">Colors</a></li> <li><a href="#iconography">Iconography</a></li> <li><a href="#typography">Typography</a></li> <li><a href="#buttons">Buttons</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#forms">Forms</a></li> <li><a href="#navs">Navs</a></li> <li><a href="#indicators">Indicators</a></li> <li><a href="#progress">Progress</a></li> <li><a href="#containers">Containers</a></li> <li><a href="#dialogs">Dialogs</a></li> <li class="dropdown-header">Example components</li> <li><a href="#feature-buttons">Feature Buttons</a></li> <li><a href="#feature-cards">Feature Cards</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </div> <div class="container"> <!-- Help ================================================== --> <h1 id="intro">WOL 2 <small>Styleguide</small></h1> <p class="lead">Welcome to the <a href="https://codepen.io/rarebush/full/zqwyje/" target="_blank"><strong>Wiley Online Library v.2 Styleguide</strong></a>. A tool to help produce designs for all WOL 2 products. This includes Anywhere Article, Hubs, or anything else that comes under the Wiley Online Library domain.</p> <hr class="hr-dotted hr-dotted--purple"> <p>The styles use a customised <a href="https://getbootstrap.com/"><strong>Bootstrap</strong></a> theme to do most of the heavy lifting. The Bootstrap CSS is then cascaded through further style rules to enhance and increase the amount of elements, as well as bring them further inline with the Wiley brand.</p> <p><strong>Some of the elements included:</strong></p> <ul> <li>Simple global navigation bars</li> <li>Buttons</li> <li>Typography</li> <li>Tables</li> <li>Forms</li> <li>Navigation tabs and pills</li> <li>Indicators</li> <li>Progress bars</li> <li>Containers</li> <li>Dialogs</li> </ul> <div class="callout callout--info"> <h5>UI developers</h5> <p>Please be aware that the HTML and CSS markup in this document is for demonstration purposes only. Although it is technically usable, development teams can differ in their methods and may wish to implement the designs differently, <b>or even omit Bootstrap entirely</b>.</p> </div> <div class="callout callout--info"> <h5>Contact</h5> <p>If you have any questions about this styleguide, please contact Stuart Allen at <a href="mailto:[email protected]?Subject=WOL%202%20Styleguide" target="_top"><strong>[email protected]</strong></a></p> </div> <!-- colors ================================================== --> <div id="colors" class="clearfix"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Colors</h1> </div> <p>Depending on the particular WOL 2 products, the <i>Brand</i> color can be chosen from any of the <a href="https://onewiley.github.io/toolkit.html#03-colors"><strong>Wiley brand approved colors</strong></a>. Here, in this guide, we use Purple.</p> <p><strong>However, 4 of these colors are reserved to indicate status to the user and <u>should not be used to brand the site</u>; these colours are:</strong></p> <div class="wol2-example wol2-example__colors"> <span style="background-color: #92CB9C; color: #295631">Success | Green | #92CB9C</span> <span style="background-color: #648FD8; color: #13284C">Information | Blue | #648FD8</span> <span style="background-color: #F2BA49; color: #6B4A08">Warning | Orange-light | #F2BA49</span> <span style="background-color: #D22938; color: #FCEEEF">Danger | Red-light | #D22938</span> </div> <div class="callout callout--warning"> <h5>Accessibility</h5> <p>Not all colours in the One Wiley Brand Guidelines were chosen equally, some offer better contrast than others. In fact, some of the colours used above to communicate status do not meet the criteria required for WCAG AA compliance <i>easily</i> - the standard all Wiley Products should strive for in their designs. <b>Please check the One Wiley UI Styleguide for all colour values and links to their accessibility scores <a href="https://onewiley.github.io/toolkit.html#03-colors">here</a></b>.</p> <p>To sufficiently contrast with the status colours above, I have picked complimentary colours that you will see applied to colour blocks and <a href="#callouts">'callouts'</a> (like this one).</p> <p>The same treatment should be applied to 'buttons' which you will see later on, although I strongly believe when buttons are seen alongside eachother (cancel, okay, submit, etc.), if the typography is not of a consistant colour, it can look messy. This may need to be looked into further. Perhaps new colours should be picked for status elements.</p> <p>Bootstrap deliberately lowers the brightness of light colours when using them for <a href="#emphasis-classes">'Emphasis classes'</a> (found below in this document). Agreeing on tints of colours without white or black contrasts would be a solution</p> </div> </div> </div> </div> <!-- iconography ================================================== --> <div id="iconography" class="clearfix"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Iconography</h1> </div> <p>In this document, <strong>Icons</strong> are handled using an SVG sprite that is injected into the DOM. This avoids the security issue of trying to access assets stored on another domain. The sprite is then accessed on demand via SVG <code>use</code> elements and <code>xlink:href</code> attributes.</p> <p>It is strongly recommended that you contact Stuart Allen at <a href="mailto:[email protected]?Subject=WOL%202%20Styleguide" target="_top"><strong>[email protected]</strong></a> to discuss how you would like to implement the One Wiley <i>UI</i> & <i>Illustrative</i> icon sets.</p> <button class="btn btn-default btn-lg center-block" id="show-icons">Show Icon Preview</button> <div id="ow-ui-icon-list"></div> </div> </div> </div> <!-- Typography ================================================== --> <div id="typography" class=""> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Typography</h1> </div> </div> </div> <!-- Headings --> <div class="row"> <div class="col-lg-4"> <div> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> </div> <div class="col-lg-4"> <div> <h2>Example body text</h2> <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>The following snippet of text is <code>rendered as code</code>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> </div> </div> <div class="col-lg-4"> <div> <h2 id="emphasis-classes">Emphasis classes</h2> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> </div> <!-- Blockquotes --> <div class="row"> <div class="col-lg-12"> <h2 id="type-blockquotes">Blockquotes</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> </div> </div> <div class="col-lg-6"> <div> <blockquote class="blockquote blockquote--primary pull-right"> <p>A blockquote element 'pulled right' and using the $brand-primary color.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> </div> </div> </div> </div> <!-- Buttons ================================================== --> <div id="buttons" class=""> <div class="page-header"> <div class="row"> <div class="col-lg-12"> <h1>Buttons</h1> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <p> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </p> <p> <button type="button" class="btn btn-default disabled">Default</button> <button type="button" class="btn btn-primary disabled">Primary</button> <button type="button" class="btn btn-success disabled">Success</button> <button type="button" class="btn btn-info disabled">Info</button> <button type="button" class="btn btn-warning disabled">Warning</button> <button type="button" class="btn btn-danger disabled">Danger</button> <button type="button" class="btn btn-link disabled">Link</button> </p> <div style="margin-bottom: 15px;"> <div class="btn-toolbar bs-component"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-primary btn-xs">Mini button</button> </p> </div> <div class="col-lg-6"> <p> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> </p> <div style="margin-bottom: 15px;"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a> </div> </div> <div style="margin-bottom: 15px;"> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">8</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> </div> <div> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> </div> </div> </div> </div> </div> <!-- Navbar ================================================== --> <div id="navbar" class="clearfix" style="display: none;"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Navbar</h1> </div> <div> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdown header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </div> <div> <div class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdown header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </div> <!-- /example --> </div> </div> </div> <!-- Tables ================================================== --> <div id="tables"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Tables</h1> </div> <div> <h2>Long form content table</h2> <div class="table-responsive"> <table class="table table--longform"> <thead> <tr> <th class="table--longform__table-description" colspan="12"> <p><strong>This is the table description.</strong> In the table description it is possible to use almost all conventional HTML tags for text formatting. This includes the <code>i</code> tag <i>for italics</i> and <code>strong</code> tag <strong>for bold</strong>.</p> <p>Everything in the <code>thead</code> is seperated from the <code>tbody</code> by a darker <code>background-color</code>.</p> <p>There is also the <code>.no-borders</code> class to remove borders from some rows. This can help to visually group rows together.</p> <p>In theory you can apply the bootstrap class <code>.table-striped</code> to the <code>table</code> element. As well as the <code>.success</code>, <code>.info</code>, <code>.warning</code> and <code>.danger</code> classes.</p> </th> </tr> <tr> <th class="text-center" colspan="12">thead > th element</th> </tr> <tr> <th class="text-center">&nbsp;</th> <th class="text-center">L</th> <th class="text-center">2</th> <th class="text-center">3</th> <th class="text-center">4</th> <th class="text-center">5</th> <th class="text-center">6</th> <th class="text-center">7</th> <th class="text-center">8</th> <th class="text-center">9</th> <th class="text-center">H</th> <th class="text-center">HL</th> </tr> </thead> <tbody> <tr> <th class="text-center" colspan="12"><b>tbody > th element</b></th> </tr> <tr class="no-borders"> <td>Daily</td> <td>0.35</td> <td>0.55</td> <td>0.54</td> <td>0.68</td> <td>0.77</td> <td>0.74</td> <td>0.68</td> <td>0.71</td> <td>0.63</td> <td>0.50</td> <td>0.15</td> </tr> <tr class="no-borders"> <td>Monthly</td> <td>0.38</td> <td>0.57</td> <td>0.56</td> <td>0.69</td> <td>0.77</td> <td>0.76</td> <td>0.70</td> <td>0.76</td> <td>0.66</td> <td>0.61</td> <td>0.23</td> </tr> <tr class="no-borders"> <td>Quarterly</td> <td>0.40</td> <td>0.61</td> <td>0.60</td> <td>0.73</td> <td>0.82</td> <td>0.83</td> <td>0.77</td> <td>0.86</td> <td>0.78</td> <td>0.84</td> <td>0.44</td> </tr> <tr> <th class="text-center" colspan="12"><b>Panel B: Standard Deviations</b></th> </tr> <tr class="no-borders"> <td>Daily</td> <td>3.46</td> <td>3.56</td> <td>4.30</td> <td>4.84</td> <td>5.37</td> <td>6.00</td> <td>6.49</td> <td>7.29</td> <td>8.05</td> <td>9.55</td> <td>8.43</td> </tr> <tr class="no-borders"> <td>Monthly</td> <td>3.96</td> <td>4.11</td> <td>4.60</td> <td>5.18</td> <td>5.50</td> <td>6.42</td> <td>6.93</td> <td>8.09</td> <td>8.60</td> <td>10.88</td> <td>9.42</td> </tr> <tr class="no-borders"> <td>Quarterly</td> <td>4.49</td> <td>4.91</td> <td>5.32</td> <td>5.86</td> <td>6.40</td> <td>7.77</td> <td>8.34</td> <td>10.12</td> <td>10.65</td> <td>14.33</td> <td>12.68</td> </tr> <tr> <th class="text-center" colspan="12"><b>Panel C: Proportion of Total Market Capitalization</b></th> </tr> <tr class="no-borders"> <td>Mean</td> <td>0.07</td> <td>0.10</td> <td>0.12</td> <td>0.12</td> <td>0.13</td> <td>0.12</td> <td>0.12</td> <td>0.10</td> <td>0.08</td> <td>0.05</td> <td>&nbsp;</td> </tr> <tr> <th class="text-center" colspan="12"><b>Panel D: Properties of Formation-Period Betas</b></th> </tr> <tr class="no-borders"> <td>Mean</td> <td>0.11</td> <td>0.42</td> <td>0.61</td> <td>0.78</td> <td>0.93</td> <td>1.09</td> <td>1.27</td> <td>1.48</td> <td>1.75</td> <td>2.28</td> <td>&nbsp;</td> </tr> <tr class="no-borders"> <td>Standard deviation</td> <td>0.31</td> <td>0.23</td> <td>0.22</td> <td>0.21</td> <td>0.21</td> <td>0.20</td> <td>0.21</td> <td>0.23</td> <td>0.27</td> <td>0.43</td> <td>&nbsp;</td> </tr> <tr class="no-borders success"> <td>Minimum</td> <td>−0.91</td> <td>−0.09</td> <td>0.14</td> <td>0.34</td> <td>0.50</td> <td>0.67</td> <td>0.86</td> <td>1.02</td> <td>1.18</td> <td>1.46</td> <td>&nbsp;</td> </tr> <tr class="no-borders"> <td>Maximum</td> <td>0.53</td> <td>0.81</td> <td>0.98</td> <td>1.15</td> <td>1.31</td> <td>1.56</td> <td>1.76</td> <td>2.09</td> <td>2.41</td> <td>3.68</td> <td>&nbsp;</td> </tr> <tr> <th class="text-center" colspan="12"><b>Panel E: Unconditional CAPM Betas</b></th> </tr> <tr class="no-borders"> <td>Daily</td> <td>0.51</td> <td>0.65</td> <td>0.78</td> <td>0.90</td> <td>0.98</td> <td>1.12</td> <td>1.21</td> <td>1.38</td> <td>1.49</td> <td>1.77</td> <td>1.26</td> </tr> <tr class="no-borders"> <td>Monthly</td> <td>0.49</td> <td>0.66</td> <td>0.78</td> <td>0.90</td> <td>0.97</td> <td>1.13</td> <td>1.23</td> <td>1.42</td> <td>1.50</td> <td>1.83</td> <td>1.34</td> </tr> <tr class="no-borders"> <td>Quarterly</td> <td>0.47</td> <td>0.67</td> <td>0.75</td> <td>0.85</td> <td>0.94</td> <td>1.15</td> <td>1.24</td> <td>1.49</td> <td>1.56</td> <td>2.02</td> <td>1.55</td> </tr> <tr> <th class="text-center" colspan="12"><b>Panel F: Average Conditional CAPM Betas</b></th> </tr> <tr class="no-borders"> <td>Daily</td> <td>0.54</td> <td>0.64</td> <td>0.76</td> <td>0.87</td> <td>0.97</td> <td>1.08</td> <td>1.17</td> <td>1.32</td> <td>1.45</td> <td>1.66</td> <td>1.12</td> </tr> <tr class="no-borders info"> <td>Monthly</td> <td>0.59</td> <td>0.65</td> <td>0.75</td> <td>0.87</td> <td>0.97</td> <td>1.07</td> <td>1.18</td> <td>1.33</td> <td>1.46</td> <td>1.72</td> <td>1.13</td> </tr> <tr class="no-borders"> <td>Quarterly</td> <td>0.63</td> <td>0.69</td> <td>0.78</td> <td>0.85</td> <td>0.96</td> <td>1.03</td> <td>1.15</td> <td>1.32</td> <td>1.53</td> <td>1.82</td> <td>1.18</td> </tr> </tbody> </table> </div> </div> <div> <h2>Short form table content</h2> <div class="table-responsive"> <table class="table table-striped table-hover"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>2</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>3</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>4</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <td>5</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <td>6</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="active"> <td>7</td> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> </div> <!-- /example --> </div> </div> </div> <!-- Forms ================================================== --> <div id="forms" class=""> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Forms</h1> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="well bs-component"> <form class="form-horizontal"> <fieldset> <legend>Legend</legend> <div class="form-group"> <label for="inputEmail" class="col-lg-2 control-label">Email</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-lg-2 control-label">Password</label> <div class="col-lg-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> <div class="checkbox"> <label> <input type="checkbox"> Checkbox </label> </div> </div> </div> <div class="form-group"> <label for="textArea" class="col-lg-2 control-label">Textarea</label> <div class="col-lg-10"> <textarea class="form-control" rows="3" id="textArea"></textarea> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">Radios</label> <div class="col-lg-10"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> Option one is this </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else </label> </div> </div> </div> <div class="form-group"> <label for="select" class="col-lg-2 control-label">Selects</label> <div class="col-lg-10"> <select class="form-control" id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <select multiple="multiple" class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </fieldset> </form> </div> </div> <div class="col-lg-4 col-lg-offset-1"> <form> <div class="form-group"> <label class="control-label" for="focusedInput">Focused input</label> <input class="form-control" id="focusedInput" type="text" value="This is focused..."> </div> <div class="form-group"> <label class="control-label" for="disabledInput">Disabled input</label> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled=""> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input error</label> <input type="text" class="form-control" id="inputError"> </div> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group"> <label class="control-label" for="inputLarge">Large input</label> <input class="form-control input-lg" type="text" id="inputLarge"> </div> <div class="form-group"> <label class="control-label" for="inputDefault">Default input</label> <input type="text" class="form-control" id="inputDefault"> </div> <div class="form-group"> <label class="control-label" for="inputSmall">Small input</label> <input class="form-control input-sm" type="text" id="inputSmall"> </div> <div class="form-group"> <label class="control-label">Input addons</label> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Button</button> </span> </div> </div> </form> </div> </div> </div> <!-- Navs ================================================== --> <div id="navs"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Navs</h1> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <h2 id="nav-tabs">Tabs</h2> <div> <ul class="nav nav-tabs" style="margin-bottom: 15px;"> <li class="active"><a href="#recently-published" data-toggle="tab">Recently Published</a></li> <li><a href="#profile" data-toggle="tab">Accepted Articles</a></li> <li class="disabled"><a>Disabled</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> More... <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#dropdown1" data-toggle="tab">Most Cited</a></li> <li><a href="#dropdown2" data-toggle="tab">Most Accessed</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="recently-published"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> <div class="tab-pane fade" id="profile"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p> </div> <div class="tab-pane fade" id="dropdown1"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p> </div> <div class="tab-pane fade" id="dropdown2"> <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p> </div> </div> </div> </div> <div class="col-lg-6"> <h2 id="nav-pills">Pills</h2> <div> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li class="disabled"><a href="#">Disabled</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <br> <div> <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li class="disabled"><a href="#">Disabled</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <h2 id="nav-breadcrumbs">Breadcrumbs</h2> <div> <ul class="breadcrumb"> <li class="active">Home</li> </ul> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li class="active">Library</li> </ul> <ul class="breadcrumb" style="margin-bottom: 5px;"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ul> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <h2 id="pagination">Pagination</h2> <div> <ul class="pagination"> <li class="disabled"><a href="#">« Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next »</a></li> </ul> <ul class="pagination pagination-sm"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div> <div class="col-lg-4"> <h2 id="pager">Pager</h2> <div> <ul class="pager"> <li><a href="#">Prev</a></li> <li><a href="#">Next</a></li> </ul> <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </div> </div> <div class="col-lg-4"> </div> </div> </div> <!-- Indicators ================================================== --> <div id="indicators"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Indicators</h1> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <h2>Alerts</h2> <div> <div class="alert alert-dismissable alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Warning!</h4> <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <div> <div class="alert alert-dismissable alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. </div> </div> </div> <div class="col-lg-4"> <div> <div class="alert alert-dismissable alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. </div> </div> </div> <div class="col-lg-4"> <div> <div class="alert alert-dismissable alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. </div> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <h2>Labels</h2> <div style="margin-bottom: 40px;"> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> <span class="label label-info">Info</span> </div> </div> <div class="col-lg-4"> <h2>Badges</h2> <div> <ul class="nav nav-pills"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile <span class="badge"></span></a></li> <li><a href="#">Messages <span class="badge">3</span></a></li> </ul> </div> </div> </div> </div> <!-- Progress bars ================================================== --> <div id="progress"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Progress</h1> </div> <h3 id="progress-basic">Basic</h3> <div> <div class="progress"> <div class="progress-bar" style="width: 60%;"></div> </div> </div> <h3 id="progress-alternatives">Contextual alternatives</h3> <div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 60%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> <h3 id="progress-striped">Striped</h3> <div> <div class="progress progress-striped"> <div class="progress-bar" style="width: 45%"></div> </div> </div> <h3 id="progress-animated">Animated</h3> <div> <div class="progress progress-striped active"> <div class="progress-bar" style="width: 45%"></div> </div> </div> <h3 id="progress-stacked">Stacked</h3> <div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"></div> <div class="progress-bar progress-bar-warning" style="width: 20%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"></div> </div> </div> </div> </div> </div> <!-- Containers ================================================== --> <div id="containers"> <!-- jumbotron --> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Containers</h1> </div> <div> <div class="jumbotron ow-bg-img-teal"> <h1>Jumbotron</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-outline--white btn-lg">Learn more</a></p> </div> </div> </div> </div> <!-- list groups --> <div class="row"> <div class="col-lg-12"> <h2>List groups</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <div> <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> <li class="list-group-item"> <span class="badge">2</span> Dapibus ac facilisis in </li> <li class="list-group-item"> <span class="badge">1</span> Morbi leo risus </li> </ul> </div> </div> <div class="col-lg-4"> <div> <div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in </a> <a href="#" class="list-group-item">Morbi leo risus </a> </div> </div> </div> <div class="col-lg-4"> <div> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div> </div> </div> </div> <!-- panels --> <div class="row"> <div class="col-lg-12"> <h2>Panels</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <div> <div class="panel panel-default"> <div class="panel-body"> Basic Panel </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div> </div> <div class="col-lg-4"> <div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel primary</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel success</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel warning</h3> </div> <div class="panel-body"> Panel content </div> </div> </div> </div> <div class="col-lg-4"> <div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Panel danger</h3> </div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Panel info</h3> </div> <div class="panel-body"> Panel content </div> </div> </div> </div> </div> <!-- /panels --> <!-- wells --> <div class="row"> <div class="col-lg-12"> <h2>Wells</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <div> <div class="well"> Look, I'm in a well! </div> </div> </div> <div class="col-lg-4"> <div> <div class="well well-sm"> Look, I'm in a small well! </div> </div> </div> <div class="col-lg-4"> <div> <div class="well well-lg"> Look, I'm in a large well! </div> </div> </div> </div> <!-- /wells --> <!-- pullout --> <div class="row"> <div class="col-lg-12"> <h2 id="callouts">Callouts</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="wol2-component"> <div class="callout"> <h4>Branded callout</h4> <p>Look, I'm a callout</p> </div> </div> </div> <div class="col-lg-6"> <div class="wol2-component"> <div class="callout callout--info"> <h4>Informative callout</h4> <p>Look, I'm an informative callout!</p> </div> </div> </div> </div> <!-- /pullout --> </div> <!-- Dialogs ================================================== --> <div id="dialogs"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Dialogs</h1> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <h2>Modals</h2> <div> <a class="btn btn-default" data-toggle="modal" data-target="#previewModal">Show modal dialog</a> <div id="previewModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <h2>Popovers</h2> <div> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Left</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Top</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Bottom</button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Right</button> </div> <h2>Tooltips</h2> <div> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button> </div> </div> </div> </div> <!-- Feature buttons ================================================== --> <div id="feature-buttons"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Feature Buttons</h1> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-lg-4"> <div> <ul class="wol2-feature-buttons"> <li class="wol2-feature-button"> <a href="#"> <div class="wol2-feature-button__container"> <div class="wol2-feature-button__icon-container"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#play-circle"></use></svg></div> <div class="wol2-feature-button__text-container"><span class="wol2-feature-button__text">Podcasts & Videos</span></div> </div> </a> </li> <li class="wol2-feature-button wol2-feature-button--teal"> <a href="#"> <div class="wol2-feature-button__container"> <div class="wol2-feature-button__icon-container"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#chat"></use></svg></div> <div class="wol2-feature-button__text-container"><span class="wol2-feature-button__text">Clinicians Corner</span></div> </div> </a> </li> </ul> </div> </div> <div class="col-sm-6 col-lg-4"> <div> <ul class="wol2-feature-buttons"> <li class="wol2-feature-button wol2-feature-button--purple"> <a href="#"> <div class="wol2-feature-button__container"> <div class="wol2-feature-button__icon-container"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#headphones"></use></svg></div> <div class="wol2-feature-button__text-container"><span class="wol2-feature-button__text">Podcasts & Videos</span></div> </div> </a> </li> <li class="wol2-feature-button wol2-feature-button--blue"> <a href="#"> <div class="wol2-feature-button__container"> <div class="wol2-feature-button__icon-container"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#grid-three-up"></use></svg></div> <div class="wol2-feature-button__text-container"><span class="wol2-feature-button__text">Mobile Apps</span></div> </div> </a> </li> </ul> </div> </div> <div class="col-sm-6 col-lg-4"> <div> <ul class="wol2-feature-buttons"> <li class="wol2-feature-button wol2-feature-button--green"> <a href="#"> <div class="wol2-feature-button__container"> <div class="wol2-feature-button__icon-container"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#document"></use></svg></div> <div class="wol2-feature-button__text-container"><span class="wol2-feature-button__text">Documents & Resources</span></div> </div> </a> </li> <li class="wol2-feature-button wol2-feature-button--red"> <a href="#"> <div class="wol2-feature-button__container"> <div class="wol2-feature-button__icon-container"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#magnifying-glass"></use></svg></div> <div class="wol2-feature-button__text-container"><span class="wol2-feature-button__text">Searching</span></div> </div> </a> </li> </ul> </div> </div> </div> </div> <!-- Components ================================================== --> <!-- feature card --> <div id="feature-cards"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>Feature Cards</h1> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="wol2-component"> <div class="well wol2-feature-card"> <a href="#"> <div class="wol2-feature-card__overlay"> <div class="wol2-feature-card__text"> <h2>Customer Support: EMEA</h2> <p><strong>Click here</strong> for Wiley's EMEA Customer Support site, which features FAQs, discussions and more.</p> <button class="btn btn-sm btn-outline--white pull-right">Read more</button> </div> <div class="wol2-feature-card__chevron"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#chevron-right"></use></svg></div> </div> </a> </div> </div> </div> <div class="col-md-6"> <div class="wol2-component"> <div class="well wol2-feature-card wol2-feature-card--teal"> <a href="#"> <div class="wol2-feature-card__overlay"> <div class="wol2-feature-card__text"> <h2>This is a teal feature card</h2> <p>Here is a small snippet of text describing the link</p> </div> <div class="wol2-feature-card__chevron"><svg viewBox="0 0 8 8" class="ow-ui-icon"><use xlink:href="#chevron-right"></use></svg></div> </div> </a> </div> </div> </div> </div> </div> <!-- end ================================================== --> <hr> </div> <!-- footer --> <div class="footer-base"> <div class="footer-base__content"> <div class="copyright"><a href="http://www.wiley.com/go/copyright">Copyright ©</a> by <a href="http://www.wiley.com">John Wiley &amp; Sons, Inc.</a>, or related companies. All rights reserved.</div> <img class="logo" alt="Black Wiley wordmark" src="https://onewiley.github.io/assets/toolkit/images/wiley-wordmark-black.svg"> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/svginjector/1.1.3/svg-injector.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WOL 2 styleguide - Script Codes CSS Codes

@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400");
.ow-ui-icon { width: 16px; height: 16px;
}
html { font-size: 100%;
}
.btn-link { font-weight: 600;
}
.btn:active,
.btn.active { box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
}
.dropdown-menu { box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.25);
}
.btn-group.open .dropdown-toggle { box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.125);
}
.modal-content { box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.25);
}
.popover { box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.25);
}
.modal-header { background-color: #855199; color: white;
}
.modal-header .close { color: white; text-shadow: 0 1px 0 #000000; opacity: 0.5;
}
.modal-header .close:hover, .modal-header .close:focus { opacity: 0.75;
}
.nav-tabs { border-bottom-color: #855199;
}
.nav-tabs > li { margin-bottom: 0; margin-right: 2px;
}
.nav-tabs > li:last-child { margin-right: 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { color: #ffffff; background-color: #855199; border-color: transparent;
}
blockquote { border-width: 0.25rem; margin-left: 3rem; position: relative;
}
blockquote:after { content: '“'; font-size: 3rem; border: 0.25rem solid #E0E0E0; color: #E0E0E0; background-color: white; border-radius: 50%; position: absolute; left: -3rem; top: 1rem; width: 1em; height: 1em; text-align: center; line-height: 1.25em; vertical-align: middle; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
}
blockquote.pull-right { margin-right: 3rem; margin-left: 0;
}
blockquote.pull-right:after { left: auto; right: -3rem; top: 1rem;
}
blockquote.blockquote--primary { border-color: #855199;
}
blockquote.blockquote--primary:after { color: #855199; border-color: #855199;
}
.page-header { border-color: transparent; position: relative;
}
.page-header:after { content: ""; display: block; position: absolute; width: 100%; margin: 0; background-repeat: repeat-x; background-image: -webkit-radial-gradient(#9e9e9e 15%, rgba(0, 0, 0, 0) 0%); background-image: radial-gradient(#9e9e9e 15%, rgba(0, 0, 0, 0) 0%); background-size: 10px 10px; background-position: center center; height: 15px;
}
.page-header.hr-dotted--purple:after { background-image: -webkit-radial-gradient(#855199 15%, rgba(0, 0, 0, 0) 0%); background-image: radial-gradient(#855199 15%, rgba(0, 0, 0, 0) 0%);
}
.ow-bg-img-teal { background-image: url("https://hub.wiley.com/resources/statics/1100/pattrned-bg.png"); background-size: cover; background-position: center; color: white;
}
.hr-dotted { border-color: transparent; position: relative;
}
.hr-dotted:after { content: ""; display: block; position: absolute; top: -8px; width: 100%; margin: 0; background-repeat: repeat-x; background-image: -webkit-radial-gradient(#9e9e9e 15%, rgba(0, 0, 0, 0) 0%); background-image: radial-gradient(#9e9e9e 15%, rgba(0, 0, 0, 0) 0%); background-size: 10px 10px; background-position: center center; height: 15px;
}
.hr-dotted.hr-dotted--purple:after { background-image: -webkit-radial-gradient(#855199 15%, rgba(0, 0, 0, 0) 0%); background-image: radial-gradient(#855199 15%, rgba(0, 0, 0, 0) 0%);
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td { white-space: normal;
}
.table.table--longform { border: 1px solid #E0E0E0;
}
.table.table--longform thead { font-size: 0.875em; background-color: #F5F5F5;
}
.table.table--longform tbody { font-size: 0.75em;
}
.table.table--longform thead th { border-right: 1px solid #E0E0E0; border-top: 2px solid #E0E0E0; border-bottom: 2px solid #E0E0E0; background-color: #F5F5F5;
}
.table.table--longform thead th:last-child { border-right: none;
}
.table.table--longform thead th.table--longform__table-description { font-weight: 600;
}
.table.table--longform tbody th { border-right: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; background-color: #F5F5F5;
}
.table.table--longform tbody th:last-child { border-right: none;
}
.table.table--longform tbody th.table--longform__table-description { font-weight: 600;
}
.table.table--longform td { border: none; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;
}
.table.table--longform tr:last-child td { border-bottom: none;
}
.table.table--longform tr.no-borders td { border: none;
}
.table.table--longform th,
.table.table--longform td { padding: 1em;
}
.table.table--longform td { -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; background-color: inherit;
}
.table.table--longform td:hover, .table.table--longform td:active { background-color: #EEEEEE;
}
.btn-outline--white { background-color: transparent; border-color: white; color: white;
}
.btn-outline--white:hover, .btn-outline--white:active, .btn-outline--white:active:hover, .btn-outline--white:focus, .btn-outline--white:active:focus { color: white; background-color: transparent; background-color: rgba(0, 0, 0, 0.1);
}
.callout { position: relative; padding: 0.5rem 1rem 2rem 1.5rem; margin-bottom: 2rem; margin-top: 2rem; border: 1px solid rgba(0, 0, 0, 0.075); background-color: rgba(255, 255, 255, 0.5); border-radius: 2px;
}
.callout h1,
.callout h2,
.callout h3,
.callout h4,
.callout h5,
.callout h6 { font-weight: 500; margin-left: -1.5rem; margin-right: 0rem; padding: 0.75rem 1.5rem; background-color: #855199; color: white; display: inline-block; border-bottom-right-radius: 3px; border-top-right-radius: 3px; box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
}
.callout:before { content: ""; position: absolute; border-left: solid 4px #855199; height: 100%; left: 0; top: 0;
}
.callout.callout--success h1,
.callout.callout--success h2,
.callout.callout--success h3,
.callout.callout--success h4,
.callout.callout--success h5,
.callout.callout--success h6 { background-color: #92CB9C; color: #295631;
}
.callout.callout--success:before { border-left-color: #92CB9C;
}
.callout.callout--info h1,
.callout.callout--info h2,
.callout.callout--info h3,
.callout.callout--info h4,
.callout.callout--info h5,
.callout.callout--info h6 { background-color: #648FD8; color: #13284C;
}
.callout.callout--info:before { border-left-color: #648FD8;
}
.callout.callout--warning h1,
.callout.callout--warning h2,
.callout.callout--warning h3,
.callout.callout--warning h4,
.callout.callout--warning h5,
.callout.callout--warning h6 { background-color: #F2BA49; color: #6B4A08;
}
.callout.callout--warning:before { border-left-color: #F2BA49;
}
.callout.callout--danger h1,
.callout.callout--danger h2,
.callout.callout--danger h3,
.callout.callout--danger h4,
.callout.callout--danger h5,
.callout.callout--danger h6 { background-color: #D22938; color: #FCEEEF;
}
.callout.callout--danger:before { border-left-color: #D22938;
}
.wol2-feature-buttons { list-style: none; padding: 0; margin: 0;
}
.wol2-feature-buttons .wol2-feature-button { width: 100%; margin-bottom: 1rem; display: inline-block; line-height: 0; background-image: url("https://raw.githubusercontent.com/wileycreativeservices/WOL-2-Styleguide/master/images/feature-button-bg.png"); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; border-radius: 3px;
}
.wol2-feature-buttons .wol2-feature-button:hover, .wol2-feature-buttons .wol2-feature-button:active { opacity: 0.9;
}
.wol2-feature-buttons .wol2-feature-button .wol2-feature-button__container { display: inline-block; position: relative; width: 100%; background-color: rgba(33, 33, 33, 0.5); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.85) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button .wol2-feature-button__container .wol2-feature-button__icon-container { display: inline-block; background-color: #212121;
}
.wol2-feature-buttons .wol2-feature-button .wol2-feature-button__container .wol2-feature-button__icon-container svg { width: 2rem; height: 2rem; margin: 1rem;
}
.wol2-feature-buttons .wol2-feature-button .wol2-feature-button__container .wol2-feature-button__icon-container svg use { fill: #ffffff;
}
.wol2-feature-buttons .wol2-feature-button .wol2-feature-button__container .wol2-feature-button__text-container { display: block; position: absolute; right: 0; top: 0; width: 100%; height: 100%; padding: 1rem 1rem 1rem 5rem; text-align: right;
}
.wol2-feature-buttons .wol2-feature-button .wol2-feature-button__container .wol2-feature-button__text-container .wol2-feature-button__text { display: block; font-size: 1.25em; font-weight: 600; color: #ffffff; line-height: 1em;
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--purple .wol2-feature-button__container { background-color: rgba(133, 81, 153, 0.5); background: -webkit-linear-gradient(left, rgba(133, 81, 153, 0.5) 0%, rgba(133, 81, 153, 0.85) 100%); background: linear-gradient(to right, rgba(133, 81, 153, 0.5) 0%, rgba(133, 81, 153, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--purple .wol2-feature-button__container .wol2-feature-button__icon-container { background-color: #855199;
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--teal .wol2-feature-button__container { background-color: rgba(0, 163, 178, 0.5); background: -webkit-linear-gradient(left, rgba(0, 163, 178, 0.5) 0%, rgba(0, 163, 178, 0.85) 100%); background: linear-gradient(to right, rgba(0, 163, 178, 0.5) 0%, rgba(0, 163, 178, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--teal .wol2-feature-button__container .wol2-feature-button__icon-container { background-color: #00A3B2;
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--blue .wol2-feature-button__container { background-color: rgba(100, 143, 216, 0.5); background: -webkit-linear-gradient(left, rgba(100, 143, 216, 0.5) 0%, rgba(100, 143, 216, 0.85) 100%); background: linear-gradient(to right, rgba(100, 143, 216, 0.5) 0%, rgba(100, 143, 216, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--blue .wol2-feature-button__container .wol2-feature-button__icon-container { background-color: #648FD8;
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--green .wol2-feature-button__container { background-color: rgba(146, 203, 156, 0.5); background: -webkit-linear-gradient(left, rgba(146, 203, 156, 0.5) 0%, rgba(146, 203, 156, 0.85) 100%); background: linear-gradient(to right, rgba(146, 203, 156, 0.5) 0%, rgba(146, 203, 156, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--green .wol2-feature-button__container .wol2-feature-button__icon-container { background-color: #92CB9C;
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--red .wol2-feature-button__container { background-color: rgba(180, 0, 67, 0.5); background: -webkit-linear-gradient(left, rgba(180, 0, 67, 0.5) 0%, rgba(180, 0, 67, 0.85) 100%); background: linear-gradient(to right, rgba(180, 0, 67, 0.5) 0%, rgba(180, 0, 67, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--red .wol2-feature-button__container .wol2-feature-button__icon-container { background-color: #B40043;
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--orange .wol2-feature-button__container { background-color: rgba(232, 119, 0, 0.5); background: -webkit-linear-gradient(left, rgba(232, 119, 0, 0.5) 0%, rgba(232, 119, 0, 0.85) 100%); background: linear-gradient(to right, rgba(232, 119, 0, 0.5) 0%, rgba(232, 119, 0, 0.85) 100%);
}
.wol2-feature-buttons .wol2-feature-button.wol2-feature-button--orange .wol2-feature-button__container .wol2-feature-button__icon-container { background-color: #E87700;
}
.wol2-feature-card { background-image: url("https://hub.wiley.com/resources/statics/1002/back-wiley-ex.jpg"); background-size: cover; overflow: hidden; padding: 0;
}
.wol2-feature-card .wol2-feature-card__overlay { background-color: rgba(133, 81, 153, 0.5); background: -webkit-linear-gradient(left, rgba(133, 81, 153, 0.25) 0%, rgba(133, 81, 153, 0.75) 100%); background: linear-gradient(to right, rgba(133, 81, 153, 0.25) 0%, rgba(133, 81, 153, 0.75) 100%); padding: 1.5rem; position: relative;
}
.wol2-feature-card .wol2-feature-card__overlay .wol2-feature-card__text { display: inline-block; width: 100%; color: white; padding-right: 6rem; margin-bottom: 1rem;
}
.wol2-feature-card .wol2-feature-card__overlay .wol2-feature-card__chevron { line-height: 0; display: inline-block; position: absolute; right: 2rem; top: 0; bottom: 0; height: 100%;
}
.wol2-feature-card .wol2-feature-card__overlay .wol2-feature-card__chevron svg { -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease; transition: opacity 0.25s ease, -webkit-transform 0.25s ease; transition: transform 0.25s ease, opacity 0.25s ease; transition: transform 0.25s ease, opacity 0.25s ease, -webkit-transform 0.25s ease; width: 3rem; height: 3rem; position: relative; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 0.5;
}
.wol2-feature-card .wol2-feature-card__overlay .wol2-feature-card__chevron svg use { fill: white;
}
.wol2-feature-card.wol2-feature-card--teal { background-image: url("https://hub.wiley.com/resources/statics/1002/back-wiley-emea.jpg");
}
.wol2-feature-card.wol2-feature-card--teal .wol2-feature-card__overlay { background-color: rgba(0, 163, 178, 0.5); background: -webkit-linear-gradient(left, rgba(0, 163, 178, 0.25) 0%, rgba(0, 163, 178, 0.75) 100%); background: linear-gradient(to right, rgba(0, 163, 178, 0.25) 0%, rgba(0, 163, 178, 0.75) 100%);
}
.wol2-feature-card:hover .wol2-feature-card__overlay .wol2-feature-card__chevron svg, .wol2-feature-card:active .wol2-feature-card__overlay .wol2-feature-card__chevron svg { -webkit-transform: translate(25%, -50%); transform: translate(25%, -50%); opacity: 0.75;
}
body { padding-top: 4rem;
}
#ow-ui-icon-list svg { width: 1rem; height: 1rem; margin: 0.5rem; padding: 0.5rem; box-sizing: content-box; border: 1px solid transparent;
}
#ow-ui-icon-list svg:hover, #ow-ui-icon-list svg:active { border-color: #EEEEEE; border-radius: 2px;
}
#ow-ui-icon-list svg:hover use, #ow-ui-icon-list svg:active use { fill: #855199;
}
.wol2-example__colors { margin: 2em auto;
}
.wol2-example__colors span { font-weight: 700; color: #fff; text-align: center; display: block; width: 50%; min-width: 280px; padding: 1rem; margin: 0.5rem auto; border-radius: 3px;
}
.footer-base { padding-top: 2rem; padding-bottom: 1rem; position: relative; background: url("https://onewiley.github.io/assets/toolkit/images/decoration/footer-01.svg") repeat-x;
}
.footer-base:after { content: " "; position: absolute; right: 0; top: 0; background: url("https://onewiley.github.io/assets/toolkit/images/decoration/footer-02.svg") right; display: block; height: 70px; width: 100%; max-width: 296px;
}
.footer-base .footer-base__content { display: block; max-width: 1140px; position: relative; margin: auto;
}
.footer-base .footer-base__content .logo { display: block; margin: auto;
}
@media (min-width: 60em) { .footer-base .footer-base__content .logo { position: absolute; right: 2rem; top: -1rem; }
}
.copyright { text-align: center; font-size: 0.625em; margin: 1rem 3rem;
}
.copyright a { text-decoration: none; color: inherit; font-weight: 700;
}
.copyright a:hover { text-decoration: underline;
}
@media (min-width: 60em) { .copyright { text-align: left; margin-left: 1rem; margin-right: 10rem; }
}

WOL 2 styleguide - Script Codes JS Codes

//// Enable tooltips and popovers for
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
//// END Enable tooltips and popovers for
//// Inject svg sprite into DOM
// Elements to inject
var mySVGsToInject = document.querySelectorAll('.iconic-sprite');
// Do the injection
SVGInjector(mySVGsToInject);
//// END inject svg sprite into dom
// Show the icons
var populateIconList = function() { var iconSvg = document.getElementById("ow-ui-icon-sprite"); var iconItem = {}; var iconItems = iconSvg.getElementsByTagName("path"); var iconList = document.getElementById("ow-ui-icon-list"); for (var k = 0; k < iconItems.length; k++) { iconItem = iconItems[k]; var iconName = iconItem.getAttribute("id"); var iconHtml = '<svg viewBox="0 0 8 8" class="ow-ui-icon" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="' + iconName + '"><use xlink:href="#' + iconName + '"></use></svg>'; iconList.insertAdjacentHTML('beforeend', iconHtml); }
}
$(document).ready(function() { var showIconBtn = document.getElementById("show-icons"); showIconBtn.onclick = function showIcons() { populateIconList(); // hide button so icons cannot be repeatedly shown showIconBtn.style.display = "none"; // enable tooltips for the icons. Previous call happened before icons were in dom $('#ow-ui-icon-list [data-toggle="tooltip"]').tooltip(); }
});
// END show the icons
WOL 2 styleguide - Script Codes
WOL 2 styleguide - Script Codes
Home Page Home
Developer Stuart Allen
Username rarebush
Uploaded November 29, 2022
Rating 3
Size 38,783 Kb
Views 6,072
Do you need developer help for WOL 2 styleguide?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stuart Allen (rarebush) Script Codes
Name
Expanding search
Hub styleguide
Aasld large links
Shuffle.js test
HTML email
WileyPLUS styles
Dashboard Builder - geochart
Dashboard Builder - piechart
HUB styles
Animated leaderboard
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!