BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

#185 Kalender 

<div class="rh-calendar-element">
    <div class="rh-calendar-element-month">
        <span class="rh-calendar-element-month-icon-prev"></span>
        <span class="rh-calendar-element-month-header">September</span>
        <span class="rh-calendar-element-month-icon-next"></span>
    </div>
    <div class="rh-calendar-element-days">
        <ul class="rh-calendar-element-days-list">
            <li class="rh-calendar-element-days-list-item">Mån</li>
            <li class="rh-calendar-element-days-list-item">Tis</li>
            <li class="rh-calendar-element-days-list-item">Ons</li>
            <li class="rh-calendar-element-days-list-item">Tors</li>
            <li class="rh-calendar-element-days-list-item">Fre</li>
            <li class="rh-calendar-element-days-list-item">Lör</li>
            <li class="rh-calendar-element-days-list-item">Sön</li>
        </ul>
        <ul class="rh-calendar-element-days-date">
            <li class="rh-calendar-element-days-date-item--inactive">28</li>
            <li class="rh-calendar-element-days-date-item--inactive">29</li>
            <li class="rh-calendar-element-days-date-item--inactive">30</li>
            <li class="rh-calendar-element-days-date-item--inactive">31</li>
            <li class="rh-calendar-element-days-date-item">1</li>
            <li class="rh-calendar-element-days-date-item">2</li>
            <li class="rh-calendar-element-days-date-item">3</li>
            <li class="rh-calendar-element-days-date-item">4</li>
            <li class="rh-calendar-element-days-date-item">5</li>
            <li class="rh-calendar-element-days-date-item">6</li>
            <li class="rh-calendar-element-days-date-item">7</li>
            <li class="rh-calendar-element-days-date-item">8</li>
            <li class="rh-calendar-element-days-date-item">9</li>
            <li class="rh-calendar-element-days-date-item">10</li>
            <li class="rh-calendar-element-days-date-item">11</li>
            <li class="rh-calendar-element-days-date-item">12</li>
            <li class="rh-calendar-element-days-date-item">13</li>
            <li class="rh-calendar-element-days-date-item--option">14</li>
            <li class="rh-calendar-element-days-date-item">15</li>
            <li class="rh-calendar-element-days-date-item">16</li>
            <li class="rh-calendar-element-days-date-item">17</li>
            <li class="rh-calendar-element-days-date-item--option">18</li>
            <li class="rh-calendar-element-days-date-item">19</li>
            <li class="rh-calendar-element-days-date-item">20</li>
            <li class="rh-calendar-element-days-date-item">21</li>
            <li class="rh-calendar-element-days-date-item">22</li>
            <li class="rh-calendar-element-days-date-item">23</li>
            <li class="rh-calendar-element-days-date-item">24</li>
            <li class="rh-calendar-element-days-date-item">25</li>
            <li class="rh-calendar-element-days-date-item">26</li>
            <li class="rh-calendar-element-days-date-item">27</li>
            <li class="rh-calendar-element-days-date-item">28</li>
            <li class="rh-calendar-element-days-date-item">29</li>
            <li class="rh-calendar-element-days-date-item--option">30</li>
            <li class="rh-calendar-element-days-date-item">31</li>
        </ul>
    </div>
</div>

<div class="rh-event-card-calendar rh-event-card-calendar-small">
    <div class="rh-event-card-calendar-date">
        <h4 class="rh-event-card-calendar-date-day">14</h4>
        <h6 class="rh-event-card-calendar-date-month">sep</h6>
    </div>
    <div class="rh-event-card-calendar-description">
        <p class="rh-event-card-calendar-title rh-event-card-calendar-title-small"> Lorem ipsum dolor sit amet </p>
        <p class="rh-event-card-calendar-time rh-event-card-calendar-time-small"> 18.30 - 21.30</p>
    </div>
</div>
<div class="rh-event-card-calendar rh-event-card-calendar-small">
    <div class="rh-event-card-calendar-date">
        <h4 class="rh-event-card-calendar-date-day">14</h4>
        <h6 class="rh-event-card-calendar-date-month">sep</h6>
    </div>
    <div class="rh-event-card-calendar-description">
        <p class="rh-event-card-calendar-title rh-event-card-calendar-title-small"> Lorem ipsum dolor sit amet </p>
        <p class="rh-event-card-calendar-time rh-event-card-calendar-time-small"> 18.30 - 21.30</p>
    </div>
</div>
<div class="rh-event-card-calendar rh-event-card-calendar-small">
    <div class="rh-event-card-calendar-date">
        <h4 class="rh-event-card-calendar-date-day">14</h4>
        <h6 class="rh-event-card-calendar-date-month">sep</h6>
    </div>
    <div class="rh-event-card-calendar-description">
        <p class="rh-event-card-calendar-title rh-event-card-calendar-title-small"> Lorem ipsum dolor sit amet </p>
        <p class="rh-event-card-calendar-time rh-event-card-calendar-time-small"> 18.30 - 21.30</p>
    </div>
</div>
 
