<div class="page-wrapper">
<aside class="page-nav">
<button class="icon-close btn-borderless p-0 close-nav" data-overlay-close>
Lukk meny
</button>
<ul class="list-reset list-md">
<li>
<a class="icon-account-circle " href="/components/preview/page-profile">Min profil</a>
</li>
<li>
<a class="icon-people is-active" href="/components/preview/page-members">Medlemmer</a>
</li>
<li>
<a class="icon-calendar-today " href="">Aktiviteter</a>
</li>
<li>
<a class="icon-person " href="">Likeperson</a>
</li>
<li>
<a class="icon-arrow-forward " href="">Logg inn</a>
</li>
<li>
<a class="icon-arrow-back " href="">Logg ut</a>
</li>
</ul>
</aside>
<main class="page-main">
<header class="page-header">
<div class="container">
<div class="row">
<div class="logo-group">
<button class="btn-icon btn-borderless toggle-nav" data-toggle-selector=".page-nav" data-toggle-class="is-open" data-overlay-selector=".page-nav" data-overlay-class="is-open">
<span class="icon-menu"></span>
<span class="visually-hidden">Toggle navigation</span>
</button>
<a href="/" class="block">
<svg class="logo">
<use xlink:href="/svg/spritemap.svg#logo-barnekreftforeningen"></use>
</svg>
<span class="visually-hidden">Barnekreftforeningen</span>
</a>
</div>
<span class="text-sm color-dark-grey icon-account-circle">Ola Nordmann</span>
</div>
</div>
</header>
<div class="page-body">
<div class="container">
<div class="row">
<div class="grid-base">
<div class="grid-item-two-third">
<header class="section-header">
<h1>Medlemmer</h1>
</header>
<p class="text-lg">Det er totalt 204 medlemmer i Østfold.</p>
<p>Her kan du:</p>
<ul>
<li>Filtrere medlemmene etter barnets status.</li>
<li>Kopier e-postadresser for utsending av informasjon og tilbud.</li>
<li>Finne enkeltmedlem for direkte kontakt.</li>
<li>Se nye medlemmer og betalingsstatus.</li>
</ul>
</div>
<div class="grid-item-full">
<div>
<form class="webform-submission-form" action="" method="post" accept-charset="UTF-8">
<div class="webform-flexbox form-wrapper" id="edit-members-filter">
<div class="webform-flex webform-flex--1">
<div class="webform-flex--container">
<fieldset id="edit-child-status--wrapper" class="checkboxes--wrapper fieldgroup form-composite webform-composite-visible-title webform-type-checkboxes form-item form-wrapper">
<legend>
<span class="fieldset-legend">Barnets status</span>
</legend>
<div class="fieldset-wrapper">
<div id="edit-child-status" class="webform-options-display-one-column form-checkboxes">
<div class="form-item form-type-checkbox form-item-under-treatment">
<input type="checkbox" id="edit-under-treatment" name="under-treatment" class="form-checkbox" />
<label for="edit-under-treatment">
Under behandling
</label>
</div>
<div class="form-item form-type-checkbox form-item-after-treatment">
<input type="checkbox" id="edit-after-treatment" name="after-treatment" class="form-checkbox" checked />
<label for="edit-after-treatment">
Etter behandling
</label>
</div>
<div class="webform-flexbox form-wrapper" id="edit-after-treatment-date-range">
<div class="webform-flex webform-flex--1">
<div class="webform-flex--container">
<div class="form-item form-type-date form-item-after-treatment-date-from">
<label for="edit-after-treatment-date-from">
Fra:
</label>
<input type="date" id="edit-after-treatment-date-from" name="after-treatment-date-from" class="form-date" />
</div>
</div>
</div>
<div class="webform-flex webform-flex--1">
<div class="webform-flex--container">
<div class="form-item form-type-date form-item-after-treatment-date-to">
<label for="edit-after-treatment-date-to">
Til:
</label>
<input type="date" id="edit-after-treatment-date-to" name="after-treatment-date-to" class="form-date" />
</div>
</div>
</div>
</div>
<div class="form-item form-type-checkbox form-item-deceased">
<input type="checkbox" id="edit-deceased" name="deceased" class="form-checkbox" />
<label for="edit-deceased">
Mistet barn
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="webform-flex webform-flex--1">
<div class="webform-flex--container">
<fieldset id="edit-members-typ--wrapper" class="checkboxes--wrapper fieldgroup form-composite webform-composite-visible-title webform-type-checkboxes form-item form-wrapper">
<legend>
<span class="fieldset-legend">Medlemsskap</span>
</legend>
<div class="fieldset-wrapper">
<div id="edit-members-typ" class="webform-options-display-one-column form-checkboxes">
<div class="form-item form-type-checkbox form-item-membership-family">
<input type="checkbox" id="edit-membership-family" name="membership-family" class="form-checkbox" />
<label for="edit-membership-family">
Familiemedlemskap
</label>
</div>
<div class="form-item form-type-checkbox form-item-membership-family-0-12">
<input type="checkbox" id="edit-membership-family-0-12" name="membership-family-0-12" class="form-checkbox" />
<label for="edit-membership-family-0-12">
Familiemedlemskap med barn i aldersgruppen 0-12
</label>
</div>
<div class="form-item form-type-checkbox form-item-membership-family-12-18">
<input type="checkbox" id="edit-membership-family-12-18" name="membership-family-12-18" class="form-checkbox" />
<label for="edit-membership-family-12-18">
Familiemedlemskap med barn i aldersgruppen 12-18
</label>
</div>
<div class="form-item form-type-checkbox form-item-membership-personal">
<input type="checkbox" id="edit-membership-personal" name="membership-personal" class="form-checkbox" />
<label for="edit-membership-personal">
Personlig medlemskap
</label>
</div>
<div class="form-item form-type-checkbox form-item-membership-support">
<input type="checkbox" id="edit-membership-support" name="membership-support" class="form-checkbox" />
<label for="edit-membership-support">
Støttemedlemmer
</label>
</div>
<div class="webform-flexbox form-wrapper" id="edit-membership-start-range">
<div class="webform-flex webform-flex--1">
<div class="webform-flex--container">
<div class="form-item form-type-date form-item-membership-start-from">
<label for="edit-membership-start-from">
Innmeldingsdato fra:
</label>
<input type="date" id="edit-membership-start-from" name="membership-start-from" class="form-date" />
</div>
</div>
</div>
<div class="webform-flex webform-flex--1">
<div class="webform-flex--container">
<div class="form-item form-type-date form-item-membership-start-to">
<label for="edit-membership-start-to">
Til:
</label>
<input type="date" id="edit-membership-start-to" name="membership-start-to" class="form-date" />
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</form>
</div>
<div class="mt-md">
<div class="btn-group">
<a href="http://testlenke.no" class="btn-cta">Vis medlemmene (112)</a>
<a href="http://testlenke.no" class="btn">Send e-post med arrangementsinvitasjon (83)</a>
<a href="http://testlenke.no" class="btn">Send e-post (83)</a>
<a href="http://testlenke.no" class="btn">Send sms (74)</a>
<a href="http://testlenke.no" class="btn">Lag adresse-etiketter (98)</a>
</div>
</div>
</div>
<div class="grid-item-half">
<div>
<fieldset>
<legend>
Søk etter enkeltmedlem
</legend>
<label for="serch-contact-filter" class="visually-hidden">
Søk etter enkeltmedlem
</label>
<input type="search" placeholder="Søk på navn eller e-postadresse" id="search-contact-filter" />
</fieldset>
</div>
<div class="mt-lg">
<div class="contacts">
<div class="contact ">
<div class="full-name icon-after">
Fornavn Etternavn
<span class="icon-after icon-bullet-new"></span>
<span class="icon-after icon-bullet-warning"></span>
</div>
<a href="http://testlenke.no" class="text-sm color-extra-grey email-restricted">
name@email.com
</a>
<button class="btn-icon btn-borderless toggle-open">
<span class="icon-expand-more"></span>
<span class="visually-hidden">Vis, skjul</span>
</button>
<ul class="details-list list-reset list-sm ">
<li class="icon-mail">
<a href="mailto:ola.nordmann@epost.no">ola.nordmann@epost.no</a>
</li>
<li class="icon-call">
<a href="tel:90343893">903 43 893</a>
</li>
<li class="icon-home icon-align-top">
<span>Torvgaten 64<br> 1632 Gamle Fredrikstad</span>
</li>
<li class="icon-male-colored">
<span data-title="Fødselsdato">13.04.1976</span>
</li>
<li class="icon-id-card">
<span data-title="Fødselsnummer">130476 44839</span>
</li>
</ul>
</div>
<div class="contact is-open">
<div class="full-name icon-after">
Fornavn Etternavn
<span class="icon-after icon-bullet-new"></span>
<span class="icon-after icon-bullet-warning"></span>
</div>
<a href="http://testlenke.no" class="text-sm color-extra-grey email-restricted">
name@email.com
</a>
<button class="btn-icon btn-borderless toggle-open">
<span class="icon-expand-more"></span>
<span class="visually-hidden">Vis, skjul</span>
</button>
<ul class="details-list list-reset list-sm ">
<li class="icon-mail">
<a href="mailto:ola.nordmann@epost.no">ola.nordmann@epost.no</a>
</li>
<li class="icon-call">
<a href="tel:90343893">903 43 893</a>
</li>
<li class="icon-home icon-align-top">
<span>Torvgaten 64<br> 1632 Gamle Fredrikstad</span>
</li>
<li class="icon-male-colored">
<span data-title="Fødselsdato">13.04.1976</span>
</li>
<li class="icon-id-card">
<span data-title="Fødselsnummer">130476 44839</span>
</li>
</ul>
</div>
<div class="contact ">
<div class="full-name icon-after">
Fornavn Etternavn
<span class="icon-after icon-bullet-new"></span>
<span class="icon-after icon-bullet-warning"></span>
</div>
<a href="http://testlenke.no" class="text-sm color-extra-grey email-restricted">
name@email.com
</a>
<button class="btn-icon btn-borderless toggle-open">
<span class="icon-expand-more"></span>
<span class="visually-hidden">Vis, skjul</span>
</button>
<ul class="details-list list-reset list-sm ">
<li class="icon-mail">
<a href="mailto:ola.nordmann@epost.no">ola.nordmann@epost.no</a>
</li>
<li class="icon-call">
<a href="tel:90343893">903 43 893</a>
</li>
<li class="icon-home icon-align-top">
<span>Torvgaten 64<br> 1632 Gamle Fredrikstad</span>
</li>
<li class="icon-male-colored">
<span data-title="Fødselsdato">13.04.1976</span>
</li>
<li class="icon-id-card">
<span data-title="Fødselsnummer">130476 44839</span>
</li>
</ul>
</div>
<div class="contact ">
<div class="full-name icon-after">
Fornavn Etternavn
<span class="icon-after icon-bullet-new"></span>
<span class="icon-after icon-bullet-warning"></span>
</div>
<a href="http://testlenke.no" class="text-sm color-extra-grey email-restricted">
name@email.com
</a>
<button class="btn-icon btn-borderless toggle-open">
<span class="icon-expand-more"></span>
<span class="visually-hidden">Vis, skjul</span>
</button>
<ul class="details-list list-reset list-sm ">
<li class="icon-mail">
<a href="mailto:ola.nordmann@epost.no">ola.nordmann@epost.no</a>
</li>
<li class="icon-call">
<a href="tel:90343893">903 43 893</a>
</li>
<li class="icon-home icon-align-top">
<span>Torvgaten 64<br> 1632 Gamle Fredrikstad</span>
</li>
<li class="icon-male-colored">
<span data-title="Fødselsdato">13.04.1976</span>
</li>
<li class="icon-id-card">
<span data-title="Fødselsnummer">130476 44839</span>
</li>
</ul>
</div>
<div class="contact ">
<div class="full-name icon-after">
Fornavn Etternavn
<span class="icon-after icon-bullet-new"></span>
<span class="icon-after icon-bullet-warning"></span>
</div>
<a href="http://testlenke.no" class="text-sm color-extra-grey email-restricted">
name@email.com
</a>
<button class="btn-icon btn-borderless toggle-open">
<span class="icon-expand-more"></span>
<span class="visually-hidden">Vis, skjul</span>
</button>
<ul class="details-list list-reset list-sm ">
<li class="icon-mail">
<a href="mailto:ola.nordmann@epost.no">ola.nordmann@epost.no</a>
</li>
<li class="icon-call">
<a href="tel:90343893">903 43 893</a>
</li>
<li class="icon-home icon-align-top">
<span>Torvgaten 64<br> 1632 Gamle Fredrikstad</span>
</li>
<li class="icon-male-colored">
<span data-title="Fødselsdato">13.04.1976</span>
</li>
<li class="icon-id-card">
<span data-title="Fødselsnummer">130476 44839</span>
</li>
</ul>
</div>
<div class="contact ">
<div class="full-name icon-after">
Fornavn Etternavn
<span class="icon-after icon-bullet-new"></span>
<span class="icon-after icon-bullet-warning"></span>
</div>
<a href="http://testlenke.no" class="text-sm color-extra-grey email-restricted">
name@email.com
</a>
<button class="btn-icon btn-borderless toggle-open">
<span class="icon-expand-more"></span>
<span class="visually-hidden">Vis, skjul</span>
</button>
<ul class="details-list list-reset list-sm ">
<li class="icon-mail">
<a href="mailto:ola.nordmann@epost.no">ola.nordmann@epost.no</a>
</li>
<li class="icon-call">
<a href="tel:90343893">903 43 893</a>
</li>
<li class="icon-home icon-align-top">
<span>Torvgaten 64<br> 1632 Gamle Fredrikstad</span>
</li>
<li class="icon-male-colored">
<span data-title="Fødselsdato">13.04.1976</span>
</li>
<li class="icon-id-card">
<span data-title="Fødselsnummer">130476 44839</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="page-wrapper">
{% include '@page-nav' with navigation %}
<main class="page-main">
{% include '@page-header' %}
<div class="page-body">
<div class="container">
<div class="row">
{% embed '@grid' with grid %}
{% block grid_items %}
{% embed '@grid-item--two-third' %}
{% block body %}
{% include '@header' with title %}
{% include '@paragraph--large' with paragraph_large %}
{# {% include '@paragraph' with paragraph %} #}
{{ test|markdown }}
{% endblock %}
{% endembed %} {# end @grid-item--two-third #}
{% embed '@grid-item--full' %}
{% block body %}
<div>
{% include '@form-member-filter' %}
</div>
<div class="mt-md">
{% include '@button-group' with filter_actions %}
</div>
{% endblock %}
{% endembed %} {# end @grid-item--two-third #}
{% embed '@grid-item--half' %}
{% block body %}
<div>
<fieldset>
<legend>
Søk etter enkeltmedlem
</legend>
<label for="serch-contact-filter" class="visually-hidden">
Søk etter enkeltmedlem
</label>
{% include '@form-input--search' with input_search_contact %}
</fieldset>
</div>
<div class="mt-lg">
{% include '@contact-list' %}
</div>
{% endblock %}
{% endembed %} {# end @grid-item--two-third #}
{% endblock %}
{% endembed %} {# end @grid #}
</div>
</div>
</div>
</main>
</div>
{
"navigation": {
"active": "members"
},
"title": {
"copy": "Medlemmer"
},
"paragraph_large": {
"copy": "Det er totalt 204 medlemmer i Østfold."
},
"test": "Her kan du:\n - Filtrere medlemmene etter barnets status.\n - Kopier e-postadresser for utsending av informasjon og tilbud.\n - Finne enkeltmedlem for direkte kontakt.\n - Se nye medlemmer og betalingsstatus.\n",
"filter_actions": {
"buttons": [
{
"type": "cta",
"copy": "Vis medlemmene (112)"
},
{
"copy": "Send e-post med arrangementsinvitasjon (83)"
},
{
"copy": "Send e-post (83)"
},
{
"copy": "Send sms (74)"
},
{
"copy": "Lag adresse-etiketter (98)"
}
]
},
"input_search_contact": {
"placeholder": "Søk på navn eller e-postadresse",
"id": "search-contact-filter"
}
}
There are no notes for this item.