FAA Pattern Library - Network

Page Content With Related 

<div class="page-content-with-related">
    <div class="page-content-with-related__container">
        <div class="page-content-with-related__content">
            <div class="page-content-with-related__primary">
            </div>
            <div class="page-content-with-related__related">
            </div>
        </div>
    </div>
</div>
 
<div class="page-content-with-related">
    <div class="page-content-with-related__container">
        <div class="page-content-with-related__content">
            <div class="page-content-with-related__primary">
               {% block primary %}{% endblock %}
            </div>
            <div class="page-content-with-related__related">
                {% block related %}{% endblock %}
            </div>
        </div>
    </div>
</div>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light"
}
  • Content: 
    .page-content-with-related
    full = 1000px
    medium = 800px
    small = 600px
    background-color cloudDark
    padding-top 64px
    padding-bottom 160px
    &__container
        @extends $contentContainer
    &__content
        +above(medium)
            display flex
    &__primary
        flex 1
        +below(medium)
            padding-bottom 64px
    &__related
        flex 0 0 24%
        min-width 240px
        margin-bottom 16px
        +above(medium)
            margin-left 10%
        +between(small, medium)
            display grid
            grid-column-gap 16px
            grid-template-columns 1fr 1fr
  • URL: /components/raw/page-content-with-related/page-content-with-related.styl
  • Filesystem Path: components/templates/page-content-with-related/page-content-with-related.styl
  • Size: 629 Bytes
  • Handle: @page-content-with-related
  • Preview:
  • Filesystem Path: components/templates/page-content-with-related/page-content-with-related.twig

There are no notes for this item.