Content panel

A content area with a white background. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.

HTML

    
<div class="content-panel">
  
      <p><b>A content area with a white background.</b> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    
</div>

SCSS

    .hideable-panel {
  position: relative;
  margin: 0 -24px 28px;
  background-color: $white;
  border: 1px solid $coral;
  padding: 48px 24px;

  .hideable-panel__close {
    position: absolute;
    display: inline-block;
    top: 16px;
    right: 16px;
    height: 40px;
    width: 40px;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
    z-index: 10;

    &:hover {
      opacity: 0.7;
    }
  }

  &.closed {
    display: none;
  }



  .user-bar ~ & {
    margin-top: -28px;
  }
}

Connect Dementia Research

Pattern Library

Content panel

HTML

SCSS