38.1 - Article component
Component mainly used for articles
<aside class="panel has-section-title weather columns">
<h5 class="section-title center"><span>Sjekk påskeværet</span></h5>
<div class="inside">
<table class="weather-data">
<thead class="weather-header">
<tr>
<th>Sted</th>
<th>I dag</th>
</thead>
<tbody>
<tr class="weather-row">
<td><a href="#" class="weather-place">Oslo</a></td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
<td><a class="button weather-longterm tiny">Se langtid<span class="icon-Arrow-alt-right align-right"></span></a></td>
</tr>
<tr class="weather-row">
<td><a href="#" class="weather-place">Bergen</a></td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature minus">-10°C</span>
</td>
<td><a class="button weather-longterm tiny">Se langtid<span class="icon-Arrow-alt-right align-right"></span></a></td>
</tr>
<tr class="weather-row">
<td><a href="#" class="weather-place">Trondheim</a></td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
<td><a class="button weather-longterm tiny">Se langtid<span class="icon-Arrow-alt-right align-right"></span></a></td>
</tr>
</tbody>
</table>
<a class="button small">Se været flere steder</a>
</div>
</aside> 38.2 - Article component variation
<aside class="panel has-section-title weather columns">
<h5 class="section-title center"><span>Sjekk påskeværet</span></h5>
<div class="inside">
<table class="weather-data">
<thead class="weather-header">
<tr>
<th>Sted</th>
<th>I dag</th>
<th>I morgen</th>
</thead>
<tbody>
<tr class="weather-row">
<td><a href="#" class="weather-place">Oslo</a></td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
</tr>
<tr class="weather-row">
<td><a href="#" class="weather-place">Bergen</a></td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature minus">-10°C</span>
</td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
</tr>
<tr class="weather-row">
<td><a href="#" class="weather-place">Trondheim</a></td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
<td class="weather-data-wrap">
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
</td>
</tr>
</tbody>
</table>
<a class="button small">Se været flere steder</a>
</div>
</aside> 38.3 - Frontpage component for mobile
<div class="panel weather front columns">
<h2>VÆRVARSEL</h2>
<a class="more-link" href="https://sol.no/vaer"> SE MER </a>
<div class="inside">
<a href="#" class="weather-place">Blindern</a>
<img class="weather-image" src="https://solmedia.no/cloud/h_38,w_38/static/weather_symbol/1.png" />
<span class="weather-temperature plus">10°C</span>
<div class="clearfix"></div>
<a class="button small clearfix">Se været flere steder</a>
</div>
</div>