Styleguide 0.30.11

38 - Weather

Weather components

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>