City of Ghent Style Guide

Feature block

When to use this component

This block is used indirectly in other components. The block is typically colored in the primary or secondary color.

How it works

The block consists of:

  • A title
  • Any kind of content
{% if heading_type is empty %}
  {% set heading_type = 'h2' %}
{% endif %}

<div class="feature-block {{ modifier }}">
  {% if title %}
    {% include '@heading' with {
      'heading': heading_type,
      'heading_text': title
    } %}
  {% endif %}

  {% if content %}
    {% include '@paragraph' with {
      'text': content
    } %}
  {% endif %}
</div>
<div class="feature-block secondary">
    <h1>This is the title</h1>

    <p>Any variety of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
{
  "modifier": "secondary",
  "title": "This is the title",
  "heading_type": "h1",
  "content": "Any variety of content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
}
  • Content:
    .feature-block {
      @include theme('color', 'color-none', 'feature-block-primary-color');
      @include theme('background-color', 'color-primary', 'feature-block-primary-background-color');
      @include large-text();
    
      padding: 30px;
    
      @include tablet {
        padding: 60px;
      }
    
      h2,
      h3 {
        @include theme('color', 'color-none', 'feature-block-primary-color');
    
        margin-bottom: 20px;
      }
    
      > :first-child {
        margin-top: 0;
      }
    
      > :last-child {
        margin-bottom: 0;
      }
    
      &.secondary {
        @include theme('color', 'color-zero', 'feature-block-secondary-color');
        @include theme('background-color', 'color-secondary', 'feature-block-secondary-background-color');
    
        h2,
        h3 {
          @include theme('color', 'color-zero', 'feature-block-secondary-color');
        }
      }
    }
    
  • URL: /components/raw/feature-block/_feature-block.scss
  • Filesystem Path: components/31-molecules/feature-block/_feature-block.scss
  • Size: 783 Bytes