<div class="rh-calendar-element">
    <div class="rh-calendar-element-month"> 
        <span class="rh-calendar-element-month-icon-prev"></span>
        <span class="rh-calendar-element-month-header">September</span>
        <span class="rh-calendar-element-month-icon-next"></span>
    </div>
    <div class="rh-calendar-element-days"> 
      <ul class="rh-calendar-element-days-list">
        <li class="rh-calendar-element-days-list-item">Mån</li>
        <li class="rh-calendar-element-days-list-item">Tis</li>
        <li class="rh-calendar-element-days-list-item">Ons</li>
        <li class="rh-calendar-element-days-list-item">Tors</li>
        <li class="rh-calendar-element-days-list-item">Fre</li>
        <li class="rh-calendar-element-days-list-item">Lör</li>
        <li class="rh-calendar-element-days-list-item">Sön</li>
      </ul>
      <ul class="rh-calendar-element-days-date"> 
        <li class="rh-calendar-element-days-date-item--inactive">28</li>
        <li class="rh-calendar-element-days-date-item--inactive">29</li>
        <li class="rh-calendar-element-days-date-item--inactive">30</li>
        <li class="rh-calendar-element-days-date-item--inactive">31</li>
        <li class="rh-calendar-element-days-date-item">1</li>
        <li class="rh-calendar-element-days-date-item">2</li>
        <li class="rh-calendar-element-days-date-item">3</li>
        <li class="rh-calendar-element-days-date-item">4</li>
        <li class="rh-calendar-element-days-date-item">5</li>
        <li class="rh-calendar-element-days-date-item">6</li>
        <li class="rh-calendar-element-days-date-item">7</li>
        <li class="rh-calendar-element-days-date-item">8</li>
        <li class="rh-calendar-element-days-date-item">9</li>
        <li class="rh-calendar-element-days-date-item">10</li>
        <li class="rh-calendar-element-days-date-item">11</li>
        <li class="rh-calendar-element-days-date-item">12</li>
        <li class="rh-calendar-element-days-date-item">13</li>
        <li class="rh-calendar-element-days-date-item--option">14</li>
        <li class="rh-calendar-element-days-date-item">15</li>
        <li class="rh-calendar-element-days-date-item">16</li>
        <li class="rh-calendar-element-days-date-item">17</li>
        <li class="rh-calendar-element-days-date-item--option">18</li>
        <li class="rh-calendar-element-days-date-item">19</li>
        <li class="rh-calendar-element-days-date-item">20</li>
        <li class="rh-calendar-element-days-date-item">21</li>
        <li class="rh-calendar-element-days-date-item">22</li>
        <li class="rh-calendar-element-days-date-item">23</li>
        <li class="rh-calendar-element-days-date-item">24</li>
        <li class="rh-calendar-element-days-date-item">25</li>
        <li class="rh-calendar-element-days-date-item">26</li>
        <li class="rh-calendar-element-days-date-item">27</li>
        <li class="rh-calendar-element-days-date-item">28</li>
        <li class="rh-calendar-element-days-date-item">29</li>
        <li class="rh-calendar-element-days-date-item--option">30</li>
        <li class="rh-calendar-element-days-date-item">31</li>
      </ul>
    </div>
</div>

<div class="rh-event-card-calendar rh-event-card-calendar-small">
    <div class="rh-event-card-calendar-date">
        <h4 class="rh-event-card-calendar-date-day">14</h4>
        <h6 class="rh-event-card-calendar-date-month">sep</h6>
    </div>  
    <div class="rh-event-card-calendar-description">
        <p class="rh-event-card-calendar-title rh-event-card-calendar-title-small"> Lorem ipsum dolor sit amet </p>
        <p class="rh-event-card-calendar-time rh-event-card-calendar-time-small"> 18.30 - 21.30</p> 
    </div>  
</div>
<div class="rh-event-card-calendar rh-event-card-calendar-small">
    <div class="rh-event-card-calendar-date">
        <h4 class="rh-event-card-calendar-date-day">14</h4>
        <h6 class="rh-event-card-calendar-date-month">sep</h6>
    </div>  
    <div class="rh-event-card-calendar-description">
        <p class="rh-event-card-calendar-title rh-event-card-calendar-title-small"> Lorem ipsum dolor sit amet </p>
        <p class="rh-event-card-calendar-time rh-event-card-calendar-time-small"> 18.30 - 21.30</p> 
    </div>  
</div>
<div class="rh-event-card-calendar rh-event-card-calendar-small">
    <div class="rh-event-card-calendar-date">
        <h4 class="rh-event-card-calendar-date-day">14</h4>
        <h6 class="rh-event-card-calendar-date-month">sep</h6>
    </div>  
    <div class="rh-event-card-calendar-description">
        <p class="rh-event-card-calendar-title rh-event-card-calendar-title-small"> Lorem ipsum dolor sit amet </p>
        <p class="rh-event-card-calendar-time rh-event-card-calendar-time-small"> 18.30 - 21.30</p> 
    </div>  
</div>
 
{
  "caption": "",
  "name": ""
}
  • Content: 
    {
    "name": "regionhalland/calendar",
    "description": "Calendar",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/calendar/composer.json
  • Filesystem Path: components/Organisms/calendar/composer.json
  • Size: 286 Bytes

Organismen “Calendar”

Versionshistorik

  • 1.0.0.20191123 Flyttat till gitrepo