Davidson Styleguide

Editorial: Aside Left 

<div class="editorial editorial--aside-center">
    <aside>
        <div class="block ">
            <div class="block__header">
                <div class="section-intro">
                    <h2 class="headline-group ">

                        <span class="headline-group__head">Headline</span>
                        <span class="headline-group__sub">Optional Subhead</span>
                    </h2>

                    <p class="intro">
                        Intro text is larger than standard paragraph text and should be pretty short.
                    </p>
                </div>
            </div>
            <div class="block__content">
                <div class="nc-placeholder ">
                    <p>Placeholder</p>
                </div>
            </div>
            <div class="block__footer">
                <a href="http://www.example.com/" class="link--fancy">Default Link Text</a>
            </div>
        </div>
    </aside>

    <div class="editorial__content">
        <h2 class="headline-group ">

            <span class="headline-group__head">This is a headline in the editorial context.</span>

        </h2>

        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
    </div>
</div>
 
<div class="editorial {{ editorial.variant }}">
	{% if block is not empty %}
		<aside>
			{% include '@block' %}
		</aside>
	{% endif %}

	<div class="editorial__content">
		{% block editorial_content %}
			{% include '@headline-group' %}
			{% for i in 0 .. 2 %}
				{% include '@p' %}
			{% endfor %}
		{% endblock %}
	</div>	
</div>
 
{
  "editorial": {
    "variant": "editorial--aside-center"
  },
  "block": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline",
        "sub": "Optional Subhead",
        "tag": "h2"
      },
      "p": {
        "content": "Intro text is larger than standard paragraph text and should be pretty short.",
        "variant": "intro"
      },
      "link": null
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy"
    }
  },
  "p": {
    "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
  },
  "hg": {
    "headline": "This is a headline in the editorial context.",
    "tag": "h2"
  }
}
  • Content: 
    .editorial {
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }

  &::after {
    display: block;
    clear: both;
    content: '';
  }

  aside {
    margin-bottom: 2rem;
  }
}

@include rr-break-directive(m) {
  .editorial--aside-right {
    aside {
      width: 20rem;
      max-width: 60%;
      margin: 0 0 2rem rem(40px);
      float: right;
    }
  }

  .editorial--aside-left {
    aside {
      width: 20rem;
      max-width: 60%;
      margin: 0 rem(40px) 2rem 0;
      float: left;
    }
  }

  .editorial--aside-right,
  .editorial--aside-left {
    aside {
      figure,
      figure.paragraph {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
  }
}

.editorial__content {
  ul,
  ol {
    li {
      @include rr-font-compute(r, medium);
      margin-bottom: .5rem;

      &.loose {
        margin-bottom: 1rem;
      }
    }
  }

  ul {
    list-style-type: disc;

    &.clean,
    &.piped {
      list-style: none;
    }
  }

  ol {
    list-style-type: decimal;

    &.clean,
    &.piped {
      list-style: none;
    }

    ol {
      list-style-type: upper-roman;

      ol {
        list-style-type: upper-alpha;

        ol {
          list-style-type: lower-roman;

          ol {
            list-style-type: lower-alpha;

            ol {
              list-style-type: lower-greek;
            }
          }
        }
      }
    }
  }

  p + h2 {
    margin-top: rem(50px);
  }
  p + h3,
  p + h4,
  p + h5,
  p + h6 {
    margin-top: rem(30px);
  }
}
  • URL: /components/raw/editorial/editorial.scss
  • Filesystem Path: patterns/molecules/layouts/editorial/editorial.scss
  • Size: 1.5 KB

Editorial blocks are for large pieces of editorial text with an optional structured content block centered above the text or floated to the left or right of the text. This layout keeps the editorial content separate from the floated block, which keeps the editorial content largely clean of presentational interruption.

Because content is floated, or inset, into the editorial block, this is not a multi-column layout. In addition, block position is controlled on the wrapping container, not the floated container.