12.0 - Resource module

Resource module is used to display resources

Default styling
Lorem ipsum
Wrapes resource and adds margin and acts as grid element	.mee-resource-wrapper
Lorem ipsum
Wraps around the products and provides background	.mee-resource-holder
Lorem ipsum
special holder for actions of the product	.mee-resource-actions
Lorem ipsum
special holder, acts as a grid element and img contained within is responsive	.mee-resource-image
Lorem ipsum
acts as a resource title	.mee-resource-title
Lorem ipsum
fades out the resource	.mee-resource-unavailable
Lorem ipsum
resource not available on device message	.mee-resource-unavailable-on-device
Lorem ipsum

<div class="{$modifiers}">Lorem ipsum</div>

12.1 - Resource module file selector

File selector styling wrapper

Default styling
I have a disc

<div class="mee-resource-actions-file">
  <a class="mee-button-blue">I have a disc
  <input type="file"></a>
</div>

12.2 - Resource module example

File selector styling wrapper. The inline style is only to make sure the module fits in properly in style guide as space is limited.

Default styling
High Five! 5 Pupil's Practice Kit I have a disc Download

<div class="mee-resource" style="width: 100%;">
  <div>
    <h2>High Five! 5 Pupil's Practice Kit</h2>
    <span><img src="../public/images/image-placeholder.png"></span>
    <div class="mee-resource-actions">
      <div>
        <a class="mee-button-blue">I have a disc
        <input type="file"></a>
      </div>
      <a class="mee-button-green">Download</a>
    </div>
  </div>
</div>

12.3 - Resource unavailable module example

File selector styling wrapper. The inline style is only to make sure the module fits in properly in style guide as space is limited.

Default styling
High Five! 5 Pupil's Practice Kit I have a disc Download

<div class="mee-resource mee-resource-unavailable" style="width: 100%;">
  <div>
    <h2>High Five! 5 Pupil's Practice Kit</h2>
    <span><img src="../public/images/image-placeholder.png"></span>
    <div class="mee-resource-actions">
      <div>
        <a class="mee-button-blue">I have a disc
        <input type="file"></a>
      </div>
      <a class="mee-button-green">Download</a>
    </div>
  </div>
</div>

12.3 - Resource unavailable on device module example

File selector styling wrapper. The inline style is only to make sure the module fits in properly in style guide as space is limited.

Default styling
High Five! 5 Pupil's Practice Kit This resource cannot be opened on this device. Click here to find out why.

<div class="mee-resource" style="width: 100%;">
  <div>
    <h2>High Five! 5 Pupil's Practice Kit</h2>
    <span><img src="../public/images/image-placeholder.png"></span>
    <div class="mee-resource-unavailable-on-device">
      This resource cannot be opened on this device. <a href="#">Click here to find out why.</a>
    </div>
  </div>
</div>