Style Index

Options

Show/hide titles Show/hide markup

Styles

Colours

Text

.bg-red

Text

.bg-blue

Text

.bg-orange

Text

.bg-green

Text styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

.fs-xxl on h1

.fs-xxl on p

.fs-xl on p

.fs-s on p

This is a standfirst, sometimes known as a lede. This is often deployed as summary of what follows. It is sized a little larger to enable the reader to grok it at a glance.

Hi, I'm a paragraph. The following latin is all greek to me. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, sequi, doloremque autem quisquam eligendi, impedit sit nisi saepe consectetur illum laborum maiores provident delectus expedita. Voluptate, culpa itaque non labore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eum magni facere, dolore aspernatur, placeat distinctio. Dolore ab fuga mollitia ad autem. Aperiam, similique. Voluptas asperiores ipsa explicabo sunt eos.

Au tem architecto quo, aut natus ipsa ex saepe iusto possimus minima animi veniam, nesciunt expedita quia.

Mike Fictional, Freelance UX Consultant.

Link Styles

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, nobis earum blanditiis quo deserunt dolorem, ipsa modi veritatis ratione odio ducimus laborum. Non dolorum error impedit nisi quos saepe labore.

These styles are a bit confused and need to be simplified to the elemt, rather than inheriting form the container.

Sub Components

• Hover styles vary between link and other buttons.
• The text wrap on inputs needs to be fixed.

Anchor Button S

Anchor Button

Anchor Button L

Anchor Button S

Anchor Button

Anchor Button L

Anchor Button S

Anchor Button

Anchor Button L

Anchor Button S

Anchor Button

Anchor Button L

Anchor Button S

Anchor Button

Anchor Button L

</div>

<div data-pattern="Checkbox">
  <div>
    <input id="conference-mailinglist" name="list[]" value="tE7kdODDq3zHNYJKOkdOAA" type="checkbox" checked="" class="left">
    <label class="table" for="conference-mailinglist">Conference and workshop news</label>    
  </div>
</div>

<div class="pa2 bg-grey-5">
    <div class="relative">
      <img src="/2018/images/icons/search.png" width="17" height="17" style="position: absolute;top: 7px;left: 12px;" alt="search icon">
      <label for="search_events" class="screen-reader-text">Search events</label>
      <input id="search_events" class="search archive-nav__search">       
    </div>  
  </div>

</div>

<div data-pattern="Nav Labels">
  <h2 class="fs-s track-loose uppercase regular">Upcoming Events</h2>
</div>

<div data-pattern="Upcoming Teaser">
  <div class="upcoming__teaser border-top pv2">
    <h3 class="upcoming__teaser__heading ">
      February Triple Bill
    </h3>
    <div class="upcoming__teaser__text">
      Tue 12 February 2019, 19:00
    </div>
    <a href="/February-triple-bill/" class="upcoming__teaser__button button button--green ">
      Tickets and info
    </a>
  </div>
</div>

<div data-pattern="Event List Item">
  <nav class="archive-nav" style="display:block !important;">
    <ul>
      <li class="event-title-list-item">
        <a class="block-link pv3 ph4 archive-nav__link" href="https://www.eventbrite.co.uk/e/ux-brighton-2019-tickets-51654305418#tickets">
          <div class="post-title weight-900 block-link__highlight">2019 Conference ★ </div>
          <div class="post-date ">1 November 2019</div>
          <div class="post-excerpt">Our 9th one day annual conference. More details will be announced here: https://uxbri.org Want to sponsor us? Get in touch with our Conference Producer Emmeline at emmeline@uxbrighton.org.uk</div>
        </a>
      </li>  
    </ul>    
  </nav>

</div>

</div>
  				</div>

</div>
      </section>

</main>

