Divider

<!-- Default -->
<div class="divider">
    <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is content in a divider added with divider-before
</div>

<!-- Collapsed -->
<div class="divider divider-collapsed">
    <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is a collapsed divider
</div>

<!-- H 2 -->
<h2 class="divider">
    <div>
        <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is an item divider added by Perch
    </div>
</h2>

<!-- With Action -->
<h2 class="divider">
    <div>
        <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is an item divider added by Perch
    </div>
    <a class="button button-small action-alert" href="/foo">Submit</a>

</h2>

<!-- Default -->
<div class="divider">
	{{> @divider-toggle }}
	This is content in a divider added with divider-before
</div>

<!-- Collapsed -->
<div class="divider divider-collapsed">
	{{> @divider-toggle }}
	This is a collapsed divider
</div>

<!-- H 2 -->
<h2 class="divider">
	<div>
		{{> @divider-toggle }}
		This is an item divider added by Perch
	</div>
</h2>

<!-- With Action -->
<h2 class="divider">
	<div>
		{{> @divider-toggle }}
		This is an item divider added by Perch 
	</div>
	{{ render '@button-small--a-alert' }}
</h2>
/* Default: No context defined */

/* Collapsed: No context defined */

/* H 2: No context defined */

/* With Action: No context defined */

  • Content:
    .divider {
    	background-color: palette(ui,panel);
    	padding: 0.4em $half-gutter;
    	@include font-scale(m, helvetica);
    	color: palette(type, base);
    	font-weight: 500;
    	margin: 0 $main-gutter $half-gutter $main-gutter;
    	margin-top: $half-gutter;
    }
    
    h2.divider {
    	padding-left: $half-gutter;
    	padding-right: $half-gutter;
    	margin: 0 $main-gutter $half-gutter $main-gutter;
    	line-height: 1.5rem;
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    }
    
    .divider .button {
      @include font-scale(s, helvetica);
      line-height: .8rem;
    }
    
    .divider-toggle {
    	margin-left: 3px;
    	margin-right: 10px;
    	vertical-align: middle;
    }
    
    .divider-toggle svg {
    	fill: palette(ui, darker);
    	transition-duration: 0.2s;
    }
    
    .divider-collapsed .divider-toggle svg {
    	transform: rotate(-90deg);
    }
    
    .js .divider div {
    	cursor: pointer;
    }
  • URL: /components/raw/divider/divider.scss
  • Filesystem Path: src/components/12-forms/02-molecules/13-divider/divider.scss
  • Size: 821 Bytes

There are no notes for this item.