Cant Stop Houston Component Library

Context: Small 

<div class="context context--small context--align-left context--default">
      <div class="context__subheading">The primary building block of any site is type.</div>
      <h2 class="context__heading">This is a context block.</h2>
      <p>With classrooms brimming with so much experience they could double as board rooms, access to leading healthcare provider in the Carolinas a few blocks away, and sell out shows and renowned guest speakers routinely bringing all of Charlotte to QUC, there's only one thing we're missing: You.</p>
  </div>
 
{% if in_component_library %}
  {% set buttonGroup = '@button-group' %}
{% else %}
  {% set buttonGroup = 'button-group.twig' %}
{% endif %}

<div class="context context--{{ size|default('medium') }} context--align-{{ align|default('left') }} context--{{ type|default('default') }}">
  {% if subheading %}<div class="context__subheading">{{ subheading }}</div>{% endif %}
  {% if heading %}<h2 class="context__heading">{{ heading }}</h2>{% endif %}
  {{ paragraphs|raw }}
  {% if buttons %}
    {% include buttonGroup with buttons %}
  {% endif %}
</div>
 
{
  "in_component_library": true,
  "heading": "This is a context block.",
  "subheading": "The primary building block of any site is type.",
  "paragraphs": "<p>With classrooms brimming with so much experience they could double as board rooms, access to leading healthcare provider in the Carolinas a few blocks away, and sell out shows and renowned guest speakers routinely bringing all of Charlotte to QUC, there's only one thing we're missing: You.</p>",
  "button": {
    "title": "Call to Action",
    "url": "https://welcometruth.com/"
  },
  "size": "small"
}
  • Content: 
    .context {

  &--hero {
    .context__heading {
      @extend .heading-style-1;
    }

    .context__subheading {
      @extend .subheading-style-1;
    }

    p {
      @extend .paragraph-style-2;
    }
  }

  &--large {
    .context__heading {
      @extend .heading-style-1;
    }

    .context__subheading {
      @extend .subheading-style-1;
    }

    p {
      @extend .paragraph-style-1;
    }
  }

  &--medium {
    .context__heading {
      @extend .heading-style-2;
    }

    .context__subheading {
      @extend .subheading-style-1;

      display: inline-block;
      border-bottom: 2px solid $red;
    }

    p {
      @extend .paragraph-style-2;
    }
  }

  &--small {
    .context__heading {
      @extend .heading-style-3;
    }

    .context__subheading {
      @extend .subheading-style-1;
    }

    p {
      @extend .paragraph-style-2;
    }
  }

  &--align-center {
    text-align: center;
    justify-content: center;
  }

  &__heading,
  &__subheading,
  p {
    .background--red &,
    .background--black &,
    .background--gray & {
      color: $white;
    }
  }

  &__subheading {
    .background--red & {
      border-color: $black;
    }
  }

  &--light {
    color: $white;
  }
}
  • URL: /components/raw/context/_context.scss
  • Filesystem Path: src/twig/components/context/_context.scss
  • Size: 1.2 KB

No notes defined.

©