| <style> | |
| :host { | |
| display: flex; | |
| flex-direction: column; | |
| outline: none; | |
| position: relative; | |
| } | |
| #header .title { | |
| color: var(--cr-primary-text-color); | |
| font-size: 108%; | |
| font-weight: 400; | |
| letter-spacing: .25px; | |
| margin-bottom: 12px; | |
| margin-top: var(--cr-section-vertical-margin); | |
| outline: none; | |
| padding-bottom: 4px; | |
| padding-top: 8px; | |
| } | |
| :host(:not(.expanded)) #card { | |
| background-color: var(--cr-card-background-color); | |
| border-radius: var(--cr-card-border-radius); | |
| box-shadow: var(--cr-card-shadow); | |
| flex: 1; | |
| } | |
| :host([hidden-by-search]) { | |
| display: none; | |
| } | |
| </style> | |
| <div id="header"> | |
| <h2 class="title" tabindex="-1" | |
| aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2> | |
| </div> | |
| <div id="card"> | |
| <slot></slot> | |
| </div> |