<div class="overlay-active-underlay full-screen-overlay hidden" onclick="$('body').attr('data-overlay-active','false'); $( '#js-newsletter-thanks' ).css('color', '');"></div>
<footer class="bg-grey-90 color-grey-10">
  <div class="container pt1">
    <div class="row" style="display: none;">
      
      <div class="u1of2-over-m left-over-m gutter-left pb3">
        <div class="inline-block right-over-m center-under-m">
          <nav class="social-icons icons-currentColor pt1 clearfix">
            <a class="social-icons__link social-icons__link--linkedin" href="https://www.linkedin.com/company/ux-brighton">
              <span class="screen-reader-text">linkedin</span>
              <svg viewBox="0 0 409 409">
                <use xlink:href="/2018/images/icons/social-sprite.svg#linkedin"></use>
              </svg>
            </a>
            <a class="social-icons__link social-icons__link--youtube" href="https://www.youtube.com/channel/UC9hOYRFJn2NgV406gr9jajw">
              <span class="screen-reader-text">youtube</span>
              <svg viewBox="0 0 579 409">
                <use xlink:href="/2018/images/icons/social-sprite.svg#youtube"></use>
              </svg>
            </a>
            <a class="social-icons__link social-icons__link--twitter" href="https://twitter.com/uxbri">
              <span class="screen-reader-text">twitter</span>
              <svg viewBox="0 0 493 409">
                <use xlink:href="/2018/images/icons/social-sprite.svg#twitter"></use>
              </svg>
            </a>
            <a class="social-icons__link social-icons__link--facebook" href="https://www.facebook.com/uxbrighton/" style="width:30px;">
              <span class="screen-reader-text">facebook</span>
              <svg viewBox="0 0 409 409">
                <use xlink:href="/2018/images/icons/social-sprite.svg#icon-facebook2"></use>
              </svg>
            </a>
          </nav>
        </div>

</div>
    </div>

<div class="row text-center">
      <a class="bold inline-block" href="/about">About UX Brighton</a>
      <span class="hide-footer-middot">   </span>
      <br class="break-footer-links" />
      
      
      <br class="break-footer-links" />
      <a class="bold inline-block" href="http://dannyhope.co.uk/">A Danny Hope Production</a>
      
    </div>

<form id="slack-signup" class="hidden form-inline bg-white z4 triangle-top-right mr2" action="https://slofile.com/slack/uxbri/invite" accept-charset="UTF-8" method="post" target="slackFrame">
      <div class="pa3">
        <h2 class="mb1" style="font-size: 21px; letter-spacing: -0.02em;">Your Email Address</h2>
        <input name="utf8" type="hidden" value="✓">
        <input type="hidden" name="authenticity_token" value="PWn79CzsqJB996ucMtB+K9FMPe+7eYsWJx9s8RI82qpKZdztqM46BM3PH7EiTiWVYgzuSOodP5eud36luQeT9Q==">
        <div class="input-group mt1 mb1">
          <label class="screen-reader-text" for="email">Email</label>
          <input type="email" name="email" id="email" value="" placeholder="Email Address" class="input-group__field border--none rounded-left">
          <input type="submit" name="commit" value="Join" class="button input-group__button button--green rounded-right">
        </div>
      </div>
    </form>

</div>
</footer>

// Function to check for the difference between the current jobs and the stored jobs
    function checkJobsDiff() {
      let jobs_current = [
        // Loop through each job in the site's jobPosts and add the job's shortId to the jobs_current array
            'H7De48OK',
          
            'Oekv65N1',
          
            'WJ8cX9Fg',
          
            '5DZRz2qt',
          
            'p07Qh5B6',
          
            'YaDyQFeG',
          
            'TDeiKkAN',
          
            'esY82vm3',
          
            'fD5LAxHX',
          
            '700iozGp',
          
            'a9H5S5Y9',
          
            'L95ogys4',
          
            'qosQp9wr',
          
            'L14756n7',
          
            'clckLU5o',
          
            'liOkoEa8',
          
            'bzj79dE0',
          
            '8wVp165e',
          
            'tKil5T9n',
          
            'UczWEqbm',
          
            'tVq7Z1Ug',
          
            '3908K6nC',
          
            'liJls6zL',
          
            'G9264tI3',
          
            'md6Fth8g',
          
            'JEZYdKi6',
          
            '74vjVel9',
          
            'h8D4uU1G',
          
            'O66BViw3',
          
            'w8pWm1tN',
          
            't93utpC0',
          
            '5p6i5Pmy',
          ];

// Retrieve the 'jobs_stored' cookie value
      let jobs_stored = getCookie('jobs_stored');

// Parse the JSON string from the 'jobs_stored' cookie into an array
      jobs_stored = JSON.parse(jobs_stored);

// Find the difference between the current jobs and the stored jobs
      let jobs_diff = $(jobs_current).not(jobs_stored).get().length;
      let unviewed_number = "unviewed--single";

// Check if there are new jobs
      if (jobs_diff > 0) {
        // If there are more than 9 new jobs, display "9+"
        if (jobs_diff > 9) {
          jobs_diff = '9+';
          unviewed_number = 'unviewed--double';
        }

// Add the appropriate CSS class and append the new job count to the jobs link element
        $('.masthead__link--jobs').addClass(unviewed_number).append('<span class="unviewed">'+jobs_diff+'</span>');
      }
    }

// Call the checkJobsDiff function to check for new jobs
    checkJobsDiff();

})();
</script>

</div>

</body>
</html>