<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 class="divider">
	{{> @divider-toggle }}
	This is content in a divider added with divider-before
/* No context defined for this component. */
  • 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.