There are no notes for this item.

<div class="help-block box-no-icon">
  {% include '@heading' with {
    'type': 'h2',
    'heading_text': 'How can we help you further?'
  } %}

  <div class="help-block-section">
    {% include '@heading' with {
      'type': 'h3',
      'heading_text': '1. Maybe you were looking for this?'
    } %}
    {% include '@link' with {
      'link': 'javascript:(void);',
      'text': 'Filip Watteeuw',
      'modifier': 'standalone-link'
    } %}
    {% include '@paragraph' with {
      'text': 'Donec condimentum morbi et mollis ultrices eleifend a montes ante ad morbi est ad eleifend ullamcorper. Sapien tristique lectus integer ac condimentum orci nunc quisque',
    } %}
    {% include '@link' with {
      'link': 'javascript:(void);',
      'text': 'This is another link',
      'modifier': 'standalone-link'
    } %}
    {% include '@paragraph' with {
    'text': 'Donec condimentum morbi et mollis ultrices eleifend a montes ante ad morbi est ad eleifend ullamcorper.',
    } %}
    {% include '@link' with {
      'link': 'javascript:(void);',
      'text': 'And a third link',
      'modifier': 'standalone-link'
    } %}
    {% include '@paragraph' with {
    'text': 'Donec condimentum morbi et mollis ultrices eleifend a montes ante ad morbi est ad eleifend ullamcorper. Sapien tristique lectus integer ac condimentum orci nunc quisque',
    } %}
  </div>

  <div class="help-block-section">
    {% include '@heading' with {
      'type': 'h3',
      'heading_text': '2. Try to find the page through our search function:'
    } %}
    {% include '@search' with {
      'text': 'Search!',
      'for': 'search_field_403',
      'search_id': 'search_field_403'
    } %}
  </div>

  <div class="help-block-section">
    {% include '@heading' with {
      'type': 'h3',
      'heading_text': '3. Continue to navigate from here?'
    } %}
    {% include '@paragraph' with {
      'text': 'This can be done in several ways:',
    } %}
    {% include '@list' with {
      'type': 'icon-list',
      'icon_items': [
        '<i class="icon-home" aria-hidden="true"></i><span>Return to the <a href="javascript:(void);" alt="Homepage">homepage</a></span>',
        '<i class="icon-fancyback" aria-hidden="true"></i><span>Use the back button of your browser</span>'
      ]
    } %}
  </div>
</div>
<div class="help-block box-no-icon">
    <h2>How can we help you further?</h2>

    <div class="help-block-section">
        <h3>1. Maybe you were looking for this?</h3>
        <a href='javascript:(void);' class="standalone-link">
            Filip Watteeuw</a>
        <p class="">Donec condimentum morbi et mollis ultrices eleifend a montes ante ad morbi est ad eleifend ullamcorper. Sapien tristique lectus integer ac condimentum orci nunc quisque</p>
        <a href='javascript:(void);' class="standalone-link">
            This is another link</a>
        <p class="">Donec condimentum morbi et mollis ultrices eleifend a montes ante ad morbi est ad eleifend ullamcorper.</p>
        <a href='javascript:(void);' class="standalone-link">
            And a third link</a>
        <p class="">Donec condimentum morbi et mollis ultrices eleifend a montes ante ad morbi est ad eleifend ullamcorper. Sapien tristique lectus integer ac condimentum orci nunc quisque</p>
    </div>

    <div class="help-block-section">
        <h3>2. Try to find the page through our search function:</h3>
        <form class="form search">

            <input type="search" id="search_field_403" name="search_field_403" class="search" required="true" />
            <input type="submit" value="Search!" class="" />
        </form>
    </div>

    <div class="help-block-section">
        <h3>3. Continue to navigate from here?</h3>
        <p class="">This can be done in several ways:</p>

        <ul class="icon-list ">
            <li><i class="icon-home" aria-hidden="true"></i><span>Return to the <a href="javascript:(void);" alt="Homepage">homepage</a></span></li>
            <li><i class="icon-fancyback" aria-hidden="true"></i><span>Use the back button of your browser</span></li>
        </ul>

    </div>
</div>
/* No context defined for this component. */
  • Content:
    .help-block {
      @include theme('background-color', 'color-primary--lighten-5', 'search-block-background');
    
      margin-bottom: 2rem;
      padding: 2rem calc(#{$gutter-width} / 2);
    
      ul {
        margin: 0;
        list-style-type: none;
    
        @include tablet {
          margin-left: auto;
        }
    
        li {
          position: relative;
          margin-bottom: .5rem;
          line-height: 1.8;
    
          &,
          > * {
            font-size: .8rem;
          }
        }
      }
    
      &-section {
        max-width: $six-of-bp-container;
        margin-right: auto;
        margin-bottom: 2rem;
    
        &:last-of-type {
          margin: 0;
        }
      }
    
      .search {
        @include desktop {
          width: span(7 of 9);
        }
      }
    }
    
  • URL: /components/raw/help-block/_help-block.scss
  • Filesystem Path: components/41-organisms/help-block/_help-block.scss
  • Size: 658 Bytes