Campus News Block Styling

[kevincrafts]

The campus news block should be able to have styles like the other blocks, so if they are added to a page together they can have similar displays.

[timurtripp]

The Campus News block was built completely differently from our other blocks due to the unique challenge of the configuration form connecting to CU Boulder Today to pull in the available filters. We'll need to discuss the feasibility and importance of doing this.

[jnicholCU]

Block Styles (Tab):



Icon Settings: (Accordion)

Icon (allowed options)

• fa-ICONNAME
• fa-solid/regular/brands

Icon Position (Select option : class)

• Default : bs-icon-position-default
• Offset : bs-icon-position-offset
• Top : bs-icon-position-top

Icon Color (Select option : class)

• Default : bs-icon-color-default
• Gray : bs-icon-color-gray
• Gold : bs-icon-color-gold
• Blue : bs-icon-color-blue
• Green : bs-icon-color-green
• Orange : bs-icon-color-orange
• Purple : bs-icon-color-purple
• Red : bs-icon-color-red
• Yellow : bs-icon-color-yellow

Icon Size (Select option : class)

• Default : bs-icon-size-default
• Increase : bs-icon-size-increase

Block Heading: (Accordion)

Heading (Select option : tag)

• Default (H2) : <h2>
• H3 : <h3>
• H4 : <h4>
• H5 : <h5>
• H6 : <h6>
• Strong : <strong>

Heading Alignment (Select option : class)

• Default : bs-heading-align-default
• Centered : bs-heading-align-centered

Heading Style (Select option : class)

• Default : bs-heading-style-default
• Hero : hero
• Hero Bold : hero strong
• Supersize : supersize
• Supersize Bold : supersize bold

Block Style: (Accordion)

Background Style (Select option : class)

• None : bs-background-unstyled bs-background-none
• White : bs-background-styled bs-background-white
• Light Gray : bs-background-styled bs-background-gray
• Dark Gray : bs-background-styled bs-background-dark-gray
• Tan : bs-background-styled bs-background-tan
• Light Blue : bs-background-styled bs-background-light-blue
• Medium Blue : bs-background-styled bs-background-medium-blue
• Dark Blue : bs-background-styled bs-background-dark-blue
• Light Green : bs-background-styled bs-background-light-green
• Brick : bs-background-styled bs-background-brick
• Outline : bs-background-styled bs-background-outline
• Underline : bs-background-styled bs-background-underline

Block Typography: (Accordion)

Title Font Scale (Select option : class)

• Default : bs-title-scale-default
• Increase : bs-title-scale-increase
• Decrease : bs-title-scale-decrease

Content Font Scale (Select option : class)

• Default : bs-content-scale-default
• Increase : bs-content-scale-increase
• Decrease : bs-content-scale-decrease

[jnicholCU]

This is the basic html layout for those classes

<div class="{{attributes}} {{Title Font Scale}} {{Content Font Scale}} {{Icon Position}} {{Heading Alignment}} ">
  {{ title_prefix }}
  {% if label %}
    <div class="block-title-outer">
      <{{Heading Tag}}{{title_attributes}} class="block-title {{ Heading Style }}">
        <span class='block-title-icon {{ Icon Color }} {{ Icon Position }} {{ Icon Size }}'>
          {{ FONT AWESOME ICON }}
        </span>
        <span class="block-title-text">
          {{ label }}
        </span>
      </{{Heading Tag}}>
    </div>
  {% endif %}
  {{ title_suffix }}
  <div class="text-block-body block-content">
    {{ content.field_text_block_body }}
  </div>
</div>