IRMA

Commercials 

<div class="section-header -nav-padded">
    <div class="inner" data-col="5">
        <div data-span="3" class="header-text">
            <div class="breadcrumbs">
                <ul class="nav-list">
                    <li class="list-item">
                        <a class="link" href="commercials">Commercials</a>
                    </li>
                    <li class="list-item">
                        Funding
                    </li>
                </ul>
            </div>

            <h1>
                <div class="text">Funding</div>
            </h1>
        </div>

        <div class="pill">
            <button class="btn pill-section pill-label" data-action="add-record">
				<span class="text">Add record</span>
			</button>

            <div role="button" class="btn pill-section pill-icon dropdown js-dropdown" data-role="actions" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
                <div class="icon svg-wrap">
                    <svg viewBox="0 0 25 25">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
					</svg>
                </div>
                <div class="dropdown-options" aria-hidden="true">
                    <div class="dropdown-subheading">Funding Body Actions</div>
                    <ul>
                        <li class="btn dropdown-item js-page-action" data-action="add" role="menuitem">
                            <span class="link link-strong">Add a New Funding Body</span>
                        </li>
                    </ul>
                    <div class="dropdown-subheading">Custom GUI</div>
                    <ul>
                        <li class="btn dropdown-item js-page-action" data-action="gui-select" role="menuitem">
                            <span class="link link-strong">Select custom GUI</span>
                        </li>
                        <li class="btn dropdown-item js-page-action" data-action="gui-update" role="menuitem">
                            <span class="link link-strong">Update current GUI</span>
                        </li>
                        <li class="btn dropdown-item js-page-action" data-action="gui-new" role="menuitem">
                            <span class="link link-strong">Create new GUI</span>
                        </li>
                    </ul>
                    <div class="dropdown-subheading">Exporting</div>
                    <ul>
                        <li class="btn dropdown-item js-page-action" data-action="export-csv" role="menuitem">
                            <span class="link link-strong">Export results to CSV</span>
                        </li>
                        <li class="btn dropdown-item js-page-action" data-action="export-xml" role="menuitem">
                            <span class="link link-strong">Export results to XML</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="secondary-nav" data-nav-type="">
    <div class="inner">
        <ul class="nav-list">
            <li class="list-item -active">
                <a href="commercials--funding" title="pageTitle" tabindex="-1">Funding</a>
            </li>
            <li class="list-item ">
                <a href="commercials--contracts" title="pageTitle">Contracts</a>
            </li>
            <li class="list-item ">
                <a href="commercials--intellectual-property" title="pageTitle">Intellectual Property</a>
            </li>
        </ul>

        <button type="button" class="btn btn-more js-hidden-nav js-btn-modal" data-modal="secondary-nav">
				<svg viewBox="0 0 50 50">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-ellipsis"></use>
				</svg>
			</button>

        <div class="secondary-nav-modal js-modal" data-modal="secondary-nav">
            <div class="secondary-modal-inner">
                <ul class="modal-list">

                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="section-header -nav-padded">
	<div class="inner" data-col="5">
		<div data-span="3" class="header-text">
			<div class="breadcrumbs">
				<ul class="nav-list">
					<li class="list-item">
						<a class="link" href="{{ @root.basePath }}{{ pageClass }}{{ @root.baseExtension }}">{{ baseTitle }}</a>
					</li>
					<li class="list-item">
						{{ pageTitle }}
					</li>
				</ul>
			</div>

			<h1>
				<div class="text">{{ pageTitle }}</div>
			</h1>
		</div>

		{{> @dropdown--actions }}
	</div>
</div>

{{#if pageSections }}
	{{> @secondary-nav }}
{{/if}}
 
{
  "pageTitle": "Funding",
  "pageClass": "commercials",
  "baseTitle": "Commercials",
  "pageSections": [
    {
      "title": "Funding",
      "slug": "funding"
    },
    {
      "title": "Contracts",
      "slug": "contracts"
    },
    {
      "title": "Intellectual Property",
      "slug": "intellectual-property"
    }
  ],
  "pageActions": [
    {
      "section": "Funding Body Actions",
      "actions": [
        {
          "title": "Add a New Funding Body",
          "name": "add"
        }
      ]
    },
    {
      "section": "Custom GUI",
      "actions": [
        {
          "title": "Select custom GUI",
          "name": "gui-select"
        },
        {
          "title": "Update current GUI",
          "name": "gui-update"
        },
        {
          "title": "Create new GUI",
          "name": "gui-new"
        }
      ]
    },
    {
      "section": "Exporting",
      "actions": [
        {
          "title": "Export results to CSV",
          "name": "export-csv"
        },
        {
          "title": "Export results to XML",
          "name": "export-xml"
        }
      ]
    }
  ]
}
  • Content: 
    .section-header {
	width: 100%;
	height: 25rem;

	background: white;
	color: $color-irma-slate;
	box-shadow: 0 0 10px 0 rgba(black, 0.075);

	.page-container & {
		position: fixed;
		top: 20rem;
		z-index: 10;
		transform: rotateZ(0);
	}

	.inner {
		position: relative;

		height: 100%;

		h1 {
			margin: 0;
			padding: 0;
		}
	}

	.header-text {
		display: flex;
		flex-direction: column;
		justify-content: center;

		h1 {
			margin-top: 1rem;
		}
	}

	.pill {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.breadcrumbs {
	height: 4.5rem;

	.list-item {
		display: inline-block;

		&:not(:first-child) {
			margin-left: 2rem;

			&::before {
				content: '>';

				margin-right: 1.75rem;
			}
		}
	}
}
  • URL: /components/raw/section-header/_section-header.scss
  • Filesystem Path: components/02-sections/section-header/_section-header.scss
  • Size: 742 Bytes

There are no notes for this item.