Demo page: This simulates how theCrag.com could embed SunShade widgets on their route pages. The sun/shade data below is real, computed from actual terrain profiles.
← Back to embed docs  ·  sunshade.info

Love Ledge

Leonidio, Arcadia, Greece

12 routes Grades 5a – 7c+ East facing 10m – 25m

Crag Overview

One widget shows all routes with composite summary — powered by SunShade shade API

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-crag="Love Ledge"
     data-region="Leonidio"
     data-composite="both"
     data-style="bar"></div>

<script src="https://sunshade.info/widget.js"></script>

Crag Card Widget

Card style with composite summary and route list

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-crag="Twin Caves"
     data-region="Leonidio"
     data-composite="both"
     data-style="card"></div>

<script src="https://sunshade.info/widget.js"></script>

Crag by theCrag Area ID

Use data-thecrag-area-id instead of crag/region names — ideal for theCrag.com integration

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-thecrag-area-id="450333144"
     data-composite="intersection"
     data-style="bar"
     data-label="Twin Caves (via Area ID)"></div>

<script src="https://sunshade.info/widget.js"></script>

Crag Text Widget

Minimal text listing — great for sidebars or compact spaces

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-mode="crag"
     data-crag="Love Ledge"
     data-region="Leonidio"
     data-style="text"></div>

<script src="https://sunshade.info/widget.js"></script>

Single Route Bars

Original single-route widgets (client-side computation) — powered by SunShade

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-james"
     data-style="bar"
     data-label="James (6a+)"></div>

<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-into-the-fire"
     data-style="bar"
     data-label="Into the Fire (6c)"></div>

<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-tin-cardia"
     data-style="bar"
     data-label="Tin Cardia (6b+)"></div>

<script src="https://sunshade.info/widget.js"></script>

Featured Route

Card-style widget

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-james"
     data-style="card"></div>

<script src="https://sunshade.info/widget.js"></script>

Custom Colours

Each site can match widget colours to their brand using data attributes

Show embed code
<!-- theCrag green -->
<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-james"
     data-style="bar"
     data-label="theCrag green"
     data-sun-color="#8bc34a"
     data-shade-color="#2d5016"
     data-bar-bg="#1a3a0a"></div>

<!-- Light theme with warm gradient -->
<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-james"
     data-style="bar"
     data-label="Light theme"
     data-sun-color="linear-gradient(90deg,#f59e0b,#ef4444)"
     data-shade-color="#bfdbfe"
     data-bar-bg="#e5e7eb"></div>

<script src="https://sunshade.info/widget.js"></script>

Quick Reference

Text-only widgets — minimal footprint

Show embed code
<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-james"
     data-style="text"
     data-label="James"></div>

<div class="sunshade"
     data-key="thecrag"
     data-profile="leonidio-love-ledge-into-the-fire"
     data-style="text"
     data-label="Into the Fire"></div>

<script src="https://sunshade.info/widget.js"></script>

Routes

# Route Grade Height Style
1 James 6a+ 20m Sport
2 Into the Fire 6c 22m Sport
3 Tin Cardia 6b+ 18m Sport