Academy of Natural Sciences

Column Panel 

<div class="o-column-panel " data-bkg-theme="base">
    <div class="o-container">
        <div class="o-row">
            <div class="o-column-panel__header o-col o-col-sm-md-4">
                <div class="o-column-panel__header-content">
                    <h2 class="o-column-panel__title f-title--h3">Column Panel</h2>

                    <div class="o-column-panel__description f-text--reg">
                        <p>Optional description. Set content in this object to reuse the layout.</p>
                    </div>

                    <div class="o-column-panel__cta f-text--reg">
                        <a href="#" class="o-column-panel__cta-link o-btn o-btn--primary">Optional CTA</a>
                    </div>

                </div>
            </div>

            <div class="o-column-panel__content o-col o-col-sm-md-7 o-col-sm-md--offset-1">

                <p>Content goes here!</p>

            </div>
        </div>
    </div>
</div>
 
{% set panelColorTheme = panelColorTheme is defined ? panelColorTheme : 'base' %}
{% set idAttr = id is defined and id ? 'id="' ~ id ~ '"' : '' %}
{% set mainOffset = removeOffset is defined ? 'o-col-sm-md-8' : 'o-col-sm-md-7 o-col-sm-md--offset-1' %}
{% set classes = collapsePadding is defined ? classes ~ ' o-column-panel--collapsed' : classes %}
{% set hTag = hTag is defined ? hTag : "h2" %}

<div {{ idAttr }} class="o-column-panel {{ classes }}" data-bkg-theme="{{ panelColorTheme }}">
  <div class="o-container">
    <div class="o-row">
      <div class="o-column-panel__header o-col o-col-sm-md-4">
        <div class="o-column-panel__header-content">
          <{{ hTag }} class="o-column-panel__title f-title--h3">{{ title }}</{{ hTag }}>
          {% if description %}
            <div class="o-column-panel__description f-text--reg">
              {{ description|raw }}
            </div>
          {% endif %}
          {% if ctaLink %}
            <div class="o-column-panel__cta f-text--reg">
              <a href="{{ ctaLink }}" class="o-column-panel__cta-link o-btn o-btn--primary">{{ ctaTitle }}</a>
            </div>
          {% endif %}
        </div>
      </div>

			<div class="o-column-panel__content o-col {{ mainOffset }}">
				{% block content %}
					<p>Content goes here!</p>
				{% endblock %}
			</div>
		</div>
	</div>
</div>
 
{
  "pageColorTheme": "teal",
  "title": "Column Panel",
  "description": "<p>Optional description. Set content in this object to reuse the layout.</p>",
  "ctaLink": "#",
  "ctaTitle": "Optional CTA"
}
  • Content: 
    .o-column-panel {
  padding: 10rem 0;

  .o-row {
    position: relative;
  }
}

.o-column-panel__header {
  margin-bottom: 4.8rem;

  @include break($sm-md) {
    margin-bottom: 0;
    position: relative;
  }
}

.o-column-panel__header-content {

  @include break($sm-md) {
    position: sticky;
    top: 3rem;
    bottom: 3rem;
  }
}

.o-column-panel__title {
  hyphens: auto;
}

.o-column-panel__description {
  margin-top: 0.8rem;

  @include break($sm-md) {
    margin-top: 2.4rem;
  }
}

.o-column-panel__cta {
  margin-top: 2.4rem;

  @include break($sm-md) {
    margin-top: 4rem;
  }
}

.o-column-panel--collapsed {

  &:not(:last-child) {
    padding-bottom: 4rem;
  }

  & + .o-column-panel--collapsed {
    padding-top: 0;
  }
}
  • URL: /components/raw/column-panel/column-panel.scss
  • Filesystem Path: patterns\04-objects\column-panel\column-panel.scss
  • Size: 797 Bytes

No notes defined.