<!-- Default -->
<header class="title-panel">
    <h1>Listing all your things</h1>
    <div class="buttons">
        <a href="/foo" class="button button-icon  icon-left">
            <div>
                <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
                <span>Submit</span>
            </div>
        </a>

    </div>
</header>

<!-- Notification -->
<header class="title-panel">
    <h1>Listing all your things</h1>
    <div class="notifications">
        <div role="alert" class="notification notification-info">
            <svg width="12" height="12" class="icon icon-user"><use xlink:href="/assets/svg/core.svg#user" /></svg> Patrick is also editing here
        </div>
    </div>
    <div class="buttons">
        <a href="/foo" class="button button-icon  icon-left">
            <div>
                <svg width="10" height="10" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg>
                <span>Submit</span>
            </div>
        </a>

    </div>
</header>

<!-- Default -->
<header class="title-panel">
	<h1>Listing all your things</h1>
	<div class="buttons">
	{{ render '@button-icon--a-left' }}
	</div>
</header>

<!-- Notification -->
<header class="title-panel">
	<h1>Listing all your things</h1>
	{{ render '@heading-notification' }}
	<div class="buttons">
	{{ render '@button-icon--a-left' }}
	</div>
</header>
/* Default: No context defined */

/* Notification: No context defined */

  • Content:
    /*
    .title-panel {
    	padding: $main-gutter;
    	padding-bottom: 0;
    	@include clearfix-micro;
    }
    
    
    @include media(">bp-s")  {
    
    	.title-panel h1 {
    	  float: left;
    		width: 70%;
    	}
    
    	.title-panel .buttons {
    		float: right;
    		width: 25%;
    		text-align: right;
    		margin-top: 5px;
    	}
    
    }
    */
    
    
    .title-panel {
    	padding: $main-gutter;
    	padding-bottom: 0;
    }
    
    @include media(">bp-s")  {
    
    	.title-panel {
    		display: flex;
    		justify-content: space-between;
    	}
    
    	.title-panel h1 {
    		margin-right: auto;
    	}
    
    	.title-panel .buttons {
    		text-align: right;
    		margin-top: 5px;
    	}
    
    	.title-panel .notifications {
    		text-align: right;
    		margin-top: 5px;
    	}
    
    }
    
  • URL: /components/raw/page-head/page-head.scss
  • Filesystem Path: src/components/30-layout/02-molecules/04-page-head/page-head.scss
  • Size: 631 Bytes

There are no notes for this item.