{#
// Link Block - Destination ideas.
// https://www.greateranglia.co.uk/offers/book-hotel
// Child page image link - sub page image.
#}
<h2>Destination ideas</h2>
<div class="sub-pages">
  <div class="row">
    <div class="col-sm-6 large-sub-page  col-xs-12">
      <div class="sub-page sub-page-image" style="background-image: url(https://picsum.photos/500/250?rnd=a1)"><a href="/destinations/norwich"><span class="name">Norwich </span> </a></div>
      <div class="intro">
        <p>Visit Norwich by train and discover a city steeped in history. The castle, cathedrals and medieval buildings make Norwich one of Britain’s finest cities!</p>
      </div>
    </div>
    <div class="col-sm-6 large-sub-page  col-xs-12">
      <div class="sub-page sub-page-image" style="background-image: url(https://picsum.photos/500/250?rnd=a2)"><a href="/destinations/cambridge"><span class="name">Cambridge </span> </a></div>
      <div class="intro">
        <p>Visit Cambridge by train this spring and discover a city rich in culture. With its world-famous colleges, churches, museums or why not spend a day or short break exploring the shops and markets?</p>
      </div>
    </div>
  </div>
</div>

{#
// Stations finder.
// This is actually a component not HTML, but is part of sprint 7.
#}
{% set vars = {
  "pid": "abc",
  "items": [
    {
      "pid": "abc",
      "aiid": "a",
      "label": "A",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "b",
      "label": "B",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "c",
      "label": "C",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "d",
      "label": "D",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "e",
      "label": "E",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "f",
      "label": "F",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "g",
      "label": "G",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "h",
      "label": "H",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "i",
      "label": "I",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "j",
      "label": "J",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "k",
      "label": "K",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "l",
      "label": "L",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "m",
      "label": "M",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "n",
      "label": "N",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "o",
      "label": "O",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "p",
      "label": "P",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "q",
      "label": "Q",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "r",
      "label": "R",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "s",
      "label": "S",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "t",
      "label": "T",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    },
    {
      "pid": "abc",
      "aiid": "u",
      "label": "U",
      "content": "Aliquam imperdiet euismod massa, vitae ultricies lacus aliquam non. Morbi imperdiet porttitor suscipit. Morbi vel gravida nunc. Donec vitae eros blandit, pharetra erat a, interdum quam."
    }
  ]
} %}

<div class="blk blk-shd blk-brd">
  <h2>This is the block title</h2>
  {{ pattern('bs-accordion-items', vars, "aci_b") }}
  <h3>This is the an H3</h3>
  <p>This is some content</p>
</div>

{#
// Standard buttons.
// https://www.greateranglia.co.uk/tickets-fares/find-right-ticket-you
// Button small.
#}
<p>Whether you're a frequent rail traveller, get the train occasionally, or are looking for a great value day out with friends and family, we can help you find the best ticket.</p>
<h2>Daily tickets</h2>
<p><a class="btn small" href="/tickets-fares/daily-tickets/advance-tickets" role="button">Advance</a> <a class="btn small" href="/tickets-fares/daily-tickets/off-peak-and-super-off-peak-tickets" role="button">Off-Peak &amp; Super Off-Peak</a> <a class="btn small" href="/tickets-fares/daily-tickets/anytime-tickets" role="button">Anytime</a> <a class="btn small" href="/tickets-fares/daily-tickets/child-train-fares" role="button">Child fares</a> <a class="btn small" href="/tickets-fares/daily-tickets/first-class-travel" role="button">First Class</a> <a class="btn small" href="/tickets-fares/daily-tickets/oyster" role="button">Oyster</a></p>
<h2>Season tickets</h2>
<p><a class="btn small" href="/tickets-fares/season-tickets/choosing-your-season-ticket" role="button">Season Tickets</a> <a class="btn small" href="/smart" role="button">Smart Card Season Tickets</a> <a class="btn small" href="/commuter-club" role="button">Commuter Club</a> <a class="btn small" href="/tickets-fares/season-tickets/annual-gold-card" role="button">Annual Gold Card</a> <a class="btn small" href="/tickets-fares/season-tickets/job-track" role="button">Job Track</a></p>
<h2>Discounts</h2>
<p><a class="btn small" href="/tickets-fares/discounts/groupsave-tickets" role="button">GroupSave</a> <a class="btn small small" href="/tickets-fares/discounts/plusbus" role="button">PLUSBUS</a> <a class="btn small" href="/tickets-fares/discounts/rangers-rovers" role="button">Rangers &amp; Rovers</a> <a class="btn small" href="/tickets-fares/discounts/railcards" role="button">Railcards</a> <a class="btn small" href="/railandsail" role="button">Rail and Sail</a> <a class="btn small" href="/tickets-fares/discounts/duo-tickets" role="button">Duo</a> <a class="btn small" href="/london-evening-out" role="button">London Evening Out</a> <a class="btn small" href="/tickets-fares/discounts/flexipass" role="button">FlexiPass</a></p>
<h2>Business travel</h2>
<p><a class="btn small" href="/tickets-fares/business-travel/discounted-season-tickets-for-corporates" role="button">Discounted Season Tickets for corporates</a> <a class="btn small" href="/tickets-fares/business-travel/schoolcollege-travel-discounts" role="button">School/college travel discounts</a> <a class="btn small" href="/tickets-fares/business-travel/business-return" role="button">Business Return</a></p>
<p>You can find further information on finding the right ticket and conditions of travel at <a href="http://www.nationalrail.co.uk/times_fares/ticket_types.aspx" class="alt-link-processor-fa alt-link-processor-fa-external-link-square" target="_blank" rel="noopener">National Rail</a></p>

{#
// Link block - in-page announcement.
// https://www.greateranglia.co.uk/tickets-fares/discounts/railcards
// Announcement (not services).
#}
<h2 class="standfirst">Railcard discounts for all ages.</h2>
<p>Save up&nbsp;to 1/3 off most rail fares with the 16-25 Saver, 26-30, Disabled Persons, Family &amp; Friends, Network, Senior and Two Together Railcards.</p>

<div class="announcement">
  <h2>COVID-19 Refunds</h2>
  <p>See our&nbsp;<a href="https://www.train-operator.co.uk/contact-us/">COVID-19 ticket refund update</a> page for&nbsp;information about railcard refunds. At the moment, there's no change to the validity period and expiry dates for annual railcards but if there's any changes to this, we will update accordingly.</p>
</div>

<div class="announcement">
  <h2>Important Notice</h2>
  <p>If you bought a Railcard online but haven’t yet received it and are due to travel shortly, you can provide the email confirmation of your Railcard purchase together with photo ID so that staff can validate your discounted ticket. If you haven’t been able to purchase a Railcard online, you can buy most 1-year Railcards at any staffed National Rail ticket office (see individual Railcard websites for details). If you’re having issues with your existing Railcard, please contact the Railcard Team on&nbsp;​<a href="https://twitter.com/_railcards">Twitter</a>, <a href="https://www.facebook.com/Railcard/">Facebook</a>, 0345 3000 250 or railcardhelp@nationalrail.co.uk.</p>
</div>

<p class="announcement">
  Find out about how you can change all Advance ticket types fee free if the change is made before 18:00 the day before travel on our <span style="display: none;"> </span>
  <a href="/book-confidence">Book With Confidence</a> page
  If you bought a Railcard online but haven’t yet received it and are due to travel shortly, you can provide the email confirmation of your Railcard purchase together with photo ID so that staff can validate your discounted ticket. If you haven’t been able to purchase a Railcard online, you can buy most 1-year Railcards at any staffed National Rail ticket office (see individual Railcard websites for details). If you’re having issues with your existing Railcard, please contact the Railcard Team on&nbsp;​<a href="https://twitter.com/_railcards">Twitter</a>, <a href="https://www.facebook.com/Railcard/">Facebook</a>, 0345 3000 250 or railcardhelp@nationalrail.co.uk.
</p>

{#
// Link block - in-page child page link.
// https://www.greateranglia.co.urk/tickets-fares
// Child page link.
#}

<div class="sub-pages">
  <div class="row">
    <div class="col-md-3 col-sm-4 col-xs-12">
      <div class="sub-page">
        <a href="/node/328726" title="Find the right ticket for you">
          <span class="name">Find the Right Ticket for You </span>
        </a>
      </div>
    </div>

    <div class="col-md-3 col-sm-4 col-xs-12">
      <div class="sub-page"><a href="/node/329620" title="Find out more about our Best Fare Finder"><span class="name">Best Fare Finder </span> </a></div>
    </div>

    <div class="col-md-3 col-sm-4 col-xs-12">
      <div class="sub-page"><a href="/node/316402" title="Find out more about our daily tickets"><span class="name">Daily Tickets </span> </a></div>
    </div>

    <div class="col-md-3 col-sm-4 col-xs-12">
      <div class="sub-page"><a href="/node/316438" title="Find out more about our Season Tickets"><span class="name">Season Tickets </span> </a></div>
    </div>

    <div class="col-md-3 col-sm-4 col-xs-12">
      <div class="sub-page"><a href="/node/316421" title="Find out more about available discounts"><span class="name">Discounts </span> </a></div>
    </div>

    <div class="col-md-3 col-sm-4 col-xs-12">
      <div class="sub-page"><a href="/node/316397" title="Find out more about business travel"><span class="name">Business Travel </span> </a></div>
    </div>
  </div>
</div>

{#
// Link block - in-page child page link.
// https://www.greateranglia.co.uk/contact-us
// Child page link. Sub page icon.
#}

<p>You can also access our Passenger Charter and Complaints Handling Procedure, as well as links to the National Rail Conditions of Travel from this site too.</p>

<div class="sub-pages with-images">
  <div class="row">
    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/contact-us/contact-directory"><img alt="Contact Directory" class="media-element file-default img-responsive" data-delta="1" src="https://www.greateranglia.co.uk/sites//default/files/20170929/PA_EL7QWdalBZCncX_QXhjnhT9My1U4kfT8U_5oh7ag/ga-landing-pages-contacts2.jpg" title="" typeof="foaf:Image" /><span class="name">Contact Directory</span> </a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/contact-us/contact-forms"><img alt="Contact Form" class="media-element file-default img-responsive" data-delta="2" src="https://www.greateranglia.co.uk/sites//default/files/20170929/N7ykZgXHwyLLNMPKdy_LQIrEdSbLk6VwR6dSFEGo1hs/ga-landing-pages-contact-forms2.jpg" title="" typeof="foaf:Image" /> <span class="name">Contact Forms</span></a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/contact-us/faqs"><img alt="FAQs" class="media-element file-default img-responsive" data-delta="3" src="https://www.greateranglia.co.uk/sites//default/files/20170929/QMw8iirKe5Z2VootH437bNlpWZL8Gcnixq4tYsr1RZQ/ga-landing-pages-faq2.jpg" title="" typeof="foaf:Image" /><span class="name">Frequently Asked Questions</span></a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/about-us/our-performance/delay-repay"><img alt="Delay Repay" class="media-element file-default img-responsive" data-delta="4" src="https://www.greateranglia.co.uk/sites//default/files/20170929/BmYaaSJhrc-_RbabERTlQpgeYuyEwis-Jky6XBzZYbQ/ga-landing-pages-delay2.jpg" title="" typeof="foaf:Image" /><span class="name">Delay Repay</span> </a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/contact-us/social-media"><img alt="Social Media" class="media-element file-default img-responsive" data-delta="5" src="https://www.greateranglia.co.uk/sites//default/files/20170929/84jtunYVM9_nLtjduecUBwObvR9yb8svqkzOQf7L3rM/ga-landing-pages-social2.jpg" title="" typeof="foaf:Image" /><span class="name">Social Media</span> </a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/contact-us/london-travelwatch"><img alt="London TravelWatch" class="media-element file-default img-responsive" data-delta="6" src="https://www.greateranglia.co.uk/sites//default/files/20170929/DfwD-hw0vZs2m-GzcsUErILAIdj3rNPRAtozds1X7pg/ga-landing-pages-travelwatch2.jpg" title="" typeof="foaf:Image" /><span class="name">London TravelWatch</span></a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/contact-us/feedback-passenger-focus"><img alt="Transport Focus" class="media-element file-default img-responsive" data-delta="7" src="https://www.greateranglia.co.uk/sites//default/files/20170929/6OOeMPcxaIuDX0mK6UiX_4pi1Dv4xT8XDP1JtiR8Hgg/ga-landing-pages-focus2.jpg" title="" typeof="foaf:Image" /><span class="name">Transport Focus</span></a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/about-us/always-listening-survey"><img alt="Always Listening Survey" class="media-element file-default img-responsive" data-delta="8" src="https://www.greateranglia.co.uk/sites//default/files/respimg/in_content/normal/public/assets/image_ct/survey-icon-2.jpg?itok=2lsLLLHi" title="" typeof="foaf:Image" /><span class="name">Always Listening Survey</span></a></div>
    </div>

    <div class="col-lg-4 col-sm-6">
      <div class="sub-page no-image"><a href="/rail-ombudsman"><img alt="The Rail Ombudsman logo" class="media-element file-default img-responsive" data-delta="9" src="https://www.greateranglia.co.uk/sites//default/files/respimg/in_content/normal/public/assets/image_ct/tro-contact-page-graphic.jpg?itok=HBN4WsbI" title="" typeof="foaf:Image" /><span class="name">The Rail Ombudsman</span></a></div>
    </div>
  </div>
</div